JS实现五子棋小游戏-js教程-PHP中文网

首页

web前端

js教程

JS实现五子棋小游戏

php中世界最好的语言

Apr 14, 2018 pm 03:05 PM

javascript 五子棋小游戏

这次给大家带来JS实现五子棋小游戏，JS实现五子棋小游戏的注意事项有哪些，下面就是实战案例，一起来看一下。

思路：

1、先用canvas画五子棋的棋盘
2、获取鼠标点击的位置
3、根据鼠标点击的位置判断，并画棋子
4、根据下的棋子判断是否赢了

代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  * { 
   padding: 0; 
   margin: 0; 
  } 
  canvas { 
   margin: 10px; 
   border: 2px solid #000; 
  } 
  #box { 
   display: inline-block; 
   position: absolute; 
   margin-top: 200px; 
   margin-left: 100px; 
  } 
  span { 
   font: 24px "微软雅黑"; 
   display: inline-block; 
   height: 50px; 
  } 
  input { 
   margin-top: 30px; 
   display: block; 
   width: 100px; 
   height: 50px; 
   font: 16px "微软雅黑"; 
   color: #fff; 
   background-color: #0099cc; 
  } 
 </style> 
</head> 
<body> 
<canvas width="640" height="640" id="cas"> 
 您的浏览器不支持canvas，请升级到最新的浏览器 
</canvas> 
<p id="box"> 
 <span id="txt"></span> 
 <input type="button" id="btn" value="重新开始"/> 
 
</p> 
 
<script> 
 var flag = true; //true代表白棋下的棋子，false代表黑棋下的棋子 
 var isWin = false; //判断是否结束，true结束，false没有结束 
 var step = 40; //设置每个格子的宽高都是40 
 
 var txt = document.getElementById("txt"); 
 var btn = document.getElementById("btn"); 
 var cas = document.getElementById("cas");// 获取画布对象 
 var ctx = cas.getContext("2d"); //画布上下文 
 
// 创建图片对象 
 var img_b = new Image(); 
 img_b.src = "imgs/b.png";//设置黑棋图片路径 
 var img_w = new Image(); 
 img_w.src = "imgs/w.png";//设置白棋图片路径 
 
