周末闲暇用javascript写个网页“斗兽棋”小游戏

html页面，简单的table棋盘布局

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>斗兽棋</title><link href="css/index.css" rel="stylesheet"/><script src="js/index.js"></script></head><body><!--作者：466043957@qq.com时间：2021-10-15描述：--><div id="tooldiv"><button id="startgame" onclick="StartGame();">开始游戏</button></div><div id="maincontaindiv"><table><tr><td id="1"></td><td id="2"></td><td id="3"></td><td id="4"></td></tr><tr><td id="5"></td><td id="6"></td><td id="7"></td><td id="8"></td></tr><tr><td id="9"></td><td id="10"></td><td id="11"></td><td id="12"></td></tr><tr><td id="13"></td><td id="14"></td><td id="15"></td><td id="16"></td></tr></table></div></body>
</html>

css简单页面修饰

html,body {}
#maincontaindiv {width: 100%;height: 100%;border: 2px solid red;text-align: center;
}#tooldiv {width: 100%;height: 30px;text-align: center;
}table {align-content: center;align-items: baseline;position: relative;left: 30%;
}tr,td {width: 120px;height: 120px;border: 2px solid #eeff33;
}img {width: 115px;height: 115px;
}.clickimg {border: 4px solid blue;
}

javascript实现下棋操作逻辑

