五子棋
效果
html代码
<canvas id="chess" width="450px" height="450px" ></canvas>
css代码
canvas { display: block; margin: 50px auto; box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9; }
js代码
var chessBoard = [];//二维数组,表示是否已落子,0未落,1己方,2敌方 var me = true;//落子是己方还是敌方 for (var i=0; i<15; i++) { chessBoard[i] = []; for (var j=0; j<15; j++){ chessBoard[i][j] = 0; } } var chess = document.getElementById("chess"); var context = chess.getContext("2d"); context.strokeStyle = "#BFBFBF"; //画img var logo = new Image(); logo.src = "images/logo.png"; logo.onload = function(){ context.drawImage(logo, 0, 0, 450, 450); drawChessBoard(); } //画表格 var drawChessBoard = function() { 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(); } } //每一步的落子 var oneStep = function (i, j, me) { context.beginPath(); context.arc(15 + i*30, 15+j*30, 13, 0, 2* Math.PI);//圆心坐标, 半径,起始弧度,终止弧度 context.closePath(); 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); if (me) { chessBoard[i][j] = 1; } else { chessBoard[i][j] = 2; } me = !me; } }