JavaScript实现网页版五子棋游戏

2024-04-02 19:04:59 177人浏览薄情痞子

摘要

本文实例为大家分享了javascript实现网页版五子棋游戏的具体代码，供大家参考，具体内容如下学习js的第三天，跟着老师完成的五子棋小游戏，记录学习成果欢迎大佬们一起分享经验，批

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

学习 js的第三天，跟着老师完成的五子棋小游戏，记录学习成果欢迎大佬们一起分享经验，批评指正。

本程序主要通过三部分实现：

1.棋盘绘制
2.鼠标交互
3.输赢判断

<!DOCTYPE html>
<html>
<head>
  <title>
    canvastest
    </title>
</head>
<body>
     <h1> canvas</h1>
     <canvas id="canvas"width="400"height="400">
     </canvas>

     <script src="https://cdn.bootcdn.net/ajax/libs/Jquery/3.6.0/jquery.js"></script>

  <script>
   var canv=document.getElementById("canvas");
   var ctx=canv.getContext("2d");
   ctx.strokeStyle="black";
   var bow=0;

//画出棋盘；
var matrix=[

  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                                              ];

ctx.beginPath();

for(var i=0;i<19;i++){

       ctx.moveTo(10+20*i,10);
       ctx.lineTo(10+i*20,370);
       ctx.moveTo(10,20*i+10);
       ctx.lineTo(370,i*20+10);

}
 ctx.stroke();
 
 //鼠标交互；
  $("#canvas").click(function(event)
      {
      console.log(event.offsetX)


      console.log(bow);
      var arcPosX,arcPosY;
     var mtxPosX,mtxPosY;
      for(var x=0;x<19;x++)
      {
      if((Math.abs(event.offsetX-(10+x*20)))<10)
        {
       arcPosX=10+x*20;
       mtxPosX=x;
        }
      if((Math.abs(event.offsetY-(10+x*20)))<10)
         {
        arcPosY=10+x*20;
        mtxPosY=x;
          }
      }

      if(matrix[mtxPosX][mtxPosY] == 0)
      {
      bow=!bow;
      ctx.beginPath();
      if(bow){

      ctx.fillStyle="Black";
      ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false);
      matrix[mtxPosX][mtxPosY]=1;
      }
      else{
      ctx.fillStyle="White";
      ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false);
      ctx.stroke();
      matrix[mtxPosX][mtxPosY]=2;
      }
      ctx.fill();
      }
      //实现输赢判断
      var winFlag=0;
if(winFlag==0){
if(matrix[mtxPosX-1][mtxPosY] == matrix[mtxPosX][mtxPosY])
              {
               if(matrix[mtxPosX-2][mtxPosY] == matrix[mtxPosX][mtxPosY])
               {
                if(matrix[mtxPosX-3][mtxPosY] == matrix[mtxPosX][mtxPosY])
                {
                 if(matrix[mtxPosX-4][mtxPosY] == matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 1;
                 }
                 else
                 {
                  if(matrix[mtxPosX+1][mtxPosY] == matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 1;
                  }
                  else
                  {
                   winFlag = 0;
                  }
                 }
                }
                else
                {
                 for(var w = 0; w < 2 ; w ++)
                 {
                  if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   break;
                  }
                  else
                  {
                   winFlag = 1;
                  }
                 }
                }
               }
               else
               {
                for(var w = 0; w < 3 ; w ++)
                {
                 if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 0;
                  break;
                 }
                 else
                 {
                  winFlag = 1;
                 }
                }
               }
              }
              else
              {
               for(var w = 0; w < 4 ; w ++)
               {
                if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY])
                {
                 winFlag = 0;
                 break;
                }
                else
                {
                 winFlag = 1;
                }
               }
              }

