游戏很简单，10行10列布局，每行每列各10盏灯，游戏初始化时随机点亮其中一些灯，点击某盏灯，其上下左右的灯及本身状态反转，如果点击前是灭着的，点击后即点亮，将所有灯全部点亮才算过关。游戏试玩：
下面说说大概思路:
<p class="my_title">生成画布
创建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则灯熄灭，否则点亮。为了便于游戏扩展和维护，游戏中灯的半径、所有灯的坐标、颜色、数量、是否点亮等数据用变量存起来。
不支持canvas！
随机生成100盏灯的状态
添加点击事件
众所周知，canvas是一个整体，如何给其中某一盏灯添加点击事件？事实上，可以给整个canvas对象添加点击事件，将event对象下的event.layerX,event.layerY传入isPointInPath(x,y)方法判断点击的坐标event.layerX, event.layerY是否在灯上从而触发回调函数。
示例：
需要注意的是：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;">this</span>.ctx.fillStyle = <span style="color: #0000ff;">this</span>.gameData[i][j] ? <span style="color: #0000ff;">this</span>.onColor : <span style="color: #0000ff;">this</span><span style="color: #000000;">.offColor;
</span><span style="color: #0000ff;">this</span>.ctx.arc( i*<span style="color: #0000ff;">this</span>.margin+(<span style="color: #800080;">2</span>*i+<span style="color: #800080;">1</span>)*<span style="color: #0000ff;">this</span>.r,j*<span style="color: #0000ff;">this</span>.margin+(<span style="color: #800080;">2</span>*j+<span style="color: #800080;">1</span>)*<span style="color: #0000ff;">this</span>.r,<span style="color: #0000ff;">this</span>.r,<span style="color: #800080;">2</span>*<span style="color: #000000;">Math.PI );
</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.ctx.fill();
</span><span style="color: #0000ff;">if</span>( p && <span style="color: #0000ff;">this</span>.ctx.isPointInPath(p.layerX-<span style="color: #0000ff;">this</span>.padding,p.layerY-<span style="color: #0000ff;">this</span><span style="color: #000000;">.padding) ){
</span><span style="color: #0000ff;">this</span>.gameData[i][j] = !<span style="color: #0000ff;">this</span><span style="color: #000000;">.gameData[i][j];
i </span>> <span style="color: #800080;">0</span> && (<span style="color: #0000ff;">this</span>.gameData[i-<span style="color: #800080;">1</span>][j] = !<span style="color: #0000ff;">this</span>.gameData[i-<span style="color: #800080;">1</span><span style="color: #000000;">][j]);
i </span>< <span style="color: #800080;">9</span> && (<span style="color: #0000ff;">this</span>.gameData[i+<span style="color: #800080;">1</span>][j] = !<span style="color: #0000ff;">this</span>.gameData[i+<span style="color: #800080;">1</span><span style="color: #000000;">][j]);
j </span>> <span style="color: #800080;">0</span> && (<span style="color: #0000ff;">this</span>.gameData[i][j-<span style="color: #800080;">1</span>] = !<span style="color: #0000ff;">this</span>.gameData[i][j-<span style="color: #800080;">1</span><span style="color: #000000;">]);
j </span>< <span style="color: #800080;">9</span> && (<span style="color: #0000ff;">this</span>.gameData[i][j+<span style="color: #800080;">1</span>] = !<span style="color: #0000ff;">this</span>.gameData[i][j+<span style="color: #800080;">1</span><span style="color: #000000;">]);
}
</span><span style="color: #0000ff;">this</span>.gameData[i][j] && <span style="color: #0000ff;">this</span>.count++<span style="color: #000000;">;
}
}
</span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">this</span>.count === <span style="color: #800080;">100</span><span style="color: #000000;"> ){
alert(</span><span style="color: #800000;">"</span><span style="color: #800000;">成功了</span><span style="color: #800000;">"</span><span style="color: #000000;">)
}
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span><span style="color: #000000;">;
},createMap: function(){
</span><span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> i = <span style="color: #800080;">0</span>; i < <span style="color: #0000ff;">this</span>.row; i++<span style="color: #000000;">) {
</span><span style="color: #0000ff;">this</span>.gameData[i] =<span style="color: #000000;"> [];
</span><span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> j = <span style="color: #800080;">0</span>; j < <span style="color: #0000ff;">this</span>.col; j++<span style="color: #000000;">) {
</span><span style="color: #0000ff;">this</span>.gameData[i].push( Math.random() > <span style="color: #800080;">0.5</span> ? <span style="color: #0000ff;">false</span> : <span style="color: #0000ff;">true</span><span style="color: #000000;"> );
}
}
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span><span style="color: #000000;">;
}
}
lightOff.init();</span></pre>
出处：
本文版权归作者和博客园所有，欢迎转载，转载请标明出处。
如果您觉得本篇博文对您有所收获，请点击右下角的 [推荐]，谢谢！
