HTML5 Canvas制作数独游戏（三）

上篇已经实现了点选后给予显示，本篇就开始讲解如何往数独中填入数字。这里使用的是在数独右边区域展示1-9数字，选择数字后自动填入。
那这1-9数字也得画出来，那就需要第3块画布了。添加标签如下（当然这里的边框是不需要的，等画完这块区域后可以去掉）。

<div id="divC"><canvas id="canC" width="60" height="540" style="border: 2px green solid;"></canvas></div>

并将展示的1-9数字区域，固定在数独右侧。css样式如下。

#divC {position:absolute;left : 50%;margin:0 300px;
}

准备好后，就可以开始绘制了。先获取一个存储了数字1-9的数组。

function getAllNumArr(min, max){//获取1-9数字数组let arrA = [];for(let i = min, j = 0; i <= max; i++,j++){arrA[j] = i;//1-9顺序数组}return arrA;
}

然后竖向按顺序绘制1-9数字，并将底色设置成斑马线，好区分每个格子。

function drawAllNum(pen, w, h){//竖向绘制1-9数字pen.font = "30px 微软雅黑";pen.textAlign = "center";let arrA = getAllNumArr(1, 9);for(let i = 0; i < arrA.length; i++){if(i%2 == 0){pen.fillStyle = "rgba(0, 0, 255, 0.1)";} else {pen.fillStyle = "rgba(255, 255, 0, 0.1)";}pen.fillRect(0, h/9*i, w, h/9);pen.fillStyle = "blueviolet";pen.fillText(arrA[i]+"", w/2, h/9*i+h/9/3*2);}
}

调用函数，完成绘制。

let penC = canC.getContext('2d');
drawAllNum(penC, w/9, h);

运行代码，效果如下。

此时已经显示好了待输入的数字，但每次点击在不可编辑块时，这些数字也在，可能误导玩家。可以控制下，只有选择的是可编辑区才显示画布C，否则就不显示。
这就需要在画布B的点击事件中添加代码（省略代码是之前写过的）。

//点击选中方块==>操作画布B
let penB = canB.getContext('2d');
let lastXY = [];//记录上次点击的方块
let penC = canC.getContext('2d');
let myFlag = false;//C区有没有图。true有图，false无图
canB.onclick = function (e) {//清除上次绘制的方块...//绘制本次选中的块...//绘制或清除C区if(arr[blockj][blocki] == 0 && !myFlag){//选中框能修改时，C区绘制1-9数字drawAllNum(penC, w/9, h);myFlag = true;} else if(arr[blockj][blocki] != 0){//清理C区penC.clearRect(0, 0, w/9, h);myFlag = false;}
}

运行效果如下。

现在就可以开始实现将数字填入格子中了。数字填入后可以要能修改的，并且清除数字填入新数字时，选择底色块不能受影响。那就用到了第4块画布，当然同第1/2块一样重叠起来。
先添加标签，变更如下（这里需要注意的是，画布B有关联的点击事件，所以标签需要放在画布A和画布D的下面。画布C区域不受影响，放哪都可以）。

<div id="div1"><div id="divA"><canvas id="canA" width="540" height="540"></canvas></div><div id="divD"><canvas id="canD" width="540" height="540"></canvas></div><div id="divB"><canvas id="canB" width="540" height="540"></canvas></div><div id="divC"><canvas id="canC" width="60" height="540"></canvas></div></div>

画布D的CSS样式，与第1/2块画布一样。

#divA,#divB,#divD {...
}

最后添加代码实现点击画布D的数字填入选择的格子中。

//点击选中右侧数字方块==>点击画布C，操作画布D
let penD = canD.getContext('2d');
canC.onclick = function (e) {if(lastXY.length != 0){//需要选中方块let myi = lastXY[1];let myj = lastXY[0];if(arr[myi][myj] == 0){//数组该值等于0才能填入新值//绘制本次选中的块var e = event || window.event;let blocki = Math.floor(e.offsetX/(w/9));let blockj = Math.floor(e.offsetY/(h/9));penD.clearRect(w/9*lastXY[0], h/9*lastXY[1], w/9, h/9);penD.font = "30px 微软雅黑";penD.textAlign = "center";penD.fillStyle = "blueviolet";penD.fillText(blockj+1+"", w/9*myj+w/9/2, h/9*myi+h/9/3*2);}}
}

完成后，运行效果如下。

到这里，其实就相当于可以开始玩数独了，但每次数独变化需要手动改代码中的数组，那这里就需要能自动生成一个数独了。
下一篇就讲一个最简单的算法。有兴趣或者有想法的也可以自己完成这个数独生成的算法。

HTML5 Canvas制作数独游戏（三）相关推荐

HTML5 Canvas制作数独游戏（一）
初次接触Canvas,想做一个数独游戏,查找资料后开始着手实现.途中也遇到几个难点,也都克服了,实现了一个简单的版本,就想把过程写下来.水平有限,代码可能也有不完善的地方. 好了,废话不多说,现在开始 ...
[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例要在HTML5画布上绘制 ...
html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作数字时钟样式.html5 canvas数字时钟代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
HTML5+canvas激流勇进网页游戏源码
介绍: HTML5+canvas激流勇进网页游戏,游戏玩法:使用左键.右键和上箭头键移动. 网盘下载地址: http://kekewangLuo.cc/qn9O6AvpNW10 图片:
html5怎么做出旋转效果,HTML5+Canvas制作的幻彩旋转圆盘特效
HTML5+Canvas制作的幻彩旋转圆盘特效 body { background: #000; color: #aaa; font: 100%/20px helvetica; } canvas { ...
使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { background: ...
怎样用HTML5 Canvas制作一个简单的游戏
为了让大家清楚HTML5制作游戏的简单流程,所以先了制作一个非常简单的游戏,来看一看这个过程. 游戏非常简单,无非就是英雄抓住怪物就得分,然后游戏重新开始,怪物出现在地图的随机位置,英雄初始化在地 ...

HTML5 Canvas制作数独游戏（三）

HTML5 Canvas制作数独游戏（三）相关推荐

最新文章

热门文章