js+html实现网页五子棋
更新时间：2022年05月06日 12:13:22 作者：CTGctgct
这篇文章主要为大家详细介绍了js+html实现网页五子棋，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js+html实现网页五子棋的具体代码，供大家参考，具体内容如下
最终效果图：
废话不多说，上源码：
<!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
}
</style>
<!--js-->
<script type="text/javascript">
var presentChess = 1;//当前执棋方，1代表白旗，0代表黑棋
var beginFlag = 0;//0代表未开始游戏，1代表已开始游戏
var msg;
var chessboard = new Array(10);//记录下棋情况
for (var i = 0; i < 10; i++) {
chessboard[i] = new Array(10);
//初始化下棋情况，全为0
for (var j = 0; j < 10; j++) {
chessboard[i][j] = -1;
}
}
window.onload = function () {
msg = document.getElementById('msg')
}
//返回三者最小值
function min(x, y, z) {
return (x > y ? y : x) > z ? z : (x > y ? y : x)
}
function beginGame() {
// beginFlag = 1;
//绑定棋盘下棋事件
for (var i = 0; i < 100; i++) {
document.getElementsByTagName('td')[i].onclick = palyChess;
}
}
function restartGame() {
for (var i = 0; i < 100; i++) {
//document.getElementsByTagName('td')[i].onclick = '';
document.getElementsByTagName('td')[i].innerHTML = '';//清空棋子
}
for (var i = 0; i < 10; i++) {//清空棋盘记录
for (var j = 0; j < 10; j++) {
chessboard[i][j] = -1;
}
}
}
//下棋
function palyChess() {
//如果表格此处已经下了棋，则返回 不作操作
text = this.innerHTML
if (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('黑棋方获胜');
presentChess = 0;
msg.innerHTML = "黑棋";
} else {
this.innerHTML = hqiStr;
chessboard[this.parentNode.rowIndex][this.cellIndex] = 0;
setTimeout('', 3000);
if (ifWin(this.parentNode.rowIndex, this.cellIndex))
if (presentChess == 1) alert('白棋方获胜');
else alert('黑棋方获胜');
presentChess = 1;
msg.innerHTML = "白棋";
}
}
//判断是否胜利,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>
<!--下部-->
<div>
<div style="float:left; width:120px">
</div>
<div style="margin:0 auto; 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>里面用到了4张图片，开始按钮图，重新开始按钮图，白棋子图，黑棋子图。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS实现向表格中动态添加行的方法,涉及javascript针对表格行的动态添加技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
JavaScript中SetInterval与setTimeout的用法详解
在写H5游戏时经常需要使用定时刷新页面实现动画效果，比较常用即setTimeout()以及setInterval()，但是大家对SetInterval与setTimeout的用法了解吗，下面通过本文给大家详解js中SetInterval与setTimeout的用法，需要的朋友参考下2015-11-11
这篇文章主要介绍了Fundebug支持监控微信小程序HTTP请求错误的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
不用一行代码和一句提示语就搞定整个表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了js实现带有介绍的Select列表菜单,涉及javascript页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
本文章为你提供一款js 返回变量的类型代码哦，如果你不懂得如何获取js变量的类型的话，看看我们下面的代码你就知道如何获取js变量的代码哦。2010-07-07
JS基于ES6新特性async await进行异步处理操作示例
这篇文章主要介绍了JS基于ES6新特性async await进行异步处理操作,结合实例形式分析了async await进行异步处理操作的相关原理、步骤与注意事项,需要的朋友可以参考下2019-02-02
javascript的数据类型可以分为两种：原始类型和引用类型，在此文给大家提到。本文主要给大家介绍javascript类型系统之基本数据类型与包装类型，涉及到js 基本类型 包装类相关知识，本文介绍的详细，具有参考借鉴价值，对本文感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了微信小程序基于数据库时间实现商品倒计时功能(可重用代码),代码很完整，拿来就可以使用，现在我把完整的代码分享给大家，需要的朋友可以参考下2022-07-07
JavaScript中的对象继承是构建灵活、可维护代码的关键部分,本文主要介绍了深度解析JavaScript对象继承,包括原型链继承、构造函数继承、组合继承等,感兴趣的可以了解一下2024-01-01
最新评论