模仿开发H5游戏，看你有多色

Posted 2020-08-05

开发记录

前言

之前跟着慕课网学习开发H5小游戏开心鱼，勾起我的兴趣。
在写代码的过程中，不怎么会遇到问题。虽然代码是亲手敲出来的，但是由于并没有对游戏的整体思路，所以并不知道开发与优化的过程。
为了巩固知识，和了解优化的过程。我用了半天时间写出《看你有多色》游戏，（在网上找了一张游戏截图，之后自己写）
由于是第一次自己构思、自己动手的游戏，所以还有很多地方有待完善。

基本界面的实现的过程

就像切图一样，在我找到截图的时候，先利用html搭出框架，再用CSS填充样式。
随后是加入JS去实现不同的逻辑与活动。

HTML

我把控制输出信息（得分、倒计时、按钮）与画板（Canvas）分开，这样方便用JS控制。

<div class="message">
    <div class="score" id="score">
        Score:0
    </div>
    <div class="timer">
        <strong id="timer">
            &nbsp;60&nbsp;
        </strong>
    </div>
    <div class="stop">
        <button>暂停</button>
    </div>
</div>
        
<div class="colorGame">
    <canvas id="canvas" width="500" height="500"></canvas>
</div>

CSS

CSS的实现没什么难度，只是在写的时候发现一个问题：
如果我想把倒计时写成div，并且用display:inline-block;控制其显示为有长宽的矩形时，文字好像脱离了div。原因暂时还没想到，目前的解决方式是改变显示方式。

*{padding: 0;margin: 0;}
.gameView{margin: 0 auto;width: 500px;height: 100px;position: relative;}
.message{margin: 0 auto;width: 500px;height: 100px;background: #D1FFA2;
    margin-top: 20px;}
.score,.timer,.stop{width: 160px;height: 100px;display: inline-block;
    text-align: center;font: 32px/100px "Tahoma";margin-right: -8px;}
