JavaScript
搜索
分类

原生js实现五子棋游戏

作者：阿布的小布 时间：2024-06-18 03:22:13　

本文实例为大家分享了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>

来源：https://blog.csdn.net/weixin_44038355/article/details/84944060

标签：js,五子棋
0
投稿

猜你喜欢

  • msxml3.dll (0x80070005)拒绝访问　解决方法

    2010-03-11 21:26:00

  • Windows 8.1下MySQL5.7 忘记root 密码的解决方法

    2024-01-27 22:16:16

  • python交互式图形编程实例（一）

    2022-11-12 14:44:53

  • MySQL 学习总结 之 初步了解 InnoDB 存储引擎的架构设计

    2024-01-26 10:15:38

  • Python 统计Jira的bug 并发送邮件功能

    2021-03-24 05:44:24

  • pandas 取出表中一列数据所有的值并转换为array类型的方法

    2023-10-04 15:12:52

  • Python聚类算法之基本K均值实例详解

    2023-07-14 12:49:08

  • 如何使用python把ppt转换成pdf

    2022-09-20 14:27:14

  • Python内置的字符串处理函数整理

    2023-01-08 19:00:35

  • termux中matplotlib无法显示中文问题的解决方法

    2022-12-16 00:07:16

  • Python代码使用 Pyftpdlib实现FTP服务器功能

    2022-02-11 16:40:55

  • python实现画桃心表白

    2021-05-14 16:27:00

  • asp自动补全html标签自动闭合(正则表达式)

    2013-06-01 20:01:59

  • Python如何把字典写入到CSV文件的方法示例

    2021-04-02 08:27:52

  • python GUI模拟实现计算器

    2023-01-08 22:20:40

  • 从django的中间件直接返回请求的方法

    2022-02-04 23:32:23

  • 利用python在大量数据文件下删除某一行的例子

    2023-08-24 09:15:22

  • 什么是python的函数体

    2022-07-29 22:09:32

  • python将多个文本文件合并为一个文本的代码（便于搜索）

    2021-10-23 07:21:27

  • python支持多线程的爬虫实例

    2022-01-08 05:02:56
    • asp之家 网络编程 m.aspxhome.com