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同时提交多个Web表单的方法
Dec 26 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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
PHP 常用的header头部定义汇总
2015/06/19 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
javascript基础知识讲解
2017/01/11 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
python爬虫获取多页天涯帖子
2018/02/23 Python
详解小白之KMP算法及python实现
2019/04/04 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
python构造IP报文实例
2020/05/05 Python
python如何变换环境
2020/07/21 Python
金讯Java笔试题目
2013/06/18 面试题
Oracle的内存结构(Memory structures)
2015/06/10 面试题
学生感冒英文请假条
2014/02/04 职场文书
自动一体化专业求职信
2014/03/15 职场文书
产品质量承诺范本
2014/03/31 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
三下乡活动心得体会
2016/01/23 职场文书