if(matrix[mtxPosX][mtxPosY-1] == matrix[mtxPosX][mtxPosY])
              {
               if(matrix[mtxPosX][mtxPosY-2] == matrix[mtxPosX][mtxPosY])
               {
                if(matrix[mtxPosX][mtxPosY-3] == matrix[mtxPosX][mtxPosY])
                {
                 if(matrix[mtxPosX][mtxPosY-4] == matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 1;
                 }
                 else
                 {
                  if(matrix[mtxPosX][mtxPosY+1] == matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 1;
                  }
                  else
                  {
                   winFlag = 0;
                  }
                 }
                }
                else
                {
                 for(var w = 0; w < 2 ; w ++)
                 {
                  if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   break;
                  }
                  else
                  {
                   winFlag = 1;
                  }
                 }
                }
               }
               else
               {
                for(var w = 0; w < 3 ; w ++)
                {
                 if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 0;
                  break;
                 }
                 else
                 {
                  winFlag = 1;
                 }
                }
               }
                         }
              else
              {
               for(var w = 0; w < 4 ; w ++)
               {
                if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                {
                 winFlag = 0;
                 break;
                }
                else
                {
                 winFlag = 1;
                }
               }
              }

  if(matrix[mtxPosX-1][mtxPosY-1] == matrix[mtxPosX][mtxPosY])
                {
                 if(matrix[mtxPosX-2][mtxPosY-2] == matrix[mtxPosX][mtxPosY])
                 {
                  if(matrix[mtxPosX-3][mtxPosY-3] == matrix[mtxPosX][mtxPosY])
                  {
                   if(matrix[mtxPosX-4][mtxPosY-4] == matrix[mtxPosX][mtxPosY])
                   {
                    winFlag = 1;
                   }
                   else
                   {
                    if(matrix[mtxPosX+1][mtxPosY+1] == matrix[mtxPosX][mtxPosY])
                    {
                     winFlag = 1;
                    }
                    else
                    {
                     winFlag = 0;
                    }
                   }
                  }
                  else
                  {
                   for(var w = 0; w < 2 ; w ++)
                   {
                    if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                    {
                     winFlag = 0;
                     break;
                    }
                    else
                    {
                     winFlag = 1;
                    }
                   }
                  }
                 }
                 else
                 {
                  for(var w = 0; w < 3 ; w ++)
                  {
                   if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                   {
                    winFlag = 0;
                    break;
                   }
                   else
                   {
                    winFlag = 1;
                   }
                  }
                 }
                }
                else
                {
                 for(var w = 0; w < 4 ; w ++)
                 {
                  if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   break;
                  }
                  else
                  {
                   winFlag = 1;
                  }
                 }
              }

   if(matrix[mtxPosX-1][mtxPosY+1] == matrix[mtxPosX][mtxPosY])
              {
               if(matrix[mtxPosX-2][mtxPosY+2] == matrix[mtxPosX][mtxPosY])
               {
                if(matrix[mtxPosX-3][mtxPosY+3] == matrix[mtxPosX][mtxPosY])
                {
                 if(matrix[mtxPosX-4][mtxPosY+4] == matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 1;
                 }
                 else
                 {
                  if(matrix[mtxPosX+1][mtxPosY-1] != matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                  }
                  else
                  {
                   winFlag = 1;
                  }
                 }
                }
                else
                {
                 for(var w = 0; w < 2 ; w ++)
                 {
                  if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   break;
                  }
                  else
                  {
                   winFlag = 1;
                  }
                 }
                }
               }
               else
               {
                for(var w = 0; w < 3 ; w ++)
                {
                 if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 0;
                  break;
                 }
                 else
                 {
                  winFlag = 1;
                 }
                }
               }
              }
              else
              {
               for(var w = 0; w < 4 ; w ++)
               {
                if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY])
                {
                 winFlag = 0;
                 break;
                }
                else
                {
                 winFlag = 1;
                }
               }
              }
    }
              if(winFlag ==1){
         if(bow)
         alert("black win!");
         else
                         alert("white win!");
              }
      });

  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript实现网页版五子棋游戏

本文链接: https://www.lsjlt.com/news/131312.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript实现网页版五子棋游戏

本文实例为大家分享了JavaScript实现网页版五子棋游戏的具体代码，供大家参考，具体内容如下学习js的第三天，跟着老师完成的五子棋小游戏，记录学习成果欢迎大佬们一起分享经验，批...

99+

2024-04-02
JavaScript实现网页版的五子棋游戏

本文实例为大家分享了JavaScript实现网页版五子棋游戏的具体代码，供大家参考，具体内容如下根据毕老师的HTML+CSS+JavaScript教程和下载的一些文档介绍自己在手机...

99+

2024-04-02
JavaScript如何实现网页版五子棋游戏

这篇文章将为大家详细讲解有关JavaScript如何实现网页版五子棋游戏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。本程序主要通过三部分实现：棋盘绘制2.鼠标交互3.输赢判断<!DOCTYPE&n...

99+

2023-06-20
JavaScript实现网页五子棋小游戏

本文实例为大家分享了JavaScript实现网页五子棋小游戏的具体代码，供大家参考，具体内容如下设计思路如下： 1.先采用的Math.random（）方法决定哪一方先行; 2.设置...

99+

2024-04-02
JavaScript如何实现网页五子棋小游戏

这篇文章主要介绍“JavaScript如何实现网页五子棋小游戏”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript如何实现网页五子棋小游戏”文章能帮助大家解决问题。设计思路如下：先采用...

99+

2023-07-02
JavaScript+canvas实现五子棋游戏

本文实例为大家分享了JavaScript+canvas实现五子棋游戏的具体代码，供大家参考，具体内容如下效果截图：代码实现： <!DOCTYPE html> &l...

99+

2024-04-02
Android实现五子棋游戏(局域网版)

本文实例为大家分享了Android实现五子棋游戏的具体代码，供大家参考，具体内容如下实现环境: android studio 3.2.1, 手机分辨率为: 1920 *...

99+

2024-04-02
C++实现五子棋游戏(注释版)

本文实例为大家分享了C++实现五子棋游戏的具体代码，供大家参考，具体内容如下本程序是在vs2015环境下编译运行vs左上角：文件–新建–项目–W...

99+

2024-04-02
Android如何实现五子棋游戏局域网版

这篇文章主要介绍“Android如何实现五子棋游戏局域网版”，在日常操作中，相信很多人在Android如何实现五子棋游戏局域网版问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Android如何实现五子棋游戏局...

99+

2023-06-30
Java实现五子棋游戏

本文实例为大家分享了Java实现五子棋游戏的具体代码，供大家参考，具体内容如下一、功能分析五子棋的实现还是较为简单的，通过下期的流程我们可以知道大概要实现一下功能： 1、格界面 ...

99+

2024-04-02
Java实现五子棋游戏(控制台版)

本项目为大家分享了Java实现五子棋游戏的具体代码，供大家参考，具体内容如下该项目为Java编程语言编写的五子棋游戏(控制台版），用到二维数组、for循环、if语句、while()...

99+

2024-04-02
Java实现五子棋游戏单机版(1.0)

本文实例为大家分享了Java实现五子棋游戏单机版的具体代码，供大家参考，具体内容如下简介这个程序实现了单机版五子棋，目前无法联机，只能自己跟自己下。棋盘是20*20的。主要功能：...

99+

2024-04-02
原生JavaScript实现简单五子棋游戏

本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码，供大家参考，具体内容如下 HTML页面注释都很明确了，大家好好学习。 <!DOCTYPE html&...

99+

2024-04-02
Java实现五子棋游戏(2.0)

本文实例为大家分享了Java实现五子棋游戏的具体代码，供大家参考，具体内容如下简介相比之前，做出了以下修改： 1.新增菜单栏，将重新开始和退出的按钮移到了菜单栏；2.可以实时显示...

99+

2024-04-02
C++实现五子棋小游戏

本文实例为大家分享了C++实现五子棋小游戏的具体代码，供大家参考，具体内容如下思路：先用用system（“color 70”）改变控制台的背景色为灰白色，前...

99+

2024-04-02
Vue实现五子棋小游戏

本文实例为大家分享了Vue实现五子棋小游戏的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> ...

99+

2024-04-02
js实现网页五子棋进阶版

本文实例为大家分享了js实现网页五子棋进阶版的具体代码，供大家参考，具体内容如下对比上一版本增加了音效和计时器两个模块。代码如下 <!doctype html> &...

99+

2024-04-02
JavaScript实现简单五子棋游戏的方法

本篇内容介绍了“JavaScript实现简单五子棋游戏的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！本文实例为大家分享了JavaScr...

99+

2023-06-20
python代码实现五子棋游戏

本文实例为大家分享了python实现五子棋游戏的具体代码，供大家参考，具体内容如下先上代码 #调用pygame库 import pygame import sys #调...

99+

2024-04-02
java实现双人五子棋游戏

本文实例为大家分享了java实现双人五子棋游戏的具体代码，供大家参考，具体内容如下通过上下左右控制棋盘走动空格落子 (深度优先搜索) packag...

99+

2024-04-02