canvas入门级小游戏《开关灯》思路讲解

游戏很简单，10行10列布局，每行每列各10盏灯，游戏初始化时随机点亮其中一些灯，点击某盏灯，其上下左右的灯及本身状态反转，如果点击前是灭着的，点击后即点亮，将所有灯全部点亮才算过关。游戏试玩：

下面说说大概思路: 生成画布 创建canvas画布，先是生成10*10阵列的100盏灯，每盏灯之间的间隔为margin = 5px，第一盏灯圆心坐标为它的半径"R,R"，第一行第二盏灯坐标为3R+margin，以此类推得出灯坐标计算公式：第一行第i盏灯横坐标(2*i + 1)*R + i*margin，同理第一列第j行纵坐标为(2*j + 1)*R + j*margin 为其中灯开关的状态是随机的，很自然的想到利用随机数Math.random()去和0.5比较大小，随机数大于0.5则灯熄灭，否则点亮。为了便于游戏扩展和维护，游戏中灯的半径、所有灯的坐标、颜色、数量、是否点亮等数据用变量存起来。 <div class="cnblogs_code"> <pre><canvas id="canvas" width="445" height="445"> 您的浏览器不支持canvas！ </canvas> <script> var lightOff = { gameData : [],// 灯开关状态 r : 20,// 灯半径 margin: 5,// 灯间距 padding: 20,// canvas内边距 onColor: "#0077AA",// 灯亮的颜色 offColor: "#E0E0E0",// 灯灭的颜色 row : 10,// 10行 col : 10,// 10列 canvas : document.getElementById("canvas"),ctx : this.canvas.getContext("2d"),reDraw: function(p){ for (var i = 0; i < this.row; i++) { for (var j = 0; j < this.col; j++) { this.ctx.beginPath(); this.ctx.fillStyle = this.gameData[i][j] ? this.onColor : this.offColor; this.ctx.arc( i*this.margin+(2*i+1)*this.r,j*this.margin+(2*j+1)*this.r,this.r,0,2*Math.PI ); this.ctx.fill(); } } return this; },// 随机生成100盏灯的状态 createMap: function(){ for (var i = 0; i < this.row; i++) { this.gameData[i] = []; for (var j = 0; j < this.col; j++) { this.gameData[i].push( Math.random() > 0.5 ? false : true ); } } return this; } } </script></pre> </div> 添加点击事件 众所周知，canvas是一个整体，如何给其中某一盏灯添加点击事件？事实上，可以给整个canvas对象添加点击事件，将event对象下的event.layerX,event.layerY传入isPointInPath(x,y)方法判断点击的坐标event.layerX, event.layerY是否在灯上从而触发回调函数。 示例： <iframe style="width: 100%; height: 300px;" src="http://sandbox.runjs.cn/show/ucd29fae" frameborder="0" width="320" height="140">

需要注意的是：isPointInPath(x,y)方法只能判断坐标x,y是否在最近的上下文所绘制的图形内，如果canvas一次性绘制了100盏灯，isPointInPath(x,y)只能判断x,y是否在第100盏灯内，要想判断x,y是否在所点击的某盏灯内，就应该在每次点击的时候重绘这100盏灯（调用reDraw方法），每绘制一盏灯触发一次isPointInPath(x,y)方法，如果在灯上，将gameData对应灯的数据状态反转。如当前绘制第i行第j盏灯，调用isPointInPath(x,y)返回true，则反转该灯状态game[i][j] = !game[i][j]之后再次调用reDraw方法重绘。每次点击需要重绘两次。

综上所述，代码修改为：

lightOff =.canvas.getContext( This = .canvas.addEventListener( .count = .ctx.clearRect(,,.canvas.width, ( i = ; i < .row; i++ ( j = ; j < .col; j++

                </span><span style="color: #0000ff;"&gt;this</span>.ctx.fillStyle = <span style="color: #0000ff;"&gt;this</span>.gameData[i][j] ? <span style="color: #0000ff;"&gt;this</span>.onColor : <span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;.offColor;
                </span><span style="color: #0000ff;"&gt;this</span>.ctx.arc( i*<span style="color: #0000ff;"&gt;this</span>.margin+(<span style="color: #800080;"&gt;2</span>*i+<span style="color: #800080;"&gt;1</span>)*<span style="color: #0000ff;"&gt;this</span>.r,j*<span style="color: #0000ff;"&gt;this</span>.margin+(<span style="color: #800080;"&gt;2</span>*j+<span style="color: #800080;"&gt;1</span>)*<span style="color: #0000ff;"&gt;this</span>.r,<span style="color: #0000ff;"&gt;this</span>.r,<span style="color: #800080;"&gt;2</span>*<span style="color: #000000;"&gt;Math.PI );                    
                </span><span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;.ctx.fill();
                </span><span style="color: #0000ff;"&gt;if</span>( p &amp;&amp; <span style="color: #0000ff;"&gt;this</span>.ctx.isPointInPath(p.layerX-<span style="color: #0000ff;"&gt;this</span>.padding,p.layerY-<span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;.padding) ){
                    </span><span style="color: #0000ff;"&gt;this</span>.gameData[i][j] = !<span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;.gameData[i][j];
                    i </span>> <span style="color: #800080;"&gt;0</span> &amp;&amp; (<span style="color: #0000ff;"&gt;this</span>.gameData[i-<span style="color: #800080;"&gt;1</span>][j] = !<span style="color: #0000ff;"&gt;this</span>.gameData[i-<span style="color: #800080;"&gt;1</span><span style="color: #000000;"&gt;][j]);
                    i </span>< <span style="color: #800080;"&gt;9</span> &amp;&amp; (<span style="color: #0000ff;"&gt;this</span>.gameData[i+<span style="color: #800080;"&gt;1</span>][j] = !<span style="color: #0000ff;"&gt;this</span>.gameData[i+<span style="color: #800080;"&gt;1</span><span style="color: #000000;"&gt;][j]);
                    j </span>> <span style="color: #800080;"&gt;0</span> &amp;&amp; (<span style="color: #0000ff;"&gt;this</span>.gameData[i][j-<span style="color: #800080;"&gt;1</span>] = !<span style="color: #0000ff;"&gt;this</span>.gameData[i][j-<span style="color: #800080;"&gt;1</span><span style="color: #000000;"&gt;]);
                    j </span>< <span style="color: #800080;"&gt;9</span> &amp;&amp; (<span style="color: #0000ff;"&gt;this</span>.gameData[i][j+<span style="color: #800080;"&gt;1</span>] = !<span style="color: #0000ff;"&gt;this</span>.gameData[i][j+<span style="color: #800080;"&gt;1</span><span style="color: #000000;"&gt;]);
                }
                </span><span style="color: #0000ff;"&gt;this</span>.gameData[i][j] &amp;&amp; <span style="color: #0000ff;"&gt;this</span>.count++<span style="color: #000000;"&gt;;
            }
        }

        </span><span style="color: #0000ff;"&gt;if</span>(<span style="color: #0000ff;"&gt;this</span>.count === <span style="color: #800080;"&gt;100</span><span style="color: #000000;"&gt; ){
            alert(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;成功了</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;)
        }

        </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;;
    },createMap: function(){
        </span><span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;var</span> i = <span style="color: #800080;"&gt;0</span>; i < <span style="color: #0000ff;"&gt;this</span>.row; i++<span style="color: #000000;"&gt;) {
            </span><span style="color: #0000ff;"&gt;this</span>.gameData[i] =<span style="color: #000000;"&gt; [];
            </span><span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;var</span> j = <span style="color: #800080;"&gt;0</span>; j < <span style="color: #0000ff;"&gt;this</span>.col; j++<span style="color: #000000;"&gt;) {
                </span><span style="color: #0000ff;"&gt;this</span>.gameData[i].push( Math.random() > <span style="color: #800080;"&gt;0.5</span> ? <span style="color: #0000ff;"&gt;false</span> : <span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt; );
            }
        }
        </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;;
    }
}

lightOff.init();</span></pre>

出处：
本文版权归作者和博客园所有，欢迎转载，转载请标明出处。
如果您觉得本篇博文对您有所收获，请点击右下角的 [推荐]，谢谢！

canvas入门级小游戏《开关灯》思路讲解

相关推荐