JavaScript实现五子棋小游戏


Posted in Javascript onOctober 26, 2020

本文实例为大家分享了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,0.5);

 }
 .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,0.5);
 }
 
 .hq{
 width: 600px;
  height: 600px;
  margin: 0 auto;
 }

 </style>
 
 <script type="text/javascript" src="js/demo03.js" ></script>
 
</head>
<body>

<div class="main">
 
 <div class="qipan" id="qipan">


 </div>
 <div class="hq"><button id="hq">悔棋</button></div>
</div>

</body>
</html>

JavaSrcipt

window.onload = function(){
 
 var busz = new Array();
 
 //div单击事件
 var ansj = function () {
  
 const x = this.getAttribute("col");
 const y = this.getAttribute("row");
//  console.log(x, y, nowPlayer)
 
 if (nowPlayer) {
  qjck[this.getAttribute("row")][this.getAttribute("col")] = 1;
  this.classList.add("col-actionA");
  nowPlayer = !nowPlayer;
 } else {
  qjck[this.getAttribute("row")][this.getAttribute("col")] = 2;
  this.classList.add("col-actionB");
  nowPlayer = !nowPlayer;
 }
 
 busz.push(this);
 
 var js = pdsl(y,x);
 
 if(js)
 {
 setTimeout(function(){
 alert("游戏结束");
 location.reload(); //刷新浏览器
 
 },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; 
 
 console.log("上"+zy);
 if(qjck[x-t][y]==qjck[x][y] && qjck[x-t][y]!=0)
 sx++;
 else
 break;
 }
 
 //下
 for(t=1;t<=5;t++){
 
 if(Number(x)+t >= 10)
 break;
 
 console.log("下"+zy);
 if(qjck[Number(x)+t][y]==qjck[Number(x)][y] && qjck[Number(x)+t][y]!=0)
 sx++;
 else
 break;
 }
 
 //左
 for(t=1;t<=5;t++){
 
 if(y-t < 0)
 break; 
 
 console.log("左"+zy);
 if(qjck[x][y-t]==qjck[x][y] && qjck[x][y-t]!=0)
 zy++;
 else
 break;
 }
 
 //右
 for(t=1;t<=5;t++){
 
 if(Number(y)+t >= 10)
 break;
 
 console.log("右"+zy);
 if(qjck[x][Number(y)+t]==qjck[x][y] && qjck[x][Number(y)+t]!=0)
 zy++;
 else
 break;
 }
 
 //上左
 for(t=1;t<=5;t++){
 
 if(x-t < 0)
 break; 
 
 console.log("上左"+zy);
 if(qjck[x-t][y-t]==qjck[x][y] && qjck[x-t][y-t]!=0)
 zs++;
 else
 break;
 } 
 
 //下右
 for(t=1;t<=5;t++){
 
 if(Number(x)+t >= 10 || Number(y)+t >= 10)
 break; 
 
 console.log("下右"+zy);
 if(qjck[Number(x)+t][Number(y)+t]==qjck[x][y] && qjck[Number(x)+t][Number(y)+t]!=0)
 zs++;
 else
 break;
 }
 
 //上右
 for(t=1;t<=5;t++){
 
 if(x-t < 0 || Number(y)+t >= 10)
 break; 
 
 console.log("上右"+zy);
 if(qjck[x-t][Number(y)+t]==qjck[x][y] && qjck[x-t][Number(y)+t]!=0)
 ys++;
 else
 break;
 } 
 
 //下左
 for(t=1;t<=5;t++){
 
 if(Number(x)+t >= 10 || y-t < 0)
 break; 
 
 console.log("下右"+zy);
 if(qjck[Number(x)+t][y-t]==qjck[x][y] && qjck[Number(x)+t][y-t]!=0)
 ys++;
 else
 break;
 }
 
 
 console.log(sx + " " + zy + " " + zs + " " + ys);
 
 if(sx == 5 || zy==5 || zs==5 || ys==5)
 return true;
 else
 return false;
 
 }

 var nowPlayer = 0;

 //棋盘数组
 var qjck = Array();
 
 //div
 var piece = document.createElement("div");
 piece.id = "piece";

 //得到div
 var qipan = document.getElementById("qipan");

 //生成棋盘
 for (let r = 0; r < 15; r++) {
 let newrow = document.createElement("div");
 newrow.id = "row" + r;
 newrow.classList.add("row")

 let arrCol = Array()
 qjck.push(arrCol)

 for (let c = 0; c < 15; c++) {
  arrCol.push(0)
  let newcol = document.createElement("div");

  newcol.id = "col" + c;

  newcol.classList.add("col");

  newcol.setAttribute("row", r);
  newcol.setAttribute("col", c)
  newrow.appendChild(newcol)

  newcol.onclick = ansj;

 }


 // console.log(newrow)
 qipan.appendChild(newrow)
 }
 
 //悔棋
 var hq = document.getElementById("hq");
 
 hq.onclick = function(){
 
 if(busz.length <= 0)
 return;
 
 var divt = busz.pop();
 divt.onclick = ansj;
 
 divt.classList.remove("col-actionA");
 divt.classList.remove("col-actionB");
 
 qjck[divt.getAttribute("row")][divt.getAttribute("col")] = 0;
 
 nowPlayer = !nowPlayer;
 
// console.log(qjck);
 console.log(divt);
 }
 
 
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 #Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 #Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 #Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 #Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 #Javascript
jQuery实现简单评论区功能
Oct 26 #jQuery
vue.js封装switch开关组件的操作
Oct 26 #Javascript
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP 面向对象详解
2012/09/13 PHP
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
python处理json数据中的中文
2014/03/06 Python
Python中的高级数据结构详解
2015/03/27 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python 读取.nii格式图像实例
2020/07/01 Python
django跳转页面传参的实现
2020/09/17 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
招商经理岗位职责
2013/11/16 职场文书
优秀求职信
2014/05/29 职场文书
销售口号大全
2014/06/11 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
学习党史心得体会2016
2016/01/23 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android