原生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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
vuex与组件联合使用的方法
May 10 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
JS实现按比例缩小图片宽高
Aug 24 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
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php分页查询的简单实现代码
2017/03/14 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
javaScript基础详解
2017/01/19 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
详解Python Socket网络编程
2016/01/05 Python
python3个性签名设计实现代码
2018/06/19 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
django将数组传递给前台模板的方法
2019/08/06 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
后勤园长自我鉴定
2013/10/17 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
个人自我鉴定总结
2014/03/25 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
Python获取字典中某个key的value
2022/04/13 Python