失眠网 > 前端实现五子棋小游戏1（本地双人对战）

前端实现五子棋小游戏1（本地双人对战）

时间：2019-07-29 06:49:37

相关推荐

前端实现五子棋小游戏1（本地双人对战）

运用canvas写一个本地五子棋小游戏

HTML部分JS 部分CSS 部分实现效果

HTML部分

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五子棋小游戏</title><link rel="stylesheet" type="text/css" href="./css/css.css"></head><body><canvas id="chess" width="450px" height="450px"></canvas><script type="text/javascript" src="./js/script.js"></script></body></html>

JS 部分

// 轮流下棋var me = true;// 二维数组存储落子情况，不可重复落子var chessBoard = [];for (var i = 0; i < 15; i++) {chessBoard[i] = [];for (j = 0; j < 15; j++) {// 0为没有落子chessBoard[i][j] = 0;}}var chess = document.getElementById('chess');var context = chess.getContext('2d');// 变颜色context.strokeStyle = "#BFBFBF";// 画背景图var logo = new Image();logo.src = "./img/logo.jpg";// 图片加载完之后调用方法才能显示logo.onload = function () {context.drawImage(logo, 0, 0, 450, 450);drawChessBoard();}var drawChessBoard = function () {//画布是450*450 15个交叉点，14个间隔每个间隔30像素两边留白15像素for (var i = 0; i < 15; i++) {// 竖线context.moveTo(15 + i * 30, 15);context.lineTo(15 + i * 30, 435);context.stroke();// 横线context.moveTo(15, 15 + i * 30);context.lineTo(435, 15 + i * 30);context.stroke();}}// ij是棋盘索引 me是白棋黑棋var oneStep = function (i, j, me) {// 画棋子、画圆context.beginPath() context.closePath();context.beginPath();// arc画扇形参数，起始位置半径13 扇形弧度 0 2πcontext.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// stroke描边context.stroke();context.closePath();// 设置黑子渐变 createRadialGradient参数第一个圆原线性坐标半径13 和第二个圆黑旗颜色0A0A0A黑色var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);if (me) {gradient.addColorStop(0, "#0A0A0A");gradient.addColorStop(1, "#636766");} else {gradient.addColorStop(0, "#D1D1D1");gradient.addColorStop(1, "#F9F9F9");}context.fillStyle = gradient;// 填充圆的颜色context.fill();}// 落棋设置chess.onclick = function (e) {// 相对于左上角来设置坐标和索引var x = e.offsetX;var y = e.offsetY;// 向下取整var i = Math.floor(x / 30);var j = Math.floor(y / 30);// 判断不可重复落子if (chessBoard[i][j] == 0) {oneStep(i, j, me);// 黑棋为1，白棋为2if (me) {chessBoard[i][j] = 1;} else {chessBoard[i][j] = 2;}// 交替颜色me = !me;}}// 对角线// context.moveTo(0, 0);// context.lineTo(450, 450);// context.stroke();