原生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 相关文章推荐
JavaScript中链式调用之研习
Apr 07 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
javascript的push使用指南
Dec 05 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
关于Vue中axios的封装实例详解
Oct 20 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实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
php实现websocket实时消息推送
2018/03/30 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
详解angular中的作用域及继承
2017/05/31 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
财务管理专业自荐书
2014/09/02 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
Java完整实现记事本代码
2022/06/16 Java/Android