HTML5是一種用于創(chuàng)建Web文檔和Web應(yīng)用程序的語(yǔ)言。其中,五子棋是一種流行的智力游戲。下面是一個(gè)基于HTML5的五子棋代碼。
第一步是定義游戲板的大小:
<canvas id="board" width="500" height="500"></canvas>
接下來(lái),我們需要在JavaScript中定義游戲板:
var board = document.getElementById('board'); var ctx = board.getContext('2d'); var cellSize = 50;
現(xiàn)在我們可以開(kāi)始繪制游戲板了:
for (var x = 0; x < board.width; x += cellSize) { for (var y = 0; y < board.height; y += cellSize) { ctx.strokeRect(x, y, cellSize, cellSize); } }
我們還需要記錄落子的位置和下一步是黑子還是白子:
var pieces = []; var currentPlayer = 'black'; board.onclick = function (e) { var x = e.offsetX; var y = e.offsetY; var i = Math.floor(x / cellSize); var j = Math.floor(y / cellSize); if (pieces[i][j]) return; pieces[i][j] = currentPlayer; drawPiece(i, j, currentPlayer); currentPlayer = currentPlayer === 'black'? 'white' : 'black'; };
最后,我們需要繪制落子:
function drawPiece (x, y, player) { var cx = x * cellSize + cellSize / 2; var cy = y * cellSize + cellSize / 2; ctx.beginPath(); ctx.arc(cx, cy, cellSize / 2 - 3, 0, 2 * Math.PI); if (player === 'black') { ctx.fillStyle = '#000'; } else { ctx.fillStyle = '#fff'; } ctx.fill(); }
以上就是一個(gè)基于HTML5的五子棋代碼。希望可以幫助您了解HTML5和游戲編程。
下一篇html5的層疊代碼