您的位置：首页 > Web前端

web前端--（项目练习）---五子棋人机大战【来自慕课网@channingbreeze】

2016-09-12 16:51 155 查看

原视频链接：慕课网：@channingbreeze

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>
五子棋大战
</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<canvas id="chess" width="450px" height="450px"></canvas>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

script.js

var chess = document.getElementById('chess');
var context = chess.getContext('2d');
//定义黑棋还是白棋的状态
var me = true ;

//声明二维数组存储当前已落子的棋
var chessBoard = [] ;
for (var i = 0; i<15; i++) {
chessBoard[i] = [] ;
for (var j = 0; j < 15; j++) {
chessBoard[i][j] = 0 ;
}
}

//设置棋盘纵横线的颜色
context.strokeStyle="#bfbfbf";

//设置棋盘水印
var logo = new Image();
logo.src="images/shuiyin.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 grandient  = context.createRadialGradient(15 + i*30+2,15 + j*30-2,13,15 + i*30,15 + j*30,0);
if (me) {
grandient.addColorStop(0,"#0a0a0a");
grandient.addColorStop(1,"#636766");
}else{
grandient.addColorStop(0,"#D1D1D1");
grandient.addColorStop(1,"#F9F9F9");
}
context.fillStyle=grandient;
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 ;
}
}

style.css

canvas{
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #EEEEEE,5px 5px 5px #b9b9b9;
}

最终效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Web前端

相关文章推荐

新的分享

章节导航