HTML5 游戏开发 ｜ 单色
黑白棋，又叫反棋(Reversi)、奥赛罗棋(Othello)、苹果棋、翻转棋。黑白棋在西方和日本很流行。游戏通过相互翻转对方的棋子，最后以棋盘上谁的棋子多来判断胜负。黑白棋的棋盘是一个有8×8方格的棋盘。开始时在棋盘正中有两白两黑四个棋子交叉放置，黑棋总是先下子。
(1) 下子规则。
把自己颜色的棋子放在棋盘的空格上，而当自己放下的棋子在横、竖、斜8个方向内有一个自己的棋子，则被夹在中间的全部翻转成为自己的棋子。并且只有在可以翻转棋子的地方才可以下子。如果玩家在棋盘上没有地方可以下子，则该玩家对手可以连下。
(2) 胜负判定条件。
双方都没有棋子可以下时棋局结束，以棋子数目来计算胜负，棋子多的一方获胜。
在棋盘还没有下满时，如果一方的棋子已经被对方吃光，则棋局也结束。将对手棋子吃光的一方获胜。
本文开发黑白棋游戏程序，黑白棋游戏的运行界面如图上图所示。该游戏具有显示执棋方可以落棋子的位置提示功能和判断胜负功能。在游戏过程中，单击“帮助”按钮则显示执棋方可落子位置(
图片表示可落子位置，如图1所示)。
■ 图1 表示执棋方(黑方)可落子位置
# 01、黑白棋游戏设计的思路
棋子和棋盘
游戏开发时，需要事先准备黑白两色棋子和棋盘图片(如图2所示)。游戏最初显示时，棋盘上画上4个棋子。这里为了便于处理，采用一个qizi二维数组用来存储棋盘上的棋子。
■ 图2 黑白两色棋子和棋盘
翻转对方的棋子
需要从自己落子(x1，y1)为中心的横、竖、斜8个方向上判断是否需要翻转对方的棋子，程序中由鼠标的mousedown事件实现。在mousedown事件中参数event对象含有单击位置像素坐标(event．pageX，event．pageY)，处理后变成Canvas对象内像素坐标(x，y)。再由如下公式换算：
x1 = Math.round((x- 40) / 80);//Math.round 四舍五入y1 = Math.round((x- 40) / 80);
经过换算转换为棋盘坐标(x1，y1)。
最后从左、左上、上、右上、右、右下、下、左下8个方向上调用过程DirectReverse(x1，y1，dx，dy)翻转对方的棋子。而具体棋子的翻转由FanQi(x，y)实现。FanQi(x，y)修改数组qizi的(x，y)保存棋盘上的棋子信息。
function FanQi(x，y)
if(qizi[x][y]== BLACK)qizi[x][y]= WHITE;
else
qizi[x][y]= BLACK,
显示执棋方可落子位置
Can_go(x1，y1)从左、左上、上、右上、右、右下、下、左下8个方向上调用函数CheckDirect(x1，y1，dx，dy)判断某方向上是否形成夹击之势，如果形成且中间无空子则返回True，表示(x1，y1)可以落子，(x1，y1)处可以落子则用图片图片显示。
判断胜负的功能
qizi［］［］二维数组保存棋盘上的棋子信息，其中元素保存1，表示此处为黑子；元素保存2，表示此处为白子；元素保存0，表示此处为无棋子。通过对qizi数组中各方棋子数的统计，在棋盘无处可下时，根据各方棋子数判断出输赢。
02、关键技术
Canvas对象支持的JavaScript的鼠标事件
Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标单击(Mouse Click)、鼠标按下(Mouse Down)、鼠标抬起(Mouse Up)和鼠标移动(Mouse Move)。对Canvas添加鼠标事件方式有两种，一种方式如下：
//鼠标事件 mouse event
canvas.addEventListener( "mousedown",doMouseDown,false);canvas.addEventListener( 'mousemove'，doMouseMove,false);canvas.addEventListener('mouseup'，doMouseUp，false);
另外一种方式在JavaScript中被称为反模式。
canvas.onmousedown = function(e)canvas.onmouseup = function(e)canvas.onmousemove = function(e)
获取鼠标在Canvas对象上的坐标
由于Canvas上鼠标事件中不能直接获取鼠标在Canvas的坐标，所获取的都是基于整个屏幕的坐标。所以通过鼠标事件e．clientX与e．clientY来获取鼠标位置，然后通过Canvas．getBoundingClientRect()方法来获取Canvas对象相对浏览器窗口的位置(方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示Canvas对象各边与页面上边和左边的距离)，通过计算得到鼠标在Canvas中的坐标。
事件坐标转换成Canvas坐标代码如下：
function getPointOnCanvas(canvas，x，y)var bbox = canvas.getBoundingClientRect()return(x: x - bbox.left,
y:y - bbox.top);
如果同时考虑CSS设置width和height的情况，则代码如下。
function getPointOnCanvas(canvas，x，y)
var bbox = canvas.getBoundingClientRect();
return(x: x- bbox.left *(canvas.width / bbox.width)y:y- bbox.top *(canvas.height/bbox.height)
03、黑白棋游戏设计的步骤
游戏页面index.html
<html >
< head >
< title>黑白棋</title>
<meta http - equiv= content - type content = "text/html; charset = utf - 8">< meta name="Generator" content ="EditPlus">
<meta name ="Author" content = "
n<meta name ="Keywords” content =
<meta name ="Description" content = "</head >
<body onload="init()”onkeydown ="DoKeyDown(event)"><canvas id="myCanvas”width="720”height ="720"你的浏览器还不支持</canvas>< img id= "whitestone"src = "img/whitestone.png"style= "display:none;">< img id= "blackstone"src = "img/blackstone.ng" style= "display:none;">< img id="gi pan1"src = "img/qi panl.jpg"style= "display:none;"><img id="Info2"src ="img/Info2.ng”style = "display:none;">
<div id= "message txt" style= "text - align:center;border:lpx solid red; width:720px;height20px;font- size:20px;"></div>
< input type ="button”value="走棋提示”onclick ="DoHelp()">< script type ="text/javascript"src ="Main.js"></script></body>
</html>
设计脚本(Main．js)
1． 常量定义
游戏中常量定义，其中BLACK黑棋为1，WHITE白棋为2，无棋为0。
//常量
var BLACK = 1;
var WHITE = 2;
var KONG = 0;
var w= 80;
var h= 80:
以下获取Canvas对象，以及用到的棋子和棋盘图片、提示图片。
//构造一个 gizi[][]二维数组用来存储棋子//当前走棋方var mycanvas = document.getElementById('myCanvas');var context = mycanvas.getContext(2d'):
var gizi=new Array();
var curQizi= BLACK;
var whitestone= document.getElementById("whitestone");var blackstone = document.getElementById("blackstone");var qipan = document.getElementById("qi pan1");var info = document.getElementById("Info2");var message txt = document.getElementById("message txt");
//白棋图片//黑棋图片//棋盘//提示图形//提醒文字
2． 初始化游戏界面
游戏开始时，调用init()函数对保存棋盘上的棋子信息的qizi数组初始化，同时在棋盘上显示初始的4个棋子。
function init()f
initLevel();
showMoveInfo();
//棋盘上初始 4个棋子
//当前走棋方信息
mycanvas.addEventListener( "mousedown,doMouseDown,false);
function initLevel()var i,j;for(i=0;i<8;i++){
qizi[i]= new Array();for(j=0;j<8;j++)qizi[i][j]= KONG;
//棋盘上初始 4 个棋子
//1 为黑,2为白,0为无棋子qizi[3][3]= WHITE;qizi[4][ 4]= WHITEqizi[3][4] = BLACKqizi[4][3]= BLACK;DrawMap();
//初始化界面
//画棋盘和所有棋子
message txt.innerHTML="该黑棋走子”
//画棋盘和所有棋子
function DrawMap()
context.clearRect (0，0,720，720);context.drawImage(qipan,0,0,qipan.width,gipan.height);for(i= 0;i<gizi.length;i++)
//行号
//列号for(j= 0;j< gizi[i].length;j++)
var pic;
switch(qizi[i][j])
case KONG:
break;
case BLACK:
//0
//1
pic =blackstone:context.drawImage(pic，w * j，h *,pic.width,pic.height);break;
//2
case WHITE:
pic = whitestone;context.drawImage(pic，w * j，h *i，pic.width,pic.height);break;
}
}
}
}
调用showMoveInfo()函数显示轮到哪方走棋。
function showMoveInfo(
// 当前走棋方是黑棋message_txt.innerHTML ="该黑棋走子”
if(curOizi== BLACK)
else
me 上一篇： c++game assembly 1