介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
& lt;才能meta charset=皍tf-8"比;
& lt;才能meta http-equiv=癤-UA-Compatible",内容=癐E=edge"比;
& lt;才能title> HTML五子棋游戏& lt;/title>
& lt;才能link rel=皊tylesheet" https://www.yisu.com/zixun/, href=" ">
<>脚本//五子棋的构造函数
函数游戏(){
这一点。isWin=false;//游戏是否结束标志
}//闭包计棋器
Game.cnt=(函数(){
var咕咕叫='黑色';
返回函数(){
var tmp=咕咕叫;
如果(咕咕叫=='黑色'){
咕咕叫=鞍住?
其他}{
咕咕叫='黑色';
}
返回tmp;
}
}) ();//下棋函数
游戏。xiaQi=函数(g) {//判断选择的位置是否已经下过棋了
如果(this.style.backgroundImage.indexOf (gif)>=0) {
alert('这里已经下过棋了');
返回;
}
var=Game.cnt颜色();
this.style。backgroundImage=" url(./图片/+颜色+ gif)”;
Game.judge.call(颜色,g);//判定函数
}//判定游戏是否结束
游戏。法官=function(颜色、g) {
var tds=document.getElementsByTagName (td);//获取当前棋子所下的位置
var咕咕叫={x: this.cellIndex y: this.parentElement.rowIndex,颜色:颜色};
var行=[”、“,”、“);//表示当前棋子的横,竖,左斜,右斜方向的棋子//遍历255个棋格,看看是否能赢
我(var=0, tmp={};我=0){
tmp。颜色=' b ';
[我]}else if (tds .style.backgroundImage.indexOf(白色)>=0){
tmp。颜色=' w ';
}//获取当前棋子的横向其他棋子的坐落情况
如果(咕咕叫。y==tmp.y) {
行[0]+=tmp.color;
}//获取当前棋子的竖向其他棋子的坐落情况
如果(咕咕叫。x==tmp.x) {
行[1]+=tmp.color;
}//获取当前棋子的左斜方向其他棋子的坐落情况
如果(curr.x +咕咕叫。y==tmp.x + tmp.y) {
行[2]+=tmp.color;
}//获取当前棋子的右斜方向其他棋子的坐落情况
如果(curr.x-tmp。x==curr.y-tmp.y) {
行[3]+=tmp.color;
}
}
颜色===昂谏?“bbbbb”:“wwwww”;//判断是否五子连珠
我(var=0; =0){
警报(“你赢了”);
g。isWin=true;
打破;
}
}
}//页面加载完成
窗口。onload=function () {
var g=新游戏();
document.getElementsByTagName(“表”)[0]。onclick=function (ev) {//判断是否已经赢得游戏
如果(g.isWin) {
alert('此局已结束,请重新开始”);
返回;
}
Game.xiaQi.call (ev.srcElement g);//下的棋
}
}>
表{
border-collapse:崩溃;
宽度:540 px;
身高:540 px;
边界:固体1 px蓝色;
保证金:汽车;
背景图片:url(/图片/background.gif。);
}>
<表>
这篇文章将为大家详细讲解有关JavaScript实现五子棋游戏的方法详解,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<>强效果图:
五子棋素材图:
代码:
