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高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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中使用GD库创建圆形饼图的例子
2014/11/19 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
python面向对象 反射原理解析
2019/08/12 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
前台接待员岗位职责
2014/01/02 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS