原生js实现五子棋游戏


Posted in Javascript onMay 28, 2020

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

html:

<body>
 <h2>五子棋游戏</h2>
 <div id="box">
  <div id="box01"></div>
  <div id="box02">haha</div>
 </div>
</body>

css:

<style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   /*overflow: hidden;*/
   margin-top: 10px;
   text-align: center;
   background-color: #C7C7C7;
  }
  #box{
   position: relative;
   border: 1px solid;
   margin: 20px auto;
   width: 546px;
   height: 546px;
   background-color: #C7C7C7;
  }
  #box .squre{
   width: 40px;
   height: 40px;
   border: 1px solid;
   float: left;
  }
  #box01 .squre:hover{
   background-color: pink;
  }
  #box01{
   position: absolute;
   /*border: 1px solid;*/
   margin: 0 auto;
   width: 588px;
   height: 588px;
   /*background-color: pink;*/
   /*opacity: 0.5;*/
   top: -20px;
   left: -20px;
  }
  #box01 .qz{
   width: 30px;
   height: 30px;
   border: 1px solid #C7C7C7;
   float: left;
   border-radius: 50%;
   margin: 5px;
  }
  #box01 .qz:hover{
   background-color: pink;
  }
  #box02{
   position: absolute;
   line-height: 546px;
   font-size: 50px;
   color: black;
   width: 100%;
   background-color: pink;
   display: none;
   opacity: 0.6;
  }
</style>

script:

<script type="text/javascript">
  window.onload = function () {
   let box = document.getElementById("box");
   let box01 = document.getElementById("box01");
   //画棋盘
   let arr = new Array();
   for (let i=0;i<13;i++){
    arr[i] = new Array();
    for (let j=0;j<13;j++){
     arr[i][j] = document.createElement("div");
     arr[i][j].className = "squre";
     box.appendChild(arr[i][j]);
    }
   }
   //画棋子
   let arr01 = new Array();
   for (let i=0;i<14;i++){
    arr01[i] = new Array();
    for (let j=0;j<14;j++){
     arr01[i][j] = document.createElement("div");
     arr01[i][j].className = "qz";
     box01.appendChild(arr01[i][j]);
    }
   }
   for (let m=0;m<14;m++){
    for (let n=0;n<14;n++){
     arr01[m][n].onclick = function () {
      //下棋之前统计一下黑白棋的个数,以便黑白交换下棋
      let count = 0;
      for (let l = 0; l < 14; l++) {
       for (let k = 0; k < 14; k++){
        if (arr01[l][k].style.backgroundColor != "") {
         count++;
        }
       }
      }
      // console.log(count);
      if (this.className == "qz" && count % 2 == 0 && this.style.backgroundColor == "") {
       //下棋
       this.style.backgroundColor = "black";
       //引入判断函数
       // console.log(m,n);
       checkGame(m, n);

      } else if (this.className == "qz" && count % 2 != 0 && this.style.backgroundColor == "") {
       //下棋
       this.style.backgroundColor = "white";
       //引入判断函数
       checkGame(m, n);
      }
     }
    }
   }

   //判断哪方输赢,四个方向(横向、纵向、左斜、右斜)
   //m是y轴,n是x轴
   let a,b;
   let flag = 0;
   let box02 = document.getElementById("box02");
   function checkGame(a,b) {
    //判断横向
    let qzColor = arr01[a][b].style.backgroundColor;
    // console.log(qzColor);
    for (let k=(b-4);k<=(b+4);k++){
     if (k>=0 && k < 14){
      if (qzColor == arr01[a][k].style.backgroundColor && arr01[a][k].style.backgroundColor != ""){
       flag++;
       if (flag == 5){
        // alert(qzColor+" win!!");
        box02.innerHTML = qzColor+" win!!";
        box02.style.display = "block";
       }
      } else {
       flag = 0;
      }
     } else {
      flag = 0;
     }
    }

    //判断纵向
    for (let k=(a-4);k<=(a+4);k++){
     if (k>=0 && k < 14){
      if (qzColor == arr01[k][b].style.backgroundColor && arr01[k][b].style.backgroundColor != ""){
       flag++;
       if (flag == 5){
        // alert(qzColor+" win!!");
        box02.innerHTML = qzColor+" win!!";
        box02.style.display = "block";
       }
      } else {
       flag = 0;
      }
     } else {
      flag = 0;
     }
    }

    //判断左斜
    let ax = (a-4);//ax用来记录横坐标的变化
    for (let k=(b-4);k<=(b+4);k++){
     if (k>=0 && k < 14 && ax>=0 && ax<14){
      if (qzColor == arr01[ax][k].style.backgroundColor && arr01[ax][k].style.backgroundColor != ""){
       flag++;
       if (flag == 5){
        // alert(qzColor+" win!!");
        box02.innerHTML = qzColor+" win!!";
        box02.style.display = "block";
       }
      } else {
       flag = 0;
      }
     } else {
      flag = 0;
     }
     ax++;
    }

    //判断右斜
    bx = a-4;
    for (let k=(b+4);k>=(b-4);k--){
     if (k>=0 && k < 14 && bx>=0 && bx<14){
      if (qzColor == arr01[bx][k].style.backgroundColor && arr01[bx][k].style.backgroundColor != ""){
       flag++;
       if (flag == 5){
        // alert(qzColor+" win!!");
        box02.innerHTML = qzColor+" win!!";
        box02.style.display = "block";
       }
      } else {
       flag = 0;
      }
     } else {
      flag = 0;
     }
     bx++;
    }
   }
  }
</script>

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

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

Javascript 相关文章推荐
jquery插件开发方法(初学者)
Feb 03 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
Vue微信公众号网页分享的示例代码
May 28 #Javascript
纯JS实现五子棋游戏
May 28 #Javascript
js实现简单五子棋游戏
May 28 #Javascript
js实现双人五子棋小游戏
May 28 #Javascript
vue实现五子棋游戏
May 28 #Javascript
用vue 实现手机触屏滑动功能
May 28 #Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
You might like
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
php压缩文件夹最新版
2018/07/18 PHP
php swoft框架实例用法
2020/12/22 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
vue resource发送请求的几种方式
2019/09/30 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python从零开始创建区块链
2018/03/06 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
pow在python中的含义及用法
2019/07/11 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
施工安全协议书
2013/12/11 职场文书
村委会主任先进事迹
2014/01/15 职场文书
投标邀请书范文
2014/01/31 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
职工小家建设活动方案
2014/08/25 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript