在这个漫长的暑假,我开始了实训,在指导老师的带领下,我们学习了html5来做五子棋,对于我这个初学者来说,虽然课程困难,但是在我们的查阅资料和认真听讲下还是把问题挨着解决掉了。
五子棋的算法很高深,棋盘的设计就很不好做。下面贴上我的代码,虽然还不能进行游戏,但是现在已经可以下棋了,只差制定游戏规则。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>五子棋游戏</title>
</head>
<body>
<canvas id="myCanvas" width="570" height="570" style="border: 2px solid #000000"></canvas>
<!--
作者:apzmqapzmqa
时间:2017-07-03
描述:使用js来控制游戏逻辑
-->
<script type="text/javascript">
//获取canvas的标签
var ChessCanvas = document.getElementById("myCanvas");
//获取画布
var gameCanvas = ChessCanvas.getContext("2d");
//定义棋盘大小
var map = 25;
//棋子大小
var chessSize = 23;
//下棋的坐标
var x = y = 0;
//棋子的颜色
var isRed = true;//==true的该下红旗,否则下黑棋
var color = "#FF0000";
//棋子数组 二维数组
//保存所下棋子 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,i*map+10);
gameCanvas.lineTo(560,i*map+10);
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/2,0*Math.PI,2*Math.PI,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 isFameWin()
//如果是人机对战版,则需要下棋的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 = i*25+10;//math的四舍五入
y = j*25+10;
//判断该位置是否有棋
if(chessData[i][j]==0)
{
//下棋
addChess(x,y);
}else{
alert("不好意思!你来晚了,已经被 对方捷足先登了");
}
}
}
</script>
</body>
</html>