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

最新推荐文章于 2023-10-18 21:42:34 发布
最新推荐文章于 2023-10-18 21:42:34 发布
阅读量1.8k 收藏 4
点赞数
文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiwu520/article/details/120797529
版权

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;
		}
	}
}

页面效果展示
初始棋盘布局
翻棋效果
吃棋效果

a digger
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
斗兽棋html.zip
02-03
斗兽棋html网页。
游戏:《蔡徐坤打飞机》网页小游戏源码
08-06
2、游戏中单手就可以进行操作，并在游戏中打发闲暇的游戏时光，开启挑战！ 3、游戏内非常考验反应速度，我们的难度将随着关卡，不断的进行增加！ 游戏特色： 1.游戏玩法非常的简单，单手就可以进行操作，打发闲暇...
斗兽棋 java_js --斗兽棋游戏
weixin_36343299的博客
02-21 278
斗兽棋-by:lalasxc< type="text/java" src="sxcjs/base.js">>< type="text/java" src="sxcjs/dom.js">>< type="text/java" src="sxcjs/event.js">>body{margin:0;padding:0;font-size:14px;...
js 编写的简单游戏代码,js小游戏游戏代码大全
chatgpt002的博客
10-18 5647
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。操作方式：鼠标点击胜利条件：无失败条件：小鸟碰到了屏幕上下的水管就算失败看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
利用js制作的简单网页小游戏
热门推荐
Ayingpan的博客
03-28 1万+
利用html和js制作的简单的网页小游戏 这个是我第一次利用js制作wang’y
分享一个好玩的JS小游戏
老电影故事的博客
07-19 2520
一个js的忍者小游戏 话不多说 如图所示 简单好玩 打发时间HTML CSS 赶紧跑起来试试吧！！！！
游戏斗兽棋，童年的回忆
iunk的博客
10-15 696
游戏斗兽棋，童年的回忆 最近在某游戏平台上面玩了一款经典的游戏，《斗兽棋》，就是象、狮、虎、豹、狼、狗、猫、鼠八种棋子组成，分为红方和蓝方，童年时代经常玩的游戏，俗称“洋火皮”，哈哈。现在用 react-native 进行实现一下。下面是代码，代码里面有详细的注释。 import React, { Component } from 'react' import { View, Text, Touc...
《打飞机》网页小游戏源码
最新发布
06-09
游戏:《打飞机》网页小游戏源码 1、不断地控制人物进行左右移动，躲避各种危险的存在，并击杀更多的敌人！ 2、游戏中单手就可以进行操作，并在游戏中打发闲暇的游戏时光，开启挑战！ 3、游戏内非常考验反应速度，...
C语言 猜数字游戏关机版本 闲暇时的小游戏 真实关机！！！
04-15
单纯猜数字游戏略显枯燥，搭配上规定时间内猜数字会更刺激，一分钟内猜不到就关机，及其刺激 刚开始还要输入“我是猪”的指令才能进行到猜...声明：只适合大家闲暇时游戏，不要用来搞破坏，弄坏别人电脑本人概不负责！
小程序+数独小游戏+源码
05-28
在本教程中，我们将深入探讨如何使用微信小程序开发框架，构建一个趣味横生的数独小游戏。 数独游戏是一种逻辑推理游戏，玩家需要通过填写1到9的数字，使每一行、每一列以及每一个宫格内的数字都唯一，不重复。这个...
自制斗兽棋
10-16
自制斗兽棋游戏
JS版三三棋游戏
08-31
云南、广西、贵州，侗族、壮族曾经流行的三三棋， 渐渐消失的民间游戏， 几乎连网上都找不到下载的游戏
斗兽棋(python).zip
08-31
JessicaFeng0926原作翻牌斗兽棋，在上面改动了一点，想优化成过河版或者军棋版，但ai比较难写。
斗兽棋游戏源码下载.rar
02-21
斗兽棋游戏源码
js飞机大战网页版小游戏
08-31
基于html5的js飞机大战小程序，对于学习js、jq的新手有帮助
H5小游戏源码 红还是绿.zip
10-14
"小游戏"则暗示这可能是一个轻量级、简单易玩的娱乐项目，适合在闲暇时间玩耍。 【源码学习知识点】 1. HTML5基础知识：包括HTML、CSS和JavaScript，是构建H5游戏的基础。HTML负责页面结构，CSS负责样式设计，...
联网对战游戏开源实例分享之《斗兽棋》
weixin_33826609的博客
09-26 817
本次，Matchvs为大家带来的是一款回合制休闲游戏的开源案例 。玩家双方在一个4X4的棋盘上，遵循食物链的规则玩法下进行翻牌与追逐，最终以场上存活的一方为获胜者。体验地址&gt;&gt;源码地址&gt;&gt;首先你需要下载Cocos Creator 和Matchvs JavaScript SDK。本次游戏设计的实现步骤主要拆分为用户登录、随机匹配和创建房间、以及同屏游戏三个部分完成。用户登录​...
写一个可以陪玩家下棋的五子棋程序小游戏
08-13
这个五子棋程序小游戏可以陪伴玩家度过闲暇时间，提供一个与电脑或朋友交流的平台。玩家可以通过这个小游戏来提高自己的思考能力和棋艺，享受五子棋的乐趣。无论是在公交车上还是在家里，都可以随时随地进行五子棋的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a digger

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值