js实战 网页五子棋进阶版
2024-05-19 19:53:48
对比上一版本增加了音效和计时器两个模块。
代码如下
<!doctype html>
<html>
<head><meta charset="utf-8"><title>五子棋</title><!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"/>-->
</head>
<!--css-->
<style>body {width: 800px;}#beginGameBtn {background: url(startImg.png);width: 80px;height: 25px;background-size: cover;float: left;}#restartGameBtn {background: url(restartImg.png);width: 80px;height: 25px;background-size: cover;float: right;}td {width: 50px;height: 50px;margin: 0px;padding: 0px}#timer {background:#000;float:left;width:150px;margin:30px;color: #00ff00;font-weight: bold;border-radius: 30px;text-align: center;font-size: 20px;}
</style><!--js-->
<script type="text/javascript">var presentChess = 1;//当前执棋方，1代表白旗，0代表黑棋var beginFlag = 0;//0代表未开始游戏，1代表已开始游戏var msg;var chessboard = new Array(10);//记录下棋情况var playChessSound;var timerM;//计时器 分var timerS;//计时器 秒var interval;for (var i = 0; i < 10; i++) {chessboard[i] = new Array(10);//初始化下棋情况，全为0for (var j = 0; j < 10; j++) {chessboard[i][j] = -1;}}window.onload = function () {msg = document.getElementById('msg')playChessSound = document.getElementById("playChessSound")timerM = document.getElementById('timerM')timerS = document.getElementById('timerS')timerS.innerText = 0;timerM.innerText = 0;}//返回三者最小值function min(x, y, z) {return (x > y ? y : x) > z ? z : (x > y ? y : x)}//计时函数function setTimer() {var m = parseInt(timerM.innerText);var s = parseInt(timerS.innerText);if (s >= 59) {timerS.innerText = 0;timerM.innerText = m + 1;} else timerS.innerText = s + 1;}function beginGame() {// beginFlag = 1;//绑定棋盘下棋事件for (var i = 0; i < 100; i++) {document.getElementsByTagName('td')[i].onclick = palyChess;}interval = setInterval(setTimer, 1000);}function restartGame() {for (var i = 0; i < 100; i++) {//document.getElementsByTagName('td')[i].onclick = '';document.getElementsByTagName('td')[i].innerHTML = '';//清空棋子timerS.innerText = 0;timerM.innerText = 0;}for (var i = 0; i < 10; i++) {//清空棋盘记录for (var j = 0; j < 10; j++) {chessboard[i][j] = -1;}}//计时器部分clearInterval(interval)interval = setInterval(setTimer, 1000);}//下棋function palyChess() {//如果表格此处已经下了棋，则返回 不作操作text = this.innerHTMLif (text != '') return;//放置棋子图片得字符串var bqiStr = "<img src=\"bqiImg.jpg\" width=\"100%\" height=\"90%\" alt=\"\"/>"var hqiStr = "<img src=\"hqiImg.jpg\" width=\"100%\" height=\"90%\" alt=\"\"/>"// console.log('1')if (presentChess == 1) {this.innerHTML = bqiStr;chessboard[this.parentNode.rowIndex][this.cellIndex] = 1;// setTimeout('', 3000);if (ifWin(this.parentNode.rowIndex, this.cellIndex)) {if (presentChess == 1) alert('白棋方获胜');else alert('黑棋方获胜');clearInterval(interval);}presentChess = 0;msg.innerHTML = "黑棋";playChessSound.play();} else {this.innerHTML = hqiStr;chessboard[this.parentNode.rowIndex][this.cellIndex] = 0;if (ifWin(this.parentNode.rowIndex, this.cellIndex)) {if (presentChess == 1) alert('白棋方获胜');else alert('黑棋方获胜');clearInterval(interval);}presentChess = 1;msg.innerHTML = "白棋";playChessSound.play();}}//判断是否胜利,h行，l列function ifWin(h, l) {// var x = this.parentNode.rowIndex;// var y = this.cellIndex - 1;var s = 1;//记录连子个数//判断竖直方向for (var i = 1; i <= (h > 4 ? 4 : h); i++) {if (chessboard[h - i][l] == presentChess) {s++;} else break;}for (var i = 1; i <= ((9 - h) > 4 ? 4 : (9 - h)); i++) {if (chessboard[h + i][l] == presentChess) {s++;} else break;}if (s >= 5) {return 1;}s = 1;//判断水平方向for (var i = 1; i <= (l > 4 ? 4 : l); i++) {if (chessboard[h][l - i] == presentChess) {s++;} else break;}for (var i = 1; i <= ((9 - l) > 4 ? 4 : (9 - l)); i++) {if (chessboard[h][l + i] == presentChess) {s++;} else break;}if (s >= 5) {return 1;}s = 1;// var min=(h > 4 ? 4 : h) > l ? l : (h > 4 ? 4 : h);//判断左上、右下斜线方向for (var i = 1; i <= min(4, l, h); i++) {//取较小值作为移动半径if (chessboard[h - i][l - i] == presentChess) {s++;} else break;}for (var i = 1; i <= min(4, 9 - l, 9 - h); i++) {if (chessboard[h + i][l + i] == presentChess) {s++;} else break;}if (s >= 5) {return 1;}s = 1;//判断右上、左下斜线方向for (var i = 1; i <= min(4, 9 - l, h); i++) {//取较小值作为移动半径if (chessboard[h - i][l + i] == presentChess) {s++;} else break;}for (var i = 1; i <= min(4, l, 9 - h); i++) {if (chessboard[h + i][l - i] == presentChess) {s++;} else break;}if (s >= 5) {return 1;}return 0;}
</script>
<body>
<!--顶部-->
<div><div style="margin:0 auto; width:165px"><!--开始游戏按钮--><button id="beginGameBtn" name="beginGameBtn" onclick="beginGame()"></button><!--重新开始游戏按钮--><button id="restartGameBtn" name="restartGameBtn" onclick="restartGame()"></button></div><div style="margin:0 auto; width:150px">执子方：<label id="msg" name="msg">白棋</label></div>
</div>
<br>
<!--音效控制-->
<audio id="playChessSound"><source src="5390.mp3">
</audio>
<!--下部-->
<div><!--左边计时器--><div id="timer" style="">比赛已进行<br><span ><span id="timerM"></span>分<span id="timerS"></span>秒</span></div><div style="float:left; width:500px "><!--表格构成棋盘--><table border="5" style="width:500px; height:500px; border-collapse:collapse; "><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></div>
</div>
</body>
</html>
音效请自行找取下载
js实战 网页五子棋进阶版相关推荐
- 五子棋-进阶版：C#窗体编写
1.0版:C#窗体程序编写 • [五子棋] 进阶内容,主要有 悔棋 功能,和 棋盘下满 时的处理 友情提示:先了解之前的 1.0版五子棋 No1.悔棋 第一步.定义一个列表(用于记录下棋顺序) // ...
- C语言五子棋进阶版（增设玩家对战，大棋盘，棋盘行列对应等）
经过好多天的编写,五子棋项目总算完成,作为一个学了不是很久的小白,我在编写过程中也遇到了许多困难,但还好都解决了,在此我建议和我一样,是小白的都应该写写五子棋或三子棋,当然,不是全抄别人的代码,也不是 ...
- 前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来 进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
- 深度学习实战13(进阶版)-文本纠错功能，经常写错别字的小伙伴的福星
大家好,我是微学AI,我们在日常生活中,经常会写一些文稿,比如:会议纪要,周报,日报,汇报材料,这些文稿里我们会发现有时候出现拼写.语法.标点等错误:其中拼写错误的错别字占大部分. 经过初步统计:在微 ...
- 全新升级，《区块链技术进阶与实战（第2版）》正式上市
(第 1 版亮相央视新闻联播) 2018 年下半年,浙江大学计算机学院首次推出"区块链与数字货币"课程.作为课程指定教材,<区块链技术进阶与实战(第1版)>面向广大区块 ...
- 深度学习实战22(进阶版)-AI漫画视频生成模型，做自己的漫画视频
大家好,我是微学AI,今天给大家带来深度学习实战22(进阶版)-AI漫画视频生成模型. 回顾之前给大家介绍了<深度学习实战8-生活照片转化漫画照片应用>,今天我借助这篇文章的原理做一个AI ...
- 深度学习实战14(进阶版)-手写文字OCR识别，手写笔记也可以识别了
大家好,我是微学AI,今天给大家带来手写OCR识别的项目.手写的文稿在日常生活中较为常见,比如笔记.会议记录,合同签名.手写书信等,手写体的文字到处都有,所以针对手写体识别也是有较大的需求.目前手写体 ...
- 网页版2048html制作,基于HTML+CSS+JS的网页版2048的实现
ELECTRONICS WORLD·j6: 雾 与 粤 赛 基 于HTM L+CSS+J S的网页:I~2 048的实现 [摘要 ]描述了一个使用HTML和css进行uI界面设计,使用Js进行后台逻辑 ...
- 网页版2048html制作,基于HTML＋CSS＋JS的网页版2048的实现.pdf
ELECTRONICS WORLD ・探索与观察 基于HTML+CSS+JS的网页版2048的实现 山西农业大学 王艺燕 [摘要] 描述了一个使用HTML和CSS进行UI界面设计,使用JS进行后台逻辑 ...
最新文章
- CF660C Hard Process（尺取法）
- 【深度学习】如何从结构出发更好的改进一个神经网络（二）
- 【PMCAFF大咖分享会】揭秘大数据驱动下的京东供应链体系
- Hibernate 学习-1
- （53）Xilinx时钟原语-BUG与IBUFG（第11天）
- libuv tcp client
- 详解Java中ArrayList、Vector、LinkedList三者的异同点
- 常见的几种索引扫描类型
- 论文解读——An Analysis of Scale Invariance in Object Detection – SNIP
- gatewayfilter详解_Spring Cloud Gateway 之 Filter
- S5P4418iNand清空方法
- UML之旅店预订系统
- 0102Linux基础命令
- 休闲零食生产企业如何做好供应链管理？
- 怎样为程序员做职业规划
- 腾讯云服务器TencentOS镜像操作系统评测及常见问题解答
- 重温离散数学系列①之什么是证明
- 域名系统几类服务器,域名系统
- 2021年焊工（技师）考试资料及焊工（技师）模拟试题
- ultraiso软碟通注册码