、canvas简介

1. canvas是HTML5提供的一种新标签,双标签;
2. HTML5 canvas标签元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成;
3. canvas标签只是图形容器，必须使用脚本来绘制图形;

Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画;

二、案例目标

我们今天的目标是使用HTML5画布技术制作一款拼图小游戏，要求将图像划分为3*3的9块方块并打乱排序，用户可以移动方块拼成完整图片。

效果如下所示:

三、程序流程

3.1 HTML静态页面布局

<div id="container">
            <!--页面标题-->
            <h3>HTML5画布综合项目之拼图游戏</h3>
            <!--水平线-->
            <hr />
            <!--游戏内容-->
            <!--游戏时间-->        
            <div id="timeBox">
                共计时间：<span id="time">00:00:00</span>
            </div>
            <!--游戏画布-->
            <canvas id="myCanvas" width="300" height="300" style="border:1px solid">
                对不起，您的浏览器不支持HTML5画布API。
            </canvas>
            <!--游戏按钮-->
            <div>
                <button onclick="restartGame()">
                    重新开始
                </button>
            </div>  
</div>

效果如下所示:

我们可以看到页面的大致结构是已经显现出来了,就是骨架已经搭建好了,现在我们要使用css强化样式;

3.2 CSS打造页面样式

整体背景设置

body {
    background-color: silver;/*设置页面背景颜色为银色*/
}

游戏界面样式设置

#container {
    background-color: white;
    width: 600px;   
    margin: auto;
    padding: 20px;
    text-align: center; 
    box-shadow: 10px 10px 15px black;
}

游戏时间面板样式设置

#timeBox {
    margin: 10px 0;
    font-size: 18px;
}

游戏按钮样式设置

button {
    width: 200px;
    height: 50px;
    margin: 10px 0;
    border: 0;
    outline: none;
    font-size: 25px;
    font-weight: bold;
    color: white;  
    background-color: lightcoral;
}

鼠标悬浮时的按钮样式设置

button:hover {
    background-color: coral;
}

设置好界面整体样式之后我们得到完整的界面,如下所示:

可以看到整体的静态界面已经搭建出来了

3.3 js构建交互效果

3.3.1 对象的获取以及图片的设置

目标对象的获取

var c = document.getElementById('myCanvas'); //获取画布对象
var ctx = c.getContext('2d'); //获取2D的context对象

声明拼图的图片素材来源

var img = new Image();
img.src = "image/pintu.jpg";
                
img.onload = function() { //当图片加载完毕时
    generateNum(); //打乱拼图的位置
    drawCanvas(); //在画布上绘制拼图
}

3.3.2 初始化拼图

• 需要将素材图片分割成3行3列的9个小方块，并打乱顺序放置在画布上;
• 为了在游戏过程中便于查找当前的区域该显示图片中的哪一个方块，首先为原图片上的9个小方块区域进行编号;

定义初始方块位置

var num = [[00, 01, 02], [10, 11, 12], [20, 21, 22]];

打乱拼图的位置

function generateNum() { //循环50次进行拼图打乱    
         for (var i = 0; i < 50; i++) {
      //随机抽取其中一个数据
            var i1 = Math.round(Math.random() * 2);
            var j1 = Math.round(Math.random() * 2);
      //再随机抽取其中一个数据
            var i2 = Math.round(Math.random() * 2);
            var j2 = Math.round(Math.random() * 2);
      //对调它们的位置
            var temp = num[i1][j1];
            num[i1][j1] = num[i2][j2];
            num[i2][j2] = temp;
   }
}

绘制拼图

自定义名称的drawCanvas()方法用于在画布上绘制乱序后的图片;

function drawCanvas() {
    //清空画布
    ctx.clearRect(0, 0, 300, 300);
    //使用双重for循环绘制3x3的拼图
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            if (num[i][j] != 22) {
                //获取数值的十位数，即第几行
                var row = parseInt(num[i][j] / 10);
                //获取数组的个位数，即第几列
                var col = num[i][j] % 10;
                //在画布的相关位置上绘图
                ctx.drawImage(img, col * w, row * w, w, w, j * w, i * w, w, w); // w:300 / 3 = 100(小图宽度)
            }
        }
    }
}

如下所示:

