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;
}
}
}
页面效果展示