js实现双人对战五子棋
2024-04-15 20:33:59
js实现双人对战五子棋
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>双人对战五子棋 - temptation</title><style type="text/css">#center{text-align:center;}table {border: 1px solid black;border-collapse: collapse;background-color: burlywood;margin:0 auto}td {border: 1px solid black;width: 40px;height: 40px;}</style><script type="text/javascript">// 需求：综合运用HTML、CSS、JavaScript，在页面中实现《两人对战五子棋》游戏// 五子棋的规则：// 1、页面上有棋盘（15 * 15），分为黑棋和白棋，黑棋先行// 2、横向、纵向、斜向，只要有5个连成直线的同色棋子，就算赢// 思路：获取当前落子棋子的坐标和颜色，寻找其周围横向、纵向、斜向是否能形成5个连续的同色子// 设置棋子初始颜色var currentColor = 'black';// 页面加载window.onload = function () {// 获取页面元素提示信息并赋值document.getElementById('spanColor').innerText = currentColor;// 获取页面元素棋盘表格var chessboard = document.getElementById('chessboard');// 绑定事件chessboard.onclick = function () {// console.log(this); // this指向的是table#chessboard
// console.log(event.target); // event.target指向的是发生点击事件的单元格td// 1、获取发生点击事件的单元格对象var obj = event.target;// 2、判断发生点击事件的单元格对象是否已经落子if (obj.style.backgroundColor == 'black' || obj.style.backgroundColor == 'white') {alert('该位置已经有棋子，不能再落子！');} else{// 3、修改其背景颜色obj.style.backgroundColor = currentColor;obj.style.borderRadius = '50%';// 4、创建当前棋子对象，提供给后续判断输赢使用// 考虑坐标(x, y)：(0, 0),...(0, 14),(1, 1),...(1, 14),...(14, 0),...(14, 14)var currentChess = {//cellIndex 属性可返回一行的单元格集合中单元格的位置。//rowIndex 属性返回某一行在表格的行集合中的位置（row index）x: obj.cellIndex,y: obj.parentNode.rowIndex,color: currentColor};// 5、设置赢的条件var flag = (currentColor == 'black' ? 'bbbbb' : 'wwwww');// 6、设置接下来落子的颜色var tempColor = currentColor;if (currentColor == 'black') {currentColor = 'white';} else{currentColor = 'black';}// 获取页面元素提示信息并赋值document.getElementById('spanColor').innerText = currentColor;// 7、判断输赢（其实就是查看坐标系中的棋子颜色情况）// 获取棋盘中所有的单元格对象，得到单元格数组var tdArr = document.getElementById('chessboard').getElementsByTagName('td');// 存储棋子位置的容器，四个字符串对应横向、竖向、左上右下斜向、右上左下斜向var result = ['', '', '', ''];// 遍历棋盘for (var i = 0; i < tdArr.length; i++) {// 初始化每一个位置对象var tempChess = {x: tdArr[i].cellIndex,y: tdArr[i].parentNode.rowIndex,color: '0' // 位置上无棋子};// 遍历时，如果该位置上有棋子，就修改color属性if (tdArr[i].style.backgroundColor == 'black') {tempChess.color = 'b';} else if (tdArr[i].style.backgroundColor == 'white') {tempChess.color = 'w';}// 遍历每一个位置 和 当前棋子进行比较//位于统一横线y为0，位于同一个竖线x为0// 位于同一横线上，例如：(0, 0), (1, 0), (5, 0)if (currentChess.y == tempChess.y) {result[0] += tempChess.color;}// 位于同一竖线上，例如：(0, 0), (0, 1), (0, 5)if (currentChess.x == tempChess.x) {result[1] += tempChess.color;}// 位于同一斜线上（左上至右下）// 例如：(0, 0), (1, 1), (2, 2)；// (0, 1), (1, 2), (2, 3);(0, 2), (1, 3), (2, 4);// (1, 0), (2, 1), (3, 2);(2, 0), (3, 1), (4, 2)；if ((currentChess.x - tempChess.x) == (currentChess.y - tempChess.y)) {result[2] += tempChess.color;}// 位于同一斜线上（右上至左下）// 例如：(14, 0), (13, 1), (12, 2);// (13, 0), (12, 1), (11, 2);(12, 0), (11, 1), (12, 2);// (14, 1), (13, 2), (12, 3);(14, 2), (13, 3), (12, 4);if ((currentChess.x + currentChess.y) == (tempChess.x + tempChess.y)) {result[3] += tempChess.color;}}// 遍历for (var i = 0; i < result.length; i++) {// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置if(result[i].indexOf(flag) >= 0) {if (tempColor == 'black') {alert('黑棋获胜！'); } else if (tempColor == 'white') {alert('白棋获胜！');}break;}}}};};</script></head><body><!-- <center> --><div id="center"><h3>双人对战五子棋</h3><div id="divMsg">落子者为：<span id="spanColor"></span></div><table id="chessboard"><tr><td> </td><td> </td><td> </td><td> </td><td> </td><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><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><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><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><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><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><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><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><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><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><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><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><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><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><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table></div><!-- </center> --></body>
</html>js实现双人对战五子棋相关推荐
- 400行代码实现双人对战五子棋(适合新手入门)
400行代码实现双人对战五子棋(适合新手入门) 跟上一篇博客一样,都是看了慕课网的视频之后写的学习记录,记录一下实现的思路,大部分内容比较简单,但也从中学到了很多东西. 按惯例首先看一下效果:(素材都 ...
- java双人对战五子棋（socket通信）
学习java的时候一直想要做出一个像样的小游戏,所以就动手做了一个远程联网对战的java五子棋小游戏.这个程序我前前后后也是改动了几次,这次发出来的是最终版本了,虽然还是有很多不足,但本人已经没有精力 ...
- C语言实现双人对战五子棋游戏
在编写五子棋游戏前首先对整个项目进行分析: 1.五子棋的界面绘制及显示 2.对输入的数据进行写入 3.判断输入的数据多对应的位置上是否可以下棋其中包括检测此位置是否为空及是否超出下棋的有效位置(越界超 ...
- Proteus 8.1 51单片机仿真双人对战五子棋
硬件需求: 内存需求较大,51单片机无法满足,因此需要扩展内存 Proteus需添加240X320的彩色液晶 实现功能如下: 1.通过按键选择下棋位置 2.无限悔棋 3.重新开始 黑白双方循环落子,黑 ...
- JAVA单机五子棋小游戏（双人对战版）
此代码为简单双人对战五子棋程序,不涉及算法游戏策略. 具有轮流出手,判断输赢,判断输入是否合法功能. 运行效果如图: import java.io.*; public class Gobang {// ...
- 用python做双人五子棋_基于python的socket实现单机五子棋到双人对战
基于python的socket实现单机五子棋到双人对战,供大家参考,具体内容如下 本次实验使用python语言.通过socket进行不同机器见的通信,具体可以分为以下四步:1.创建ServerSock ...
- Qt、C++实现五子棋人机对战与本地双人对战
1.基本介绍 软件基于Qt5.6.1,利用C++语言进行编写. 五子棋有两种游戏模式:人机对战和双人对战. 在进入游戏时玩家选择游戏模式. 选择人机对战玩家会执黑棋.电脑执白棋进行对决.选择双人对战会 ...
- 五子棋双人对战c语言课程设计,五子棋(双人对战) C语言课程设计.doc
五子棋(双人对战) C语言课程设计 C语言程序设计 题 目 五子棋(双人对战) 指导教师 曹东燕 学生姓名 夏文龙 于文杰 邢健 学 号 201000802032 201000802114 20100 ...
- c语言课程设计作业五子棋,C语言课程设计-五子棋双人对战程序
C语言课程设计-五子棋双人对战程序 C语言课程设计-五子棋双人对战程序|c语言程序代码编程小程序设计|c语言课程设计报告课程案例 /* 本程序在Turbo C或Borland C下编译通过 ...
- 使用EasyX实现简单的五子棋双人对战
基于Visual Stdio 2017 IDE,利用EasyX图形函数库工具搭建可视化图形操作界面.通过鼠标在图形界面上点击选子,实现了五子棋的双人对战小游戏. 本程序主体框架是从https://bl ...
最新文章
- 获取本机MSSQL保存凭证
- 不同表主键能相等吗_视频 |【搞机实验室】测血氧有啥，你见过能“开车”的表吗？...
- spring的aware学习
- Android之CSDN 牛人博客索引
- 胡椒“辣”味是怎样炼成的
- ElasticSearch入门篇
- 力扣1175.质数排列
- [USACO 07DEC]Best Cow Line, Gold
- Vue.js中this.$nextTick()的使用
- STC官方软件波特率计算器使用方法
- 故障处理 软件 需求_如何做软件FMEA？
- 高通平台Camera Dtsi解析
- android 主流分辨率是多少,Android程序开发设计主流屏幕分辨率介绍
- MATLAB实现支持向量机SVM分类简介
- C语言-实现对单循环链表中奇数和偶数结点的移动（前面奇数结点后面偶数结点）
- 服务器多网卡多路由策略
- python的实验报告大一心理_Python程序设计实验报告: 实验六
- 进程池(multiprocess.Pool)
- 30 款 IDEA 宝贝插件
- 康乃德生物拟最高募资1.8亿美元：产品尚未上市，累计亏损11亿元