.score{background: #00CF95;}
.timer{width: 180px;background: #0098EF;}
.timer strong{color: #fff;margin: 0px auto;background: red;border-radius: 10px;
    font-weight: normal;}
.stop{background: #6D0AD3;}
.stop button{display: inline-block;height: 50px;width: 70px;border: none;
    border-radius: 10px;background: red;color: #fff;
    font: 24px/50px "微软雅黑";box-shadow: 5px 3px #ccc;}

.colorGame{margin: 0 auto;width: 500px;height: 500px;background: #D1FFA2;}

JS

JS的实现比较复杂，我的思路是先通过Canvas画出游戏刚开始的界面。
这里用到了Canvas绘图的函数。我封装了一个绘制圆角矩形的函数，drawRoundRect()，参数依次是绘图环境名称、圆角矩形的X\Y坐标、圆角矩形的半径、填充色。

function drawRoundRect(cxt,x,y,r,radius,fillColor){
    cxt.save();
    cxt.translate(x,y);
    
    cxt.beginPath();
    cxt.arc(r-radius,r-radius,radius,0,Math.PI/2);
    cxt.lineTo(radius,r);
    cxt.arc(radius,r-radius,radius,Math.PI/2,Math.PI);
    cxt.lineTo(0,radius);
    cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);
    cxt.lineTo(r-radius,0);
    cxt.arc(r-radius,radius,radius,Math.PI*3/2,Math.PI*2);
    cxt.lineTo(r,r-radius);
    cxt.closePath();
    
    cxt.fillStyle = fillColor?fillColor:"black";
    cxt.fill();
    cxt.restore();
}

然后绘制游戏界面，drawGame()。
由于不同等级下的界面并不相同，所以我需要提前设置变量：level[ ]（游戏等级分布）、
spacing[ ]（不同等级下的方块间距）、squareW[ ]（不同等级下的方块边长）。
又因为绘制时需要的参数是X\Y轴坐标，因为可以通过这三个变量算出来，所以我又封装了一个函数rectXY()，传入的参数是方块的位置值。

function rectXY(a){
    return (a+1)*spacing[levelNum]+a*squareW[levelNum];
}

function init(){
    /*MaxLevel : 136*/
    level = [
        2,2,
        3,3,3,
        4,4,4,4,
        5,5,5,5,5,5,5,5,5,5,
        6,6,6,6,6,6,6,6,6,6,6,6,
        7,7,7,7,7,7,7,7,7,7,7,7,7,7,
        8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,
        9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,
        10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,
        10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10];
    for (var i = 0; i < level.length; i++) {
        spacing[i] = level[i]*(-2)+24;
    }
    for (var i = 0; i < level.length; i++) {
        squareW[i] = Math.floor((w-(level[i]+1)*(level[i]*(-2)+24))/level[i]);
    }   
}

function drawGame(levelNum){
    //画背景
    drawRoundRect(context,0,0,500,8,"#D1FFA2");
    //画方块
    for (var i = 0; i < level[levelNum]; i++){
        for (var j = 0; j < level[levelNum]; j++){
            drawRoundRect(context,rectXY(i),rectXY(j),squareW[levelNum],6,formerColor);
        }
    }
    drawRoundRect(context,rectXY(differentX),rectXY(differentY),squareW[levelNum],6,differentColor);
    canvas.addEventListener(‘click‘,detect);
}

这样基本的界面就已经画好了。

交互逻辑的实现

这个游戏的交互活动很简单，仅仅是需要添加点击的监听事件。
难点在于，Canvas是DOM对象，监听时获取到的结果是对整个Canvas的点击效果（Canvas内部的图样是没有办法独立的被监听）。
解决的逻辑是：先获取鼠标的坐标值，然后用isPointInPath()判断当前坐标是否在当前绘制路径内部。

• canvas对象有一个方法getBoundClientRect()，返回的是canvas元素的边界框对象， 此对象的left与top属性即为canvas左上角点相对窗口的坐标，将事件坐标与canvas坐标相减，得到相对于canvas的坐标。

var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;

• 获取后再进行判断是否在图形内。

if(context.isPointInPath(x,y)){}

• 由于绘制差异方块时还需要注意颜色相近，所以我设置了一个数组，用于计算RGB模式下的颜色差值，差值越来越小是因为关卡难度上升导致颜色更加相近。

badNum = [38,28,18,12,10,8,6,4,3,2];

具体的实现方法，包含之前的监听与判断，还有随机色与之相近色的获取和统计分数并更新。

function scoreNum(){
    var scoreObj = document.getElementById("score");
    score++;
    scoreObj.innerHTML = "Score:"+score;
}

 function detect(event){
    var x = event.clientX - canvas.getBoundingClientRect().left;
    var y = event.clientY - canvas.getBoundingClientRect().top;

    drawRoundRect(context,rectXY(differentX),rectXY(differentY),squareW[levelNum],6,differentColor);

    if(context.isPointInPath(x,y)){
        levelNum++;
        differentX = Math.floor(Math.random()*level[levelNum]);
        differentY = Math.floor(Math.random()*level[levelNum]);
        R = Math.floor(Math.random()*255);
        G = Math.floor(Math.random()*255);
        B = Math.floor(Math.random()*255);
        formerColor = "rgb("+R+","+G+","+B+")";
        nR = R+badNum[0];
        nG = G+badNum[0];
        nB = B+badNum[0];
        differentColor = "rgb("+nR+","+nG+","+nB+")";
        context.clearRect(0,0,500,500);
        drawGame(levelNum);
        scoreNum();
    }
}

汇总

• 总的来说这个游戏并不复杂，稍微有一些不一样的地方就是对Canvas添加监听事件时，与对DOM添加事件相比更麻烦一点。

• 暂时来说没有卡住的地方，但是存在一个很大的问题：这个程序并没有体现面向对象的思想，二次浏览的时候会感到逻辑混乱。

• 还有一些小功能并没有添加进去：
  1.没有暂停功能。
  2.没有GameOver后的提示功能。