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 canvas绘制五子棋的棋盘
本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow blur spread color inset: h-shadow: (必须)阴影的水平偏移量,如果是正值,则阴影在元素块右边:如果是负值,则阴影在元素块左边. v-shadow: (必须)阴影的垂直偏移量,如果是正值,则阴影在元素块底部:如果是负值,则阴影在元素块顶部. blur: (可选)阴影
-
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五
-
node.js利用socket.io实现多人在线匹配联机五子棋
项目地址,已上传github --> client端使用简单的h5+js实现了棋局的总体布局. server端使用node的socket.io模块与客户端进行数据交互,棋子的落点和输赢校验均是在server端完成. 五子棋ui界面请见.. client端的界面这里就不做过多解释了,只要稍微懂点h5就可以自行去这里 下载源代码观看,因为今天的主题主要是socket.io这一块,所以本章只概述client和server是如何通过tcp连接进行交互的. 首先先带大家看一下目录结构 | server.j
-
js数组案例之五子棋游戏
本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下 一.效果图 二.设计思路 第一步:创建棋盘,生成棋盘所对应的数组坐标.第二步:鼠标点击当前位置返回当前点的坐标.第三步:生成对应的棋子.第四步:添加悔棋.重新开始事件.第五步:设置棋子输赢,若某个棋子五个连成一条线,则该棋子赢. 三.核心代码 //1.创建棋盘 var item = document.querySelector(".item-map"); var itemchild = document.que
-
基于JavaScript实现五子棋游戏
本文实例为大家分享了js实现五子棋的具体代码,供大家参考,具体内容如下 思路: 1.先用canvas画五子棋的棋盘 2.获取鼠标点击的位置 3.根据鼠标点击的位置判断,并画棋子 4.根据下的棋子判断是否赢了 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>
-
纯JS实现五子棋游戏兼容各浏览器(附源码)
纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
-
JavaScript+canvas实现五子棋游戏
本文实例为大家分享了JavaScript+canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 效果截图: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
-
Node.js+Socket.io实现双人在线五子棋对战
本文实例为大家分享了Node.js+Socket.io实现双人在线五子棋对战的具体代码,供大家参考,具体内容如下 笔者建议读者在尝试写程序之前要先确保电脑已经安装了Node.js和NPM,一般两者都是在一块安装,五子棋程序的服务器端使用Node.js写的,不多说了,直接上代码. 服务器端代码:socket.js var app = require('http').createServer(handler) var io = require('socket.io')(app); var fs =
-
js实现网页五子棋进阶版
本文实例为大家分享了js实现网页五子棋进阶版的具体代码,供大家参考,具体内容如下 对比上一版本增加了音效和计时器两个模块. 代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>五子棋</title> <!-- <script src="https://cdn.staticfile.org
-
H5+C3+JS实现五子棋游戏（AI篇）
本文实例为大家分享了H5+C3+JS实现五子棋游戏的具体代码,供大家参考,具体内容如下 新增全局变量 <script> //所有赢法总和 var count = 0; //容纳所有赢法的三维数组 var allWin = []; for(var i =0; i <15; i++){ allWin[i] = []; for(var j=0; j <15; j++){ allWin[i][j] = []; } } //横线赢法 for(var i =0; i <15; i++){