3.3.3 事件绑定

监听鼠标监听事件

c.onmousedown = function(e) {
    var bound = c.getBoundingClientRect(); //获取画布边界
    
    var x = e.pageX - bound.left; //获取鼠标在画布上的坐标位置(x,y)
    var y = e.pageY - bound.top;


    var row = parseInt(y / w); //将x和y换算成几行几列
    var col = parseInt(x / w);


    
    if (num[row][col] != 22) { //如果当前点击的不是空白区域
        detectBox(row, col); //移动点击的方块
        drawCanvas(); //重新绘制画布
        var isWin = checkWin(); //检查游戏是否成功
        
        if (isWin) { //如果游戏成功
            clearInterval(timer); //清除计时器
            ctx.drawImage(img, 0, 0); //绘制完整图片
            ctx.font = "bold 68px serif"; //设置字体为加粗、68号字，serif
            ctx.fillStyle = "red"; //设置填充色为红色
            ctx.fillText("游戏成功！", 20, 150); //显示提示语句
        }
    }
}

点击方块移动

function detectBox(i, j) {
    //如果点击的方块不在最上面一行
    if (i > 0) {
        //检测空白区域是否在当前方块的正上方
        if (num[i-1][j] == 22) {
            //交换空白区域与当前方块的位置
            num[i-1][j] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
    //如果点击的方块不在最下面一行
    if (i < 2) {
        //检测空白区域是否在当前方块的正下方
        if (num[i+1][j] == 22) {
            //交换空白区域与当前方块的位置
            num[i+1][j] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
    //如果点击的方块不在最左边一列
    if (j > 0) {
        //检测空白区域是否在当前方块的左边
        if (num[i][j - 1] == 22) {
            //交换空白区域与当前方块的位置
            num[i][j - 1] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
    //如果点击的方块不在最右边一列
    if (j < 2) {
        //检测空白区域是否在当前方块的右边
        if (num[i][j + 1] == 22) {
            //交换空白区域与当前方块的位置
            num[i][j + 1] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
}

3.3.4 游戏计时

• 自定义函数getCurrentTime()用于进行游戏计时；
• function getCurrentTime() {
  s = parseInt(s); //将时分秒转换为整数以便进行自增或赋值
  m = parseInt(m);
  h = parseInt(h);
  s++; //每秒变量s先自增1
  
  if (s == 60) {
  s = 0; //如果秒已经达到60，则归0
  m++; //分钟自增1
  }
  if (m == 60) {
  m = 0; //如果分钟也达到60，则归0
  h++; //小时自增1
  }
  
  
  //修改时分秒的显示效果，使其保持两位数
  if (s < 10)
  s = "0" + s;
  if (m < 10)
  m = "0" + m;
  if (h < 10)
  h = "0" + h;
  time.innerHTML = h + ":" + m + ":" + s; //将当前计时的时间显示在页面上
  }
• 在JavaScript中使用setInterval()方法每隔1秒钟调用getCurrentTime()方法一次，以实现更新效果;var timer = setInterval("getCurrentTime()", 1000);

3.3.5 游戏成功与重新开始

游戏成功判定与显示效果的实现

• 自定义函数checkWin()用于进行游戏成功判断;

function restartGame() {
    clearInterval(timer);  //清除计时器
    s = 0; //时间清零
    m = 0;
    h = 0;
    getCurrentTime();  //重新显示时间
    timer = setInterval("getCurrentTime()", 1000);
 
    generateNum(); //重新打乱拼图顺序
    drawCanvas(); //绘制拼图
    
}

• 如果成功则使用clearInterval()方法清除计时器。然后在画布上绘制完整图片，并使用fillText()方法绘制出“游戏成功”的文字图样;if (isWin) { //如果游戏成功
  clearInterval(timer); //清除计时器
  ctx.drawImage(img, 0, 0); //绘制完整图片
  ctx.font = "bold 68px serif"; //设置字体为加粗、68号字，serif
  ctx.fillStyle = "red"; //设置填充色为红色
  ctx.fillText("游戏成功！", 20, 150); //显示提示语句
  }

3.4 最终效果演示

静态效果如上所示,至于游戏成功这里伙计们可以自行操作;

四、总结

本次案例我们使用HTML5的新特性canvas画布标签打造了简单的9宫格拼图游戏,总体来说没有特别的复杂,主要是图片的分割方块移动事件的绑定,以及重新游戏的初始化操作,明确了游戏逻辑之后其实代码的编写其实不难。感兴趣的小伙伴可以去尝试一下。

去年曾写过一个用H5，Javascript，css3实现的拼拼乐小游戏，技术栈采用自己封装的类Jquery框架 Xuery ，其中涉及到了很多经典的 javascript 算法和css3特性 ，对大家的编程能力会有很大的提高，文末我也会放上源码获取方式，大家可以学习体验一下。

前言

因为该应用属于 H5 游戏，为了让项目更轻量，我没有采用第三方 ui 库，如果大家想采用基于 vue 的第三方移动端ui库，我给大家推荐几个我之前用过的比较靠谱的：

• Mint 饿了么推出的移动端ui库
• NutUI 一套京东风格的移动端组件库
• muse-ui 基于MaterialUI风格的移动端UI组件
• cube-ui 滴滴团队开发的移动端UI组件库
• vant 有赞团队的电商风格的移动端组件库
• atom-design atom风格的移动端ui组件库
• mand-mobile 滴滴团队研发的基于金融场景的移动端ui组件库

以上推荐的都是社区比较完善，bug比较少的组件库，大家可以感受一下。

回到我们的小游戏开发，考验更多的是大家对 javascript 和css3 的掌握程度，在学习完这篇文章之后相信大家对 javascript 和 css3 的编程能力都会有极大的提升，后面还会介绍如何使用 canvas 实现生成战绩海报图的功能。

正文

我们先来看看游戏的预览界面：

本文的算法实现方式在之前的拼拼乐文章中已经说明，这里主要介绍核心算法， 至于vue-cli的使用方法，笔者之前也写过对应的文章，大家可以研究学习一下。vue-cli搭建项目方式如下：

// 安装
yarn global add @vue/cli

// 创建项目
vue create pinpinle

// 进入项目并启动
cd pinpinle && yarn start

关于vue-cli3配置实战，可以移步 一张图教你快速玩转vue-cli3

H5游戏核心功能介绍

目前笔者主要整理了如下核心功能，接下来笔者会一一带大家实现： 实现纯javascript上传预览图片 实现拼图分割功能 实现洗牌算法 实现生成战绩海报功能

1. 实现纯javascript上传预览图片

文件上传预览主要采用FileReader API实现，原理就是将file对象传给FileReader的readAsDataURL然后转化为data:URL格式的字符串（base64编码）以表示所读取文件的内容。 具体代码如下：

// 2.文件上传解析
let file = $('#file');
file.on('change', function(e){
    var file = this.files[0];
    var fileReader = new FileReader();
    // 读取完成触发的事件
    fileReader.onload = function(e) {
        $('.file-wrap')[0].style.backgroundImage = 'url(' + fileReader.result + ')';
        imgSrc = fileReader.result;
    }

    file && fileReader.readAsDataURL(file);
})

2. 实现拼图分割功能

一般我们处理这种拼图游戏都会有如下方案： 用canvas分割图片 采用n张不同的切好的切片图片（方法简单，但是会造成多次请求） * 动态背景分割

经过权衡，笔者想出了第三种方法，也是自认为比较优雅的方法，即动态背景分割，我们只需要使用1张图片，然后利于css的方式切割图片，有点经典的雪碧图的感觉，如下：

本质就是我们设置九个div，每个div都使用同一张图片，并且图片大小等于游戏画布大小，但是我们通过backgroundPosition（背景定位）的方式来实现切割图片。这样做的另一个好处是方便我们实现洗牌逻辑。

3. 实现洗牌算法

洗牌逻辑依托于随机算法，这里我们结合坐标系，实现一个随机生成二维坐标系的逻辑，然后通过改变每个切片的translate位置，配合过渡动画，即可实现洗牌功能和洗牌动画。

3.1 数组乱序算法

数组乱序比较简单，代码如下：

// 数组乱序
function upsetArr(arr) {
    arr.sort(function(a,b){
        return Math.random() > 0.5 ? -1 : 1
    })
}

3.2 洗牌逻辑

洗牌逻辑基于数组乱序，具体逻辑如下：

// 洗牌方法
function shuffle(els, arr) {
    upsetArr(arr);
    for(var i=0, len=els.length; i< len; i++) {
        var el = els[i];
        el.setAttribute('index', i);  // 将打乱后的数组索引缓存到元素中
        el.style.transform = 'translate(' + arr[i].x + 'vw,' + arr[i].y + 'vh'+ ')';
    }
}

3.3 生成n纬矩阵坐标

n维矩阵主要用来做洗牌和计算成功率的，具体实现如下：

// 生成n维矩阵坐标
function generateMatrix(n, dx, dy) {
    var arr = [], index = 0;
    for(var i = 0; i< n; i++) {
        for(var j=0; j< n; j++) {
            arr.push({x: j*dx, y: i*dy, index: index});
            index++;
        }
    }
    return arr
}

3.4 置换算法

置换算法主要用来切换拼图的，比如用户想移动拼图，可以通过置换来实现：

// 数组置换
function swap(arr, indexA, indexB) {
    let cache = arr[indexA];
    arr[indexA] = arr[indexB];
    arr[indexB] = cache;
}

4. 实现生成战绩海报功能

生成战绩海报笔者采用canvas来实现，对于canvas的api不熟悉的可以查看MDN，讲的比较详细。这里笔者简单实现一个供大家参考：

function generateImg() {
    var canvas = document.createElement("canvas");

    if(canvas.getContext) {
        var winW = window.innerWidth,
            winH = window.innerHeight,
        ctx = canvas.getContext('2d');
        canvas.width = winW;
        canvas.height = winH;

        // 绘制背景
        // ctx.fillStyle = '#06c';
        var linear = ctx.createLinearGradient(0, 0, 0, winH);
        linear.addColorStop(0, '#a1c4fd');
        linear.addColorStop(1, '#c2e9fb');
        ctx.fillStyle = linear;
        ctx.fillRect(0, 0, winW, winH);
        ctx.fill();

        // 绘制顶部图像
        var imgH = 0;
        img = new Image();
        img.src = imgSrc;
        img.onload = function(){
            // 绘制的图片宽为.7winW, 根据等比换算绘制的图片高度为 .7winW*imgH/imgW
            imgH = .6*winW*this.height/this.width;
            ctx.drawImage(img, .2*winW, .1*winH, .6*winW, imgH);

            drawText();
            drawTip();
            drawCode();
        }

        // 绘制文字
        function drawText() {
            ctx.save();
            ctx.fillStyle = '#fff';
            ctx.font = 20 + 'px Helvetica';
            ctx.textBaseline = 'hanging';
            ctx.textAlign = 'center';
            ctx.fillText('我只用了' + (180 -dealtime) + 's,' + '快来挑战！', winW/2, .15*winH + imgH);
            ctx.restore();
        }

        // 绘制提示文字
        function drawTip() {
            ctx.save();
            ctx.fillStyle = '#000';
            ctx.font = 14 + 'px Helvetica';
            ctx.textBaseline = 'hanging';
            ctx.textAlign = 'center';
            ctx.fillText('关注下方二维码开始游戏', winW/2, .25*winH + imgH);
            ctx.restore();
        }


        // 绘制二维码
        function drawCode() {
            var imgCode = new Image();
            imgCode.src = '/piecePlay/images/logo.png';
            imgCode.onload = function(){
                ctx.drawImage(imgCode, .35*winW, .3*winH + imgH, .3*winW, .3*winW);

                // 生成预览图
                var img = new Image();
                img.src= convertCanvasToImage(canvas, 1).src;
                img.className = 'previewImg';
                img.onload = function(){
                    $('.preview-page')[0].appendChild(this);
                    startDx = startDx - 100;
                    transformX(wrap, startDx + 'vw');
                }
            }
        }  
    } else {
        alert('浏览器不支持canvas！')
    }
}

H5拼图小游戏我已在github开源， 感兴趣的可以在我github上学习参考。以上的逻辑部分的代码可以直接整合到vue项目中即可，由于实现比较简单，这里我就不详细介绍了。

更多前端实战项目推荐

• H5-dooring H5页面制作工具
• mitu 在线图片编辑器

最后

如果想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。