JavaScript id_JavaScript实现五子棋小游戏

更新时间：2020年10月26日 11:39:33 作者：布伽思索

这篇文章主要为大家详细介绍了JavaScript实现五子棋小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现五子棋小游戏的具体代码，供大家参考，具体内容如下

HTML部分


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>五子棋</title><style>* {padding: 0;margin: 0;}body{padding-top: 100px;}.main {width: 600px;height: 600px;margin: 0 auto;background-color: burlywood;}.col {position: relative;width: 40px;height: 40px;box-sizing: border-box;border: 1px solid #000;border-collapse: collapse;/*border-radius: 20px;*/}.row {position: relative;display: flex;height: 40px;/*background-color: brown;*/}.col-action {background-color: blue;}.col-actionA {/*background-color: white;*/}.col-actionB {/*background-color: black;*/}.col-actionA::before{content: "";position: absolute;width: 30px;height: 30px;background-color: white;border-radius: 99px;top:4.5px;left:4.5px;box-shadow: 0 0 2px rgba(0,0,0,);}.col-actionB::before{content: "";width: 30px;height: 30px;background-color: black;border-radius: 99px;position: absolute;top:4.5px;left:4.5px;box-shadow: 0 0 2px rgba(128,128,128,);}.hq{width: 600px;height: 600px;margin: 0 auto;}</style><script type="text/javascript" src="js/" ></script></head>
<body><div class="main"><div class="qipan"></div><div class="hq"><button>悔棋</button></div>
</div></body>
</html>

JavaSrcipt


window.onload = function(){var busz = new Array();//div单击事件var ansj = function () {const x = ("col");const y = ("row");
//  (x, y, nowPlayer)if (nowPlayer) {qjck[("row")][("col")] = 1;("col-actionA");nowPlayer = !nowPlayer;} else {qjck[("row")][("col")] = 2;("col-actionB");nowPlayer = !nowPlayer;}(this);var js = pdsl(y,x);if(js){setTimeout(function(){alert("游戏结束");(); //刷新浏览器},50);}this.onclick = null;}//判断是否结束var pdsl = function(x,y){var sx=1,zy=1,zs=1,ys=1,t=1;//上for(t=1;t<=5;t++){if(x-t < 0)break; ("上"+zy);if(qjck[x-t][y]==qjck[x][y] && qjck[x-t][y]!=0)sx++;elsebreak;}//下for(t=1;t<=5;t++){if(Number(x)+t >= 10)break;("下"+zy);if(qjck[Number(x)+t][y]==qjck[Number(x)][y] && qjck[Number(x)+t][y]!=0)sx++;elsebreak;}//左for(t=1;t<=5;t++){if(y-t < 0)break; ("左"+zy);if(qjck[x][y-t]==qjck[x][y] && qjck[x][y-t]!=0)zy++;elsebreak;}//右for(t=1;t<=5;t++){if(Number(y)+t >= 10)break;("右"+zy);if(qjck[x][Number(y)+t]==qjck[x][y] && qjck[x][Number(y)+t]!=0)zy++;elsebreak;}//上左for(t=1;t<=5;t++){if(x-t < 0)break; ("上左"+zy);if(qjck[x-t][y-t]==qjck[x][y] && qjck[x-t][y-t]!=0)zs++;elsebreak;} //下右for(t=1;t<=5;t++){if(Number(x)+t >= 10 || Number(y)+t >= 10)break; ("下右"+zy);if(qjck[Number(x)+t][Number(y)+t]==qjck[x][y] && qjck[Number(x)+t][Number(y)+t]!=0)zs++;elsebreak;}//上右for(t=1;t<=5;t++){if(x-t < 0 || Number(y)+t >= 10)break; ("上右"+zy);if(qjck[x-t][Number(y)+t]==qjck[x][y] && qjck[x-t][Number(y)+t]!=0)ys++;elsebreak;} //下左for(t=1;t<=5;t++){if(Number(x)+t >= 10 || y-t < 0)break; ("下右"+zy);if(qjck[Number(x)+t][y-t]==qjck[x][y] && qjck[Number(x)+t][y-t]!=0)ys++;elsebreak;}(sx + " " + zy + " " + zs + " " + ys);if(sx == 5 || zy==5 || zs==5 || ys==5)return true;elsereturn false;}var nowPlayer = 0;//棋盘数组var qjck = Array();//divvar piece = ("div");piece.id = "piece";//得到divvar qipan = ("qipan");//生成棋盘for (let r = 0; r < 15; r++) {let newrow = ("div");newrow.id = "row" + r;("row")let arrCol = Array()(arrCol)for (let c = 0; c < 15; c++) {(0)let newcol = ("div");newcol.id = "col" + c;("col");("row", r);("col", c)(newcol)newcol.onclick = ansj;}// (newrow)(newrow)}//悔棋var hq = ("hq");hq.onclick = function(){if(busz.length <= 0)return;var divt = ();divt.onclick = ansj;("col-actionA");("col-actionB");qjck[("row")][("col")] = 0;nowPlayer = !nowPlayer;// (qjck);(divt);}}

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏玩不停

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

文件上传插件SWFUpload的使用指南

本文主要介绍了文件上传插件SWFUpload使用指南,SWFUpload是一个flash和js相结合而成的文件上传插件，其功能非常强大。需要的朋友可以参考下

2016-11-11
浅谈layui 表单元素的选中问题

今天小编就为大家分享一篇浅谈layui 表单元素的选中问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

2019-10-10
js实现图片从左往右渐变切换效果的方法

这篇文章主要介绍了js实现图片从左往右渐变切换效果的方法,是比较典型的图片渐变切换效果特效,非常具有实用价值,需要的朋友可以参考下

2015-02-02
js实现自动播放匀速轮播图

这篇文章主要介绍了js实现自动播放匀速轮播图，带匀速运动函数封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

2020-02-02
JS中的eval 为什么加括号

JS中的eval 为什么加括号呢？相信很多朋友都不是很清楚吧，下面小编通过本教程帮助大家学习JS中的eval 为什么加括号，感兴趣的朋友了解下吧

2016-04-04
JavaScript模块模式实例详解

这篇文章主要介绍了JavaScript模块模式,结合实例形式详细分析了js模块模式的相关概念、功能、扩展等操作技巧,需要的朋友可以参考下

2017-10-10
ES6新数据结构Map功能与用法示例

这篇文章主要介绍了ES6新数据结构Map功能与用法,结合实例形式分析了Map的功能、使用方法及相关注意事项,需要的朋友可以参考下

2017-03-03

JavaScript id_JavaScript实现五子棋小游戏_javascript技巧相关推荐

php 连连看游戏开发,JavaScript编写连连看小游戏_javascript技巧
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开最终的效果 ...
前端实现五子棋小游戏2（AI实现人机对战）
通过一个简单的算法,来实现AI智能对弈的五子棋小游戏 AI难点解析赢法数组赢法的统计数组判断胜负计算机的落子规则代码实现赢法数组赢法种类的索引横线赢法竖线赢法横线赢法斜线赢法反 ...
基于flask的五子棋小游戏
基于flask的五子棋小游戏前言首先说明一下,本人方向是java后端,只因老师布置了一个作业,要用flask来做一个五子棋,没办法被逼上梁山,程序不太美观,但是应付作业还是够了的. 废话不 ...
java 五子棋项目_Java项目实现五子棋小游戏
本文实例为大家分享了Java实现五子棋小游戏的具体代码,供大家参考,具体内容如下项目名称五子棋小游戏项目描述可以改变获胜棋子数,率先连成棋数的人获胜代码实现测试类 public class ...
前端实现五子棋小游戏1（本地双人对战）
运用canvas写一个本地五子棋小游戏 HTML部分 JS 部分 CSS 部分实现效果 HTML部分 <!DOCTYPE html> <html lang="en&quo ...
Java编写的五子棋小游戏
看书的时候看到一个不完整的Java编写的一个五子棋小游戏,为了恢复一下编程能力刚刚把这个小程序完成了. 实现的功能很简单,两人对下五子棋,程序自动回判断输赢.在ubuntu下搞得,没有装什么高端的输入 ...
简单的5*5，五子棋小游戏
使用C语言简单的实现棋盘为5*5的五子棋小游戏,以下为源代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...
php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
基于 Blazor 开发五子棋小游戏
今天是农历五月初五,端午节.在此,祝大家端午安康! 端午节是中华民族古老的传统节日之一.端午也称端五,端阳.此外,端午节还有许多别称,如:午日节.重五节.五月节.浴兰节.女儿节.天中节.地腊.诗人节. ...

JavaScript id_JavaScript实现五子棋小游戏_javascript技巧

JavaScript id_JavaScript实现五子棋小游戏_javascript技巧相关推荐

最新文章

热门文章