?黑白棋，又叫反棋(Reversi)、奧賽羅棋(Othello)、蘋果棋、翻轉棋。黑白棋在西方和日本很流行。游戲通過相互翻轉對方的棋子，最后以棋盤上誰的棋子多來判斷勝負。黑白棋的棋盤是一個有8×8方格的棋盤。開始時在棋盤正中有兩白兩黑四個棋子交叉放置，黑棋總是先下子。
(1) 下子規(guī)則。
把自己顏色的棋子放在棋盤的空格上，而當自己放下的棋子在橫、豎、斜8個方向內有一個自己的棋子，則被夾在中間的全部翻轉成為自己的棋子。并且只有在可以翻轉棋子的地方才可以下子。如果玩家在棋盤上沒有地方可以下子，則該玩家對手可以連下。
(2) 勝負判定條件。
雙方都沒有棋子可以下時棋局結束，以棋子數(shù)目來計算勝負，棋子多的一方獲勝。
在棋盤還沒有下滿時，如果一方的棋子已經被對方吃光，則棋局也結束。將對手棋子吃光的一方獲勝。
本文開發(fā)黑白棋游戲程序，黑白棋游戲的運行界面如圖上圖所示。該游戲具有顯示執(zhí)棋方可以落棋子的位置提示功能和判斷勝負功能。在游戲過程中，單擊“幫助”按鈕則顯示執(zhí)棋方可落子位置(?
表示可落子位置，如圖1所示)。
■ 圖1 表示執(zhí)棋方(黑方)可落子位置?
01、黑白棋游戲設計的思路
棋子和棋盤
游戲開發(fā)時，需要事先準備黑白兩色棋子和棋盤圖片(如圖2所示)。游戲最初顯示時，棋盤上畫上4個棋子。這里為了便于處理，采用一個qizi二維數(shù)組用來存儲棋盤上的棋子。
■ 圖2 黑白兩色棋子和棋盤
翻轉對方的棋子
需要從自己落子(x1，y1)為中心的橫、豎、斜8個方向上判斷是否需要翻轉對方的棋子，程序中由鼠標的mousedown事件實現(xiàn)。在mousedown事件中參數(shù)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)實現(xiàn)。FanQi(x，y)修改數(shù)組qizi的(x，y)保存棋盤上的棋子信息。
function FanQi(x，y)
if(qizi[x][y]== BLACK)qizi[x][y]= WHITE;
else
qizi[x][y]= BLACK,
顯示執(zhí)棋方可落子位置
Can_go(x1，y1)從左、左上、上、右上、右、右下、下、左下8個方向上調用函數(shù)CheckDirect(x1，y1，dx，dy)判斷某方向上是否形成夾擊之勢，如果形成且中間無空子則返回True，表示(x1，y1)可以落子，(x1，y1)處可以落子則用圖片圖片顯示。
判斷勝負的功能
qizi［］［］二維數(shù)組保存棋盤上的棋子信息，其中元素保存1，表示此處為黑子；元素保存2，表示此處為白子；元素保存0，表示此處為無棋子。通過對qizi數(shù)組中各方棋子數(shù)的統(tǒng)計，在棋盤無處可下時，根據各方棋子數(shù)判斷出輸贏。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-521685.html
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[][]二維數(shù)組用來存儲棋子//當前走棋方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()函數(shù)對保存棋盤上的棋子信息的qizi數(shù)組初始化，同時在棋盤上顯示初始的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()函數(shù)顯示輪到哪方走棋。
function showMoveInfo(
// 當前走棋方是黑棋message_txt.innerHTML ="該黑棋走子”
if(curOizi== BLACK)
else
message_txt.innerHTML="該白棋走子”
init()函數(shù)同時對canvas添加鼠標單擊事件偵聽，如果canvas被單擊則執(zhí)行doMouseDown函數(shù)完成走棋功能。
3． 走棋過程
如果是棋盤被單擊，則此位置像素信息(event．clientX，event．clientY)可以轉換成棋盤坐標(x1，y1)，然后判斷當前位置(x1，y1)是否可以放棋子(符合夾角之勢)，如果可以則此位置顯示自己的棋子圖形，調用FanALLQi(i，j)函數(shù)從左、左上、上、右上等8個方向翻轉對方的棋。最后判斷對方是否有棋可走，如果對方可以走棋則交換走棋方。如果對方不可以走棋，則自己可以繼續(xù)走棋，直到雙方都不能走棋，顯示輸贏信息。
function doMouseDown(event)
var x = event.clientX
var y = event.clientY:
var canvas = event.target;
var loc = getPointOnCanvas(canvas，x，y);console.log("mouse down at point( x:"+ loc.x+"，y:"+ loc.y+")");clickQi(loc);
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)};
function clickQi(thisQi){
var x1，yl;xl = parseInt((thisQi.y- 20)/ 80);yl= parseInt((thisQi.x- 20)/ 80);if(Can_go(x1，y1)){
//trace("can");qizi[x1][yl]= curQizi;//從左、左上、上、右上、右、右下、下、左下方向翻轉對方的棋FanALLO(x1，yl);DrawMap();
//parseInt()函數(shù)丟棄小數(shù)部分，保留整數(shù)
// 判斷當前位置是否可以放棋子
//判斷對方是否有棋可走，如有交換走棋方
&&checkNext(WHITE))if(curQizi== WHITE &&checkNext(BLACK) curQizi== BLACK
if(curQizi== WHITE) [
curQizi= BLACK;
message txt.innerHTML ="該黑棋走子”;else
curQizi= WHITE;
message txt.innerHTML=“該白棋走子“
else if(checkNext(curQizi))
//判斷自己是否有棋可走,如有,給出提示
message txt.innerHTML ="對方無棋可走請繼續(xù)
//雙方都無棋可走，游戲結束，顯示輸贏信息elseisLoseWin();
//統(tǒng)計雙方的棋子數(shù)量，顯示輸贏信息
else {
message txt.innerHTML="不能落子!";
4． 可否落子判斷
Can_go(x1，y1)從左、左上、上、右上、右、右下、下、左下8個方向判斷(x1，y1)處可否落子。
function Can go( x1，yl)//從左、左上、上、右上、右、右下、下、左下 8 個方向判斷if(CheckDirect(x1，y1，- 1，0)== true)[return true;
if(CheckDirect(x1，y1,- 1，-1)== true){
return true;
if(CheckDirect(x1，yl，0,- 1) == true) (return true;
if(CheckDirect(x1，y1，1,- 1)== true) {
return true;
if(CheckDirect(x1，y1，1，0)== true) {
return true;
if(CheckDirect(x1，y1，1，1)== true) {
return true;
if(CheckDirect(x1，y1，0，1)== true) {
return true;
if(CheckDirect(x1，y1,- 1，1)== true) {
return true;
return false;
調用CheckDirect()函數(shù)判斷某方向上是否形成夾擊之勢。如果形成且中間無空子則返回True。
function CheckDirect(x1，yl，dx，dy)l
var x,Y;
var flag = false;
x=x1 + dx;
y=yl + dy;while(InBoard(x，y) && !Ismychess(x，y) && qizi[x][y] != 0){
x+= dx;
y += dy;
flag = true;
//構成夾擊之勢
if(InBoard(x，y) && Ismychess(x，y) && flag == true) {
//該方向落子有效return true;
return false;
調用checkNext(i)函數(shù)驗證參數(shù)代表的走棋方是否還有棋可走。
驗證參數(shù)代表的走棋方是否還有棋可走￥@param i代表走棋方，1為黑方,2為白方
@return true/false￥
function checkNext(i)!
old= curQizi;
curOizi=i;
if(Can Num()> 0){
curQizi=old;
return true;
else
curQizi=old;
return false;
}
}
調用Can_Num()函數(shù)統(tǒng)計可以落子的位置數(shù)。
function Can Num()var i，j,n=0;for(i=1;i<=8;i++) (for(j=1;j<=8;j++){
if(Can go(i，j)){
//統(tǒng)計可以落子的位置數(shù)
n=n+1;
return n;
//可以落子的位置數(shù)
5． 翻轉對方的棋子
FanALLQi(int x1，int y1)從左、左上、上、右上、右、右下、下、左下8個方向翻轉對方的棋子。
function FanALLQi(x1，yl)//從左、左上、上、右上、右、右下、下、左下 8 個方向翻轉if(CheckDirect(x1，y1，- 1，0)== true){DirectReverse(xl，y1，- 1，0);
if(CheckDirect(x1，yl,- 1,- 1) == true) {
DirectReverse(x1，y1，- 1，-1);
if(CheckDirect(x1，yl，0，- 1)== true) {
DirectReverse(x1，y1，0，- 1);
if(CheckDirect(x1，y1，1,- 1) == true) (DirectReverse(x1，yl，1，- 1);
if(CheckDirect(x1，yl，1，0) == true) {
DirectReverse(x1，yl，1，0);
if(CheckDirect(x1，y1，1，1) == true) {
DirectReverse(x1，yl，1，1);
if(CheckDirect(x1，y1，0，1)== true) {
DirectReverse(x1，y1，0，1);
if(CheckDirect(x1，y1,- 1，1)== true) {
DirectReverse(x1，yl，- 1，1);
}
調用DirectReverse()函數(shù)針對某方向上已形成夾擊之勢的對方棋子進行翻轉。
function DirectReverse(x1，yl，dx，dy)
var x，Y;
var flag = false;
x= x1 + dx;
y= yl + dy;while(InBoard(x，y) && !Ismychess(x，y) && qizi[x][y] != 0)x+= dx;
y += dy;flag = true;
//構成夾擊之勢
if(InBoard(x，y) && Ismychess(x，y) && flag == true)do !
x-= dx;y-=dy;if((x!= xl y! y1)){
FanQi(x，y);
) while((x != xl y!= y1));
調用FanQi(int x，int y)函數(shù)將存儲(x，y)處棋子信息qizi［x］［y］進行反色處理。
function FanQi(x，y)
if(qizi[x][y]== BLACK)qizi[x][y]= WHITE;
else(
qizi[x][y]= BLACK;
調用InBoard()函數(shù)判斷(x,y)是否在棋盤界內。如果在界內則返回True，否則返回False。
//InBoard()函數(shù)判斷(x,y)是否在棋盤界內function InBoard(x,yif(x>=0&& x<=7 && y>=0 && y<=7){return true;
else
return false;
6． 顯示執(zhí)棋方可落子位置
“走棋提示”按鈕單擊事件函數(shù)是DoHelp()函數(shù)，它顯示可以落子的位置提示。調用Show_Can_Position()函數(shù)用圖片
顯示可以落子的位置。
function DoHelp)
showCanPosition();
//顯示可以落子的位置
function showCanPosition()
//顯示可以落子的位置
var i,j;
var n=0;
for(i=0;i<=7;i++)[
//可以落子的位置統(tǒng)計
for(j=0;j<=7; j++)[
if(gizi[i][j]==0 && Can_go(i,j)){
n=n+1;pic = info;//顯示提示圖形
context.drawImage(pic,w*i+ 20,h*i+20,pic.width,pic.height);
7． 判斷勝負功能
調用isLoseWin()函數(shù)統(tǒng)計雙方的棋子數(shù)量，顯示輸贏信息。
//顯示輸贏信息
function isLoseWin()
var whitenum = 0;
var blacknum = 0;
var n=0,x,Y;
for(x=0;x<= 8;x++)(for(y=0;y<=8;y++){
if(qizi[x][y] != 0)[{
n=n+1;if(qizi[x][y]== 2) {
whitenum += 1;
if(qizi[x][y]== 1){
blacknum += 1;
if(blacknum > whitenum) f
message txt.innerHTML ="游戲結束黑方勝利,黑方:"+ String(blacknum)"白方+String(whitenum);
elsemessage txt.innerHTML="游戲結束白方勝利，黑方:"+ String(blacknum)+"白方:
+String(whitenum);
}
}
至此，就完成黑白棋游戲設計了。文章來源：http://www.zghlxwxcb.cn/news/detail-521685.html
?
到了這里，關于HTML5 游戲開發(fā)實戰(zhàn) ｜ 黑白棋的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