//初始化全局变量
var gbl = {animalList : ["黄象","黄狮","黄虎","黄豹","黄狼","黄狗","黄猫","黄鼠","绿象","绿狮","绿虎","绿豹","绿狼","绿狗","绿猫","绿鼠"],randomanimalList: [],        //  初始棋盘布局playerYellowList: ["黄象","黄狮","黄虎","黄豹","黄狼","黄狗","黄猫","黄鼠"],      //  黄棋玩家棋子playerGreenList: ["绿象","绿狮","绿虎","绿豹","绿狼","绿狗","绿猫","绿鼠"],       //  绿棋玩家棋子curClickAnimal: null,     //  当前操作棋子lastClickAnimal: null,        //  上一次点击棋子firstClick: "",                //  第一次翻棋记录ruleList: {"黄象":0,"黄狮":1,"黄虎":2,"黄豹":3,"黄狼":4,"黄狗":5,"黄猫":6,"黄鼠":7,"绿象":0,"绿狮":1,"绿虎":2,"绿豹":3,"绿狼":4,"绿狗":5,"绿猫":6,"绿鼠":7},curPlayer: ""
}function StartGame(){//开始游戏重置全局变量gbl.playerYellowList = ["黄象","黄狮","黄虎","黄豹","黄狼","黄狗","黄猫","黄鼠"];gbl.playerGreenList = ["绿象","绿狮","绿虎","绿豹","绿狼","绿狗","绿猫","绿鼠"];gbl.curClickAnimal = null;gbl.lastClickAnimal = null;gbl.curPlayer = "";gbl.firstClick = "";gbl.animalList = ["黄象","黄狮","黄虎","黄豹","黄狼","黄狗","黄猫","黄鼠","绿象","绿狮","绿虎","绿豹","绿狼","绿狗","绿猫","绿鼠"];gbl.randomanimalList = [];GetRandomNumList();var tdList = document.getElementsByTagName("td");if (tdList == null || tdList.length == 0) {alert("页面发生错误，请刷新重试！");return;}var imgSrc = "<img src=\"img/cover.png\" onclick=\"CheckChess(this);\"/>";for (var i=0; i<tdList.length; i++){tdList[i].innerHTML = imgSrc;tdList[i].onmouseover = function(){this.className = 'clickimg';}tdList[i].onmouseout = function(){this.className = "";}tdList[i].onclick = CheckMoveChess;}
}//获取棋盘随机布局
function GetRandomNumList(){for (var i=16; i>=1; i--){var num = parseInt(Math.random() * i);gbl.randomanimalList.push(gbl.animalList.splice(num,1)[0]);}
}//点击操作棋子
function CheckChess(chessObj){if (gbl.lastClickAnimal != null && gbl.lastClickAnimal != ""){gbl.lastClickAnimal.className = "";}chessObj.className = "clickimg";gbl.lastClickAnimal = chessObj;console.log(chessObj.parentNode.id);var index = parseInt(chessObj.parentNode.id) - 1;if (chessObj.src.indexOf("cover") >= 0){      //判断是否翻棋chessObj.src = "img\/" + gbl.randomanimalList[index] + ".png";       //切换图片翻棋chessObj.name = index;//清空上一次点击棋子if (gbl.curClickAnimal != null){gbl.curClickAnimal.className = "";}gbl.curClickAnimal = null;//切换玩家操作if (gbl.curPlayer != ""){gbl.curPlayer == "Green" ? gbl.curPlayer = "Yellow" : gbl.curPlayer = "Green";}}else{if (gbl.curClickAnimal == null || gbl.curClickAnimal == ""){  //判断是否操作的第一个棋子gbl.curClickAnimal = chessObj;        //记录该次点击棋子，用于吃子return;}else{//获取当前玩家var curplayer = "";if (gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)].indexOf("黄") >= 0){curplayer = "Yellow";}else{curplayer = "Green";}// 根据点击的棋子判断是否该当前玩家操作吃子if (curplayer != "" && curplayer == gbl.curPlayer){alert("操作犯规：该" + (curplayer=="Green" ? "黄棋" : "绿棋") + "玩家操作棋子");gbl.curClickAnimal = null;return;}if (gbl.curClickAnimal == chessObj){ return ;}     //两次点击相同棋子不做操作//如果两次点击同一方棋子，则只替换存当前其中得变量，不做其他处理if ((gbl.playerGreenList.indexOf(gbl.randomanimalList[parseInt(chessObj.name)]) >=0 && gbl.playerGreenList.indexOf(gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)]) >=0 ) ||(gbl.playerYellowList.indexOf(gbl.randomanimalList[parseInt(chessObj.name)]) >=0 && gbl.playerYellowList.indexOf(gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)]) >=0 )){gbl.curClickAnimal = chessObj;return ;}//判断吃子规则 1，两棋子是否能吃else if ((parseInt(gbl.ruleList[gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)]]) != 7 &&parseInt(gbl.ruleList[gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)]]) > parseInt(gbl.ruleList[gbl.randomanimalList[parseInt(chessObj.name)]])) ||(parseInt(gbl.ruleList[gbl.randomanimalList[parseInt(chessObj.name)]]) != 0 &&parseInt(gbl.ruleList[gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)]]) == 7 &&parseInt(gbl.ruleList[gbl.randomanimalList[parseInt(chessObj.name)]]) != 7) ||(parseInt(gbl.ruleList[gbl.randomanimalList[parseInt(chessObj.name)]]) == 7 &&parseInt(gbl.ruleList[gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)]]) == 0)){alert("吃子犯规：\"" + gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)] + "\"不可以吃\"" +gbl.randomanimalList[parseInt(chessObj.name)] + "\"");gbl.curClickAnimal.className = "clickimg";chessObj.className = "";}else{//满足规则一的基础上判断吃子规则 2：两字不是横竖相邻不能吃子if (parseInt(chessObj.parentNode.id) - parseInt(gbl.curClickAnimal.parentNode.id) != 1 &&parseInt(chessObj.parentNode.id) - parseInt(gbl.curClickAnimal.parentNode.id) != -1 &&parseInt(chessObj.parentNode.id) - parseInt(gbl.curClickAnimal.parentNode.id) != -4 &&parseInt(chessObj.parentNode.id) - parseInt(gbl.curClickAnimal.parentNode.id) != 4){alert("吃子犯规：不可以跨格吃子！");gbl.curClickAnimal.className = "clickimg";chessObj.className = "";return;}//吃子成功记录当前操作玩家，同时删除已被吃棋子if (gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)].indexOf("黄") >= 0){gbl.curPlayer = "Yellow";gbl.playerGreenList.splice(gbl.playerGreenList.indexOf(gbl.randomanimalList[parseInt(chessObj.name)]),1);if (gbl.playerGreenList.length == 0){alert("很遗憾！绿棋方玩家失败。恭喜黄棋玩家胜利！")}}else{gbl.curPlayer = "Green";gbl.playerYellowList.splice(gbl.playerYellowList.indexOf(gbl.randomanimalList[parseInt(chessObj.name)]),1);if (gbl.playerYellowList.length == 0){alert("很遗憾！黄棋方玩家失败。恭喜绿棋玩家胜利！")}}//吃子成功改变棋子位置，吃的棋子占据被吃的棋子，吃的棋子原位置清空chessObj.src = "img\/" + gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)] + ".png";chessObj.name = gbl.curClickAnimal.name;gbl.curClickAnimal.parentNode.innerHTML = "";//吃子成功清除点击的棋子记录gbl.curClickAnimal = "";}}}
}//点击空白格子判断移动棋子
function CheckMoveChess(){//没有移动的棋子退出if (gbl.curClickAnimal == null || gbl.curClickAnimal == ""){return;}if (!this.hasChildNodes()){  //判断是否空白格子//判断移动棋子规则：不可以跨格移动if (parseInt(this.id) - parseInt(gbl.curClickAnimal.parentNode.id) != 1 &&parseInt(this.id) - parseInt(gbl.curClickAnimal.parentNode.id) != -1 &&parseInt(this.id) - parseInt(gbl.curClickAnimal.parentNode.id) != 4 &&parseInt(this.id) - parseInt(gbl.curClickAnimal.parentNode.id) != -4){alert("移动棋子犯规：不可以跨格移动棋子！");return;}else{    //移动棋子//记录操作玩家if (gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)].indexOf("黄") >= 0){gbl.curPlayer = "Yellow";}else{gbl.curPlayer = "Green";}//移动棋子this.innerHTML = "<img name=" + gbl.curClickAnimal.name + " src=\"img/" + gbl.randomanimalList[parseInt(gbl.curClickAnimal.name)] + ".png\" onclick=\"CheckChess(this);\"/>"gbl.curClickAnimal.parentNode.innerHTML = "";gbl.curClickAnimal = null;}}
}

页面效果展示

周末闲暇用javascript写个网页“斗兽棋”小游戏相关推荐

基于Python pygame简易版斗兽棋小游戏源代码
基于Python pygame简易版斗兽棋小游戏源代码游戏规则如下: 胜利条件: 1.吃掉对方全部棋子 2.走入对方兽穴(不可进入自己洞穴) 吃法: 1.象>狮>虎>豹>狼& ...
【Python游戏】Python基于pygame实现的人机大战的斗兽棋小游戏 | 附源码
前言有粉丝说要我出一期Python版本的斗兽棋,今天宠粉狂魔的我不就来啦!! 虽然是一个简单的小游戏,但是对于新手小伙伴来说还是有一定的小难度的哟!要是不理解都可以找到小编的哈!! 相关文件关注小 ...
html+javascript实现的网页版飞机大战小游戏源码
html+javascript实现的网页版飞机大战小游戏源码完整代码下载地址: html+javascript实现的网页版飞机大战小游戏源码 index.html <!DOCTYPE html ...
【Unity连载】斗兽棋-棋类游戏开发演示（2）
第四章游戏操作与指令如同养育一个婴儿,父母总会一步步引领孩子成长,从蹒跚学步到来去如风:我们对游戏功能的开发,也无疑应当从走出第一步棋开始.现在,我们已经构建出了棋盘.棋子等基本的游戏逻辑对象:那 ...
【Unity连载】斗兽棋—棋类游戏开发演示（1）
序言 "黄梅时节家家雨,青草池塘处处蛙.有约不来过夜半,闲敲棋子落灯花." "象棋终日乐悠悠,苦被严亲一旦丢.兵卒坠河皆不救,将军溺水一齐休.马行千里随波去,象入三川逐浪 ...
用原生JS写一个网页版的2048小游戏（兼容移动端）
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
小游戏之斗兽棋（uniapp）
前言最近学习数据结构与算法,但是平常自己要么刷题,要么看书,很是无聊.就想着游戏中一般都会运用大量的算法,所以就开始写游戏来锻炼自己算法这方面的小能力.后面还会持续做其他小游戏,并发布说说自己做的过 ...
动物棋c语言程序,斗兽棋游戏手机版|斗兽棋游戏下载 v0.2C 安卓版_最火软件站...
斗兽棋android手机版,动物对战棋,回味童年的棋牌休闲游戏,登陆android手机,整个游戏画面是分为两块区域,中间有河流分割两块区域,有桥梁可以让彼此的动物过河,要取得胜利,必须占领那一边动物的 ...
vue3 斗兽棋游戏
近来掘金举办前端比赛,所以写了一个小游戏参加,而且熟悉一下vue3,写了一下游戏,思来想去就写了一个斗兽棋游戏. 欢迎去给我加油点赞评论收藏 ,试玩地址游戏地址童年斗兽棋 - 码上 ...
Easyx-----c语言实现斗兽棋
原游戏链接:新斗兽棋_新斗兽棋html5游戏_4399h5游戏-h.4399.com #include<stdio.h> #include<easyx.h> #include& ...

周末闲暇用javascript写个网页“斗兽棋”小游戏

周末闲暇用javascript写个网页“斗兽棋”小游戏相关推荐

最新文章

热门文章