简单五子棋

临叮当

已于 2022-07-25 14:55:07 修改

阅读量135

点赞数

文章标签： javascript

于 2022-07-22 14:50:43 首次发布

本文链接：https://blog.csdn.net/weixin_50751685/article/details/125932324

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           body {
               background-color: darksalmon;
           }

           .wuziqi {
               position: relative;
           }

           .heizi {
               width: 50px;
               height: 50px;
               background-color: black;
               border-radius: 50%;
               position: absolute;
               left: 200px;
               top: 200px;
           }

           .baizi {
               width: 50px;
               height: 50px;
               background-color: white;
               border-radius: 50%;
               position: absolute;
               left: 200px;
               top: 300px;
           }

           .zhanshi {
               width: 450px;
               height: 450px;
               border: 2px solid blueviolet;
               position: absolute;
               left: 500px;
               top: 100px;
           }

           .zhanshigezi {
               width: 50px;
               height: 50px;
               border: 1px solid blue;
               box-sizing: border-box;
               float: left;
           }

           .max {
               width: 500px;
               height: 500px;
               border: 2px solid black;
               position: absolute;
               left: 475px;
               top: 75px;
           }

           .maxgezi {
               width: 50px;
               height: 50px;
               box-sizing: border-box;
               float: left;
           }

           .xiaohei {
               width: 50px;
               height: 50px;
               background-color: black;
               border-radius: 50%;
           }

           .xiaobai {
               width: 50px;
               height: 50px;
               background-color: white;
               border-radius: 50%;
           }
       </style>
   </head>
   <body>
       <div class="wuziqi">
           <div class="heizi qizi" draggable="true"></div>
           <div class="baizi qizi" draggable="true"></div>
           <div class="zhanshi"></div>
           <div class="max"></div>
       </div>
   </body>
   <script type="text/javascript">
       let heizi = document.querySelector(".heizi");
       let max = document.querySelector(".max");
       let zhanshi = document.querySelector(".zhanshi");
       let xx;

       for (let a = 0; a < 100; a++) {
           max.innerHTML += "<div class='maxgezi'></div>"; //循环一百个maxgezi，也就是最外层的格子
       }
       for (let b = 0; b < 81; b++) {
           zhanshi.innerHTML += "<div class='zhanshigezi'></div>" //循环81个里面的格子
       }

               heng();
               shu();
               zuo();
               you();
           }
       })

       function heng() {
           maxgezi.forEach((each, index) => {
               if (each.innerHTML == "") {
                   return;
               }
               let num = 0;
               if (index % 10 > 5) {
                   return;
               }
               let yy = maxgezi[index].innerHTML;

               panduan(yy, maxgezi[index + 1].innerHTML);
               panduan(yy, maxgezi[index + 2].innerHTML);
               panduan(yy, maxgezi[index + 3].innerHTML);
               panduan(yy, maxgezi[index + 4].innerHTML);

       function shu() {
           maxgezi.forEach((each, index) => {
               if (each.innerHTML == "") {
                   return;
               }
               let num = 0;
               if (index > 59) {
                   return;
               }
               let yy = maxgezi[index].innerHTML;

               panduan(yy, maxgezi[index + 10].innerHTML);
               panduan(yy, maxgezi[index + 20].innerHTML);
               panduan(yy, maxgezi[index + 30].innerHTML);
               panduan(yy, maxgezi[index + 40].innerHTML);

       function zuo() {
           maxgezi.forEach((each, index) => {
               if (each.innerHTML == "") {
                   return;
               }
               let num = 0;
               if ((index + 9) % 10 < 3 || (index + 9) % 10 == 9 || index > 59) {
                   return;
               }
               let yy = maxgezi[index].innerHTML;

               panduan(yy, maxgezi[index + 9].innerHTML);
               panduan(yy, maxgezi[index + 18].innerHTML);
               panduan(yy, maxgezi[index + 27].innerHTML);
               panduan(yy, maxgezi[index + 36].innerHTML);