// 用二维数组来保存棋盘，0代表没有走过，1为白棋走过，2为黑棋走过 
 var arr = new Array(15); //声明一个一维数组 
 for (var i = 0; i < 15; i++) { 
  arr[i] = new Array(15); //每个值再声明一个一维数组，这样就组成了一个二维数组 
  for (var j = 0; j < 15; j++) { 
   arr[i][j] = 0; 
  } 
 } 
 
 //绘制棋盘 
 function drawLine() { 
  for (var i = 0; i < cas.width / step; i++) { 
   // 画竖线 
   ctx.moveTo((i + 1) * step, 0); 
   ctx.lineTo((i + 1) * step, cas.height); 
   // 画横线 
   ctx.moveTo(0, (i + 1) * step); 
   ctx.lineTo(cas.width, (i + 1) * step); 
   ctx.stroke(); 
  } 
 } 
 //获取鼠标点击的位置 
 cas.onclick = function (e) { 
  // 先判断游戏是否结束 
  if (isWin) { 
   alert("游戏已经结束，请刷新重新开始！"); 
   return 0; 
  } 
  //判断棋子显示的地方，四条边上不显示棋子， 
  //鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20） 
  var x = (e.clientX - 10 - 20) / 40; 
  var y = (e.clientY - 10 - 20) / 40; 
 
  //进行取整来确定棋子最终显示的区域 
  x = parseInt(x); 
  y = parseInt(y); 
  //如果超出棋盘或者在棋盘边界直接返回，边界上不能画棋子 
  if(x < 0 || x >= 15 || y < 0 || y >= 15) { 
   return; 
  } 
  //进行判断该位置是否已经显示过棋子 
  if (arr[x][y] != 0) { 
   alert("你不能在这个位置下棋"); 
   return; 
  } 
  // 判断是显示黑子还是白子 
  if (flag) {//白子 
   flag = false; //将标志置为false,表示下次为黑子 
   drawChess(1, x, y); //调用函数来画棋子 
 
  } else {//黑子 
   flag = true; //将标志置为true,表示下次为白子 
   drawChess(2, x, y); //调用函数来画棋子 
 
  } 
 } 
 //画棋子 
 function drawChess(num, x, y) { 
  //根据x和y确定图片显示位置,让图片显示在十字线中间，因为一个格子为40，图片大小为30，所以40-30/2等于25，所以需要加上25 
  var x0 = x * step + 25; 
  var y0 = y * step + 25; 
  if (num == 1) { 
   //绘制白棋 
   ctx.drawImage(img_w, x0, y0); 
   arr[x][y] = 1; //白子 
  } else if (num == 2) { 
   // 绘制黑棋 
   ctx.drawImage(img_b, x0, y0); 
   arr[x][y] = 2; //黑子 
  } 
  //调用函数判断输赢 
  judge(num, x, y); 
 } 
 //判断输赢 
 function judge(num, x, y) { 
  var n1 = 0, //左右方向 
    n2 = 0, //上下方向 
    n3 = 0, //左上到右下方向 
    n4 = 0; // 右上到左下方向 
  //***************左右方向*************
  //先从点击的位置向左寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环 
  for (var i = x; i >= 0; i--) { 
   if (arr[i][y] != num) { 
    break; 
   } 
   n1++; 
  } 
  //然后从点击的位置向右下一个位置寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环 
  for (var i = x + 1; i < 15; i++) { 
   if (arr[i][y] != num) { 
    break; 
   } 
   n1++; 
  } 
  //****************上下方向************ 
  for (var i = y; i >= 0; i--) { 
   if (arr[x][i] != num) { 
    break; 
   } 
   n2++; 
  } 
  for (var i = y + 1; i < 15; i++) { 
   if (arr[x][i] != num) { 
    break; 
   } 
   n2++; 
  } 
  //****************左上到右下斜方向*********** 
  for(var i = x, j = y; i >=0, j >= 0; i--, j--) { 
   if (i < 0 || j < 0 || arr[i][j] != num) { 
    break; 
   } 
   n3++; 
  } 
  for(var i = x+1, j = y+1; i < 15, j < 15; i++, j++) { 
   if (i >= 15 || j >= 15 || arr[i][j] != num) { 
    break; 
   } 
   n3++; 
  } 
  //****************右上到左下斜方向*************
  for(var i = x, j = y; i >= 0, j < 15; i--, j++) { 
   if (i < 0 || j >= 15 || arr[i][j] != num) { 
    break; 
   } 
   n4++; 
  } 
  for(var i = x+1, j = y-1; i < 15, j >= 0; i++, j--) { 
   if (i >= 15 || j < 0 || arr[i][j] != num) { 
    break; 
   } 
   n4++; 
  } 
  //用一个定时器来延时，否则会先弹出对话框，然后才显示棋子 
  var str; 
  if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) { 
   if (num == 1) {//白棋 
    str = "白棋赢了，游戏结束！" 
   } else if (num == 2) {//黑棋 
    str = "黑棋赢了，游戏结束！" 
   } 
   txt.innerHTML = str; 
   isWin = true; 
  } 
 } 
 //重新开始 
 btn.onclick = function() { 
  flag = true; 
  isWin = false; 
 
  for (var i = 0; i < 15; i++) { 
   for (var j = 0; j < 15; j++) { 
    arr[i][j] = 0; 
   } 
  } 
  ctx.clearRect(0, 0, 640, 640); 
  txt.innerHTML = ""; 
  drawLine(); 
 } 
 drawLine(); 
</script> 
</body> 
</html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7671

CakePHP 教程

1393

C# 教程

1206

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

详解：Windows 10是否内置了扫雷小游戏 Dec 23, 2023 pm 02:07 PM

我们在使用win10操作系统的时候，想要知道win10更新了之后是不是还保存有以前老版本中的自带游戏扫雷，据小编所知，我们可以在商店中进行下载安装，只要在商店中搜索microsoftminesweeper即可。具体步骤就来和小编一起看一下吧~windows10有扫雷游戏吗1，首先打开win10开始菜单，点击。然后搜索，点击搜索。2，点击排在第一位的。3，然后就可能需要输入微软账户，即Microsoft账户。没有Microsoft账户的可以安装提示注册即可。输入账户密码，点击下一步。4，然后开始下

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

如何在谷歌浏览器中游玩小游戏 Jan 30, 2024 pm 12:39 PM

谷歌浏览器怎么玩小游戏？谷歌浏览器之中是有着非常多充满人文关怀的功能设计的，各位可以在其中获得非常多样化的乐趣。在谷歌浏览器之中，有这一个非常好玩的彩蛋小游戏，即小恐龙游戏，很多小伙伴都非常喜欢这个游戏，但却不清楚该怎么触发进行游玩，下面就由小编为大家带来恐龙小游戏进入教程。谷歌浏览器怎么玩小游戏方法一：【电脑断网】如果你的电脑使用有线网络，请拔掉网线；如果你的电脑使用无线网络，请在电脑右下角点击无线网络连接断开。②在你电脑断网的前提下，打开谷歌浏览器(GoogleChrome)即可出现谷歌浏览

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

See all articles

JS实现五子棋小游戏

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题