canvas:画布可以被js操作 ,画板=>图片(尺寸数据,我们需要修改它的尺寸,不是修改样式)
绘制环境
如何绘制:
提笔到某个位置
描述绘制环境
开始绘制
提笔
querySelector:document对象上具有的一个办法,id和class都可以获取
选择满足条件的第一个元素。
getElementsByClassName效率高
制作流程:
1.绘制棋盘
(1).绘制直线的操作
2.绘制旗子
(1)如何绘制
(2)如何点击下棋
(3)交换手
(4)落子点的问题(必须下到交叉点),自瞄系统
(5)友军判断,下过棋的地方不下,记录棋盘的状态
3.游戏胜负判断
棋盘状态
五子棋胜负判断的核心原理:
当前下下去的棋子参与到胜负判断中,此时下棋的人要么赢要么不赢
一条线上分为左右颜色连续累加超过5,那么这个颜色就获胜了。
4.人工智能机器下棋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>五子棋</title>
<style type="text/css">
body{
margin: 0;
background-color: #ccc;
}
#canvas{
display: block;
margin:20px auto;
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="canvas" width="450" height="450"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector('#canvas');//获取元素的操作
var ctx = canvas.getContext('2d');//获取绘制环境
var chesscolor = ['black','white'];
var step = 0;
var maparr = [];
var mode = [//判断模式
[1,0],//水平
[0,1],//竖直
[1,1],//右下
[1,-1],//左下
];
for(var i=0;i<14;i++){
maparr[i]=[];
for(var j=0;j<14;j++){
maparr[i][j]=0;
}
}
for(var i=1;i<15;i++){
ctx.moveTo(30*i,30);
ctx.lineTo(30*i,420);//绘制表格操作
ctx.moveTo(30,30*i);
ctx.lineTo(420,30*i);
}
ctx.stroke();//将之前的所有的路径全部绘制一次,描轮廓画法
function drawchess(color,x,y){//传入一个颜色代码,绘制一个棋子
//开始绘制
ctx.fillStyle=color;//填充颜色的修改
ctx.beginPath();//提笔操作
ctx.arc(x,y,15,0,Math.PI*2,false);//描述画圆坐标,圆心坐标轴半径,起始点,度数
ctx.fill();//填充
ctx.stroke();
}
//点击有棋子
canvas.addEventListener('click',function(e){
var px = Math.floor((e.offsetX+15)/30)-1;//自瞄系统
var py = Math.floor((e.offsetY+15)/30)-1;
//靠近边缘的不能下棋
if((px+1)*30==0 || (py+1)*30==0 || (px+1)*30==450 || (py+1)*30==450){
return;
}
//判断是否下过棋
if(maparr[px][py]==0){
drawchess(chesscolor[step%2],(px+1)*30,(py+1)*30);
maparr[px][py]=chesscolor[step%2];
//下完了算胜负
checkWin(chesscolor[step%2],px,py,mode[0]);
checkWin(chesscolor[step%2],px,py,mode[1]);
checkWin(chesscolor[step%2],px,py,mode[2]);
checkWin(chesscolor[step%2],px,py,mode[3]);
step = step+1;
}
});
function checkWin(color,x,y,mode){//要么黑,要么白,要么没赢
var count = 0;
for(var i=1;i<5;i++){
if(maparr[x+i*mode[0]]){
if(maparr[x+i*mode[0]][y+i*mode[1]]==color){
count++;
}else{
break;
}
}
}
for( var i=1;i<5;i++){
if(maparr[x-i*mode[0]]){
if(maparr[x-i*mode[0]][y-i*mode[1]]==color){
count++;
}else{
break;
}
}
}
if(count>=4){
alert(color,'win');
}
}
</script>
</html>