实训第一天-------五子棋游戏

来源：互联网发布：大型体育赛事数据服务编辑：程序博客网时间：2024/06/07 01:49

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>五子棋游戏</title>
</head>
<body>
<canvas id="myCanvas" width="570" height="570"
style="border: 2px solid #abcabc"></canvas>


<script type="text/javascript">
//获取canvas的标签
var ChessCanvas = document.getElementById("myCanvas");
//获取画布
var gameCanvas = ChessCanvas.getContext("2d");
//定义棋盘大小
var map = 25;
//棋子大小
var chessSize = 12;
//获取下棋的坐标
var x = y = 0;
//棋子的颜色
var isRed = true;//==true的该下红棋否则下黑棋
var color = "#000000";

//棋子数组二维数组
//保存所下的棋子 0：未下；1：下红棋；2：下黑棋
var chessData = new Array(23);
for(var i=0;i<23;i++)
{
chessData[i] =new Array(23);
for(var j=0;j<23;j++)
{
chessData[i][j] = 0;
}
}
//所下棋子在棋子数组的位置
var i,j;

//绘制棋盘
for(var i=0;i<23;i++)
{
gameCanvas.moveTo(10,10+i*map);
gameCanvas.lineTo(560,10+i*map);
gameCanvas.moveTo(10+i*map,10);
gameCanvas.lineTo(10+i*map,560);
gameCanvas.stroke();//画
}
//创建函数，完成下棋
function addChess(x,y)
{
//下棋画小圆圈角度转弧度 π/180×角度弧度变角度 180/π×弧度
gameCanvas.beginPath();//开始
gameCanvas.arc(x,y,chessSize,0,Math.PI*2,true);//画棋子
gameCanvas.fillStyle = color;
gameCanvas.fill();
gameCanvas.closePath();//结束
if(color=="#000000")
{
color = "#ff0000";
//黑棋
chessData[i][j] = 2;

}else{
color = "#000000";
//红棋
chessData[i][j] = 1;

}

}
//重复调用在做坦克大战之类游戏需要使用。。。。。。。
// window.setInterval(函数,时间);

//游戏是否结束
// function isGameWin()

//如果是人机对战版，则需要下棋的AI 如果不是人机对战则下完棋后，提醒对方下棋
// function gameAI()

//做鼠标监听游戏逻辑
document.onmousedown= function(e)
{
window.onclick = function (){

//获取下棋的坐标
i = Math.round((e.x-10)/25);
j = Math.round((e.y-10)/25);//边界不能下
//判断该位置x，y是否可以下棋
x = i*25+10;
y = j*25+10;

//判断该位置ij是否有棋子
if(chessData[i][j]==0)
{
//下棋
addChess(x,y);

}else{
alert("不好意思！你来晚了，已经被对方捷足先登了");
}

}
}

</script>

</body>
</html>

阅读全文

0 0