Javascript と HTML5 はキャンバスを使用して Web バックギャモンゲーム実装を構築します。-jsチュートリアル-php.cn

Javascript と HTML5 はキャンバスを使用して Web バックギャモンゲーム実装を構築します。

WBOY

リリース： 2016-05-16 17:28:37

オリジナル

1656 人が閲覧しました

これは単なる Javascript と HTML5 アプレットであり、人間とコンピューターの戦闘は実装されていません。
バックギャモンボード上の配置ポイントに対応する 2 次元配列。配列の要素はドロップポイントに対応します。たとえば、配列要素値 0 は、その要素に対応する配置ポイントにチェスの駒がないことを意味し、配列要素値 1 は、要素に対応する配置ポイントに白いチェスの駒があることを意味し、配列要素値 2 は、その要素に対応する配置ポイントに黒のチェスの駒があることを意味します。
バックギャモンの勝ち位置を決定するアルゴリズムは、バックギャモンの配置ポイントに対応する 2 次元配列を操作することによって実装されます。ボード。

バックギャモンの勝敗を判定するアルゴリズム
以下の関数は、バックギャモンの勝敗を判定するアルゴリズムを実装することも、教科書内の対応するアルゴリズムに従って実装することもできます。
関数のパラメータ xx.yy は配列の添字で、チェス配列はバックギャモンボード上の配置ポイントのデータ構造マッピングを実装します。
アルゴリズムの考え方は次のとおりです。現在の配置点に対応する添字を基点として使用し、その周囲の 8 方向に検索し、同じ色の部分が 5 つ連続している場合は 1 を返します。 2、それ以外の場合は0を返します。 1 を返すと白の駒が勝つことを意味し、2 を返すと黒の駒が勝つことを意味します。 0 を返すことは、勝ちとなるデータ構造ステータスが発生していないことを意味します。
Javascript と HTML5 はキャンバスを使用して Web バックギャモンゲーム実装を構築します。

コードをコピーコードは次のとおりです。

 

 http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


var Canvas; var context; 
var isWhite = true;//白のターンかどうかを設定します
var isWell = false;//勝った場合、もう移動できなくなります。
var img_b = new Image(); 
img_b.src = "images/b.png";//白い画像
var img_w = new Image(); 
img_w.src = "images/w.png ";//黒いチェスの絵
var chessData = new Array(15);//これは、チェス盤情報を保存するために使用されるチェス盤の 2 次元配列です。チェスが渡されていないことを示すために 0 が初期化され、 1 は白のチェスが移動したことを示します。2 は黒の移動です。
for (var x = 0; x chessData[x] = new Array(15); (var y = 0; y < ; 15; y ) { 
chessData[x][y] = 0; 
} 
} 
functiondrawRect() {// の後に関数を呼び出します。ページがロードされ、チェスボードが初期化されます
canvas = document.getElementById("canvas"); 
context = Canvas.getContext("2d"); 
for (var i = 0; i context.beginPath(); 
context.lineTo(640, i); context.closePath(); 
context.beginPath(); 
context.lineTo(i, 640); >context.closePath(); 
context.ストローク( ); 
} 
} 
function play(e) {//マウスをクリックすると発生します
var x = parseInt((e. clientX - 20) / 40);//マウスのクリック面積を計算します。(65, 65) がクリックされた場合、(1, 1) の位置がクリックされます。
var y = parseInt((e.clientY - 20) / 40); 
if (chessData[x] [y] != 0) {//そのポジションがプレイされたかどうかを判断します 
alert("このポジションではチェスをプレイできません"); ; 
} 
if (isWhite) { 
isWhite = false; 
} 
else { 
isWhite = true; >drawChess(2, x, y); 
} 
} 
functiondrawChess(chess, x, y) {//パラメータは、チェス (1 は白のチェス、2 は黒のチェス)、配列位置 
if (isWell == true) { 
alert("終了しました。もう一度プレイする必要がある場合は更新してください"); 
return 
} 
if (x > = 0 && x if (チェス == 1) { 
context.drawImage(img_w, x * 40 20, y * 40 20) ;//白のチェスを描画します
chessData[x] [y] = 1; 
} 
else { 
context.drawImage(img_b, x * 40 20, y * 40 20); >chessData[x][y] = 2; 
} 
judge(x, y, chess) 
} 
} 
関数 judge(x, y, chess);盤面の勝ち判定
var count1 = 0; 
var count3 = 0; 
//左右判定
 for (var i = x; i >= 0; i --) { 
if (chessData 
[y] != chess) { 
break; 
} 
count1 ; 🎜>} 
for (var i = x 1; i if (chessData 
[y] != chess) { 
break 
} 
count1 ; 
} 
//上下判定 
for (var i = y; i >= 0; i--) { 
if (chessData[x] 
! = チェス) { 
break; 
} 
 count2 ; 
} 
for (var i = y 1; i if (chessData[x] 
!= chess) { 
break; 
 } 
count2; 
} 
//左上、右下判定
for (var i = x, j = y ; i >= 0, j >= 0; i--, j --) { 
if (chessData 
[j] != chess) { 
} 
count3 ; 
} 
for (var i = x 1, j = y 1; i if (chessData 
[j] != chess) { 
break; 
} 
count3 ; 
} 
//右上と左下の判定 
for (var i = x, j = y; i >= 0, j if ( chessData 
[j] != chess) { 
break; 
count4 ; >} 
for (var i = x 1, j = y - 1; i = 0; i , j--) { 
if (chessData 
[j] ! = チェス) { 
break; 
} 
count4; 
} 
if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 > ;= 5) { 
if (chess == 1) { 
alert("白が勝った"); 
} 
else { 
alert("黒が勝った"); 🎜>} 
isWell = true;//ボードを勝ったように設定します。もう離れることはできません 
} 
} 

< /head> ><ボディ onload="drawRect()"> 
 
 ;お使いのブラウザは HTML5 キャンバスをサポートしていません。
 

 