基于javascript canvas实现五子棋游戏

本文实例为大家分享了基于canvas的五子棋的具体代码,供大家参考,具体内容如下

第一部分:核心类Gobang

属性:

this.box = box; // 存放五子棋的容器
this.canvas = null; // 画布
this.ctx = null;
this.size = 600; // 棋盘大小
this.cellNum = 20; // 单行棋格数量
this.padding = this.size/this.cellNum; // padding值
this.cellSize = (this.size-this.padding*2)/this.cellNum; // 棋格大小
this.pieceSize = this.cellSize*3/4; // 棋子大小
this.color = ["black", "#aaa"]; // 棋子颜色
this.myPieceType = null; // 玩家棋子类型
this.aiPieceType = null; // 电脑棋子类型
this.myPieces = []; // 玩家累计棋子
this.aiPieces = []; // 电脑累计棋子
this.isMyTurn = true; // 先手
this.curPos = [this.cellNum/2-1, this.cellNum/2-1]; // 当前点击位置
this.timeId = null; // 定时器id

方法:

init// 初始化方法,获取canvas设置宽高,获取ctx
createChessboard// 创建背景棋盘
drawPiece// 画一个棋子
clearPiece// 清除棋子
registClick// 注册鼠标点击事件,主要的逻辑函数
isIn// 判断否在所下的棋子里面
isInAll// 判断是否在所有下的棋子里面
isFull// 是否下满
aiPutPiece// 电脑落子,只是简单的实现了,获取玩家落子位子周围一格的随机位置
putPiece// 实现下棋的函数
isWin// 胜利判断,个人人为比较男一点点的算法
run// 运行,类的入口函数,里面调用了,·init·/createChessBoard/registClick方法

第二部分:源代码

Gobang.js

/** 五子棋 **/

function Gobang(box){
  this.box = box; // 存放五子棋的容器
  this.canvas = null; // 画布
  this.ctx = null;
  this.size = 600; // 棋盘大小
  this.cellNum = 20; // 单行棋格数量
  this.padding = this.size/this.cellNum; // padding值
  this.cellSize = (this.size-this.padding*2)/this.cellNum; // 棋格大小
  this.pieceSize = this.cellSize*3/4; // 棋子大小
  this.color = ["black", "#aaa"]; // 棋子颜色
  this.myPieceType = null; // 玩家棋子类型
  this.aiPieceType = null; // 电脑棋子类型
  this.myPieces = []; // 玩家累计棋子
  this.aiPieces = []; // 电脑累计棋子
  this.isMyTurn = true; // 先手
  this.curPos = [this.cellNum/2-1, this.cellNum/2-1]; // 当前点击位置
  this.timeId = null; // 定时器id

  // 初始化方法
  this.init = function(){
    // 创建canvas
    this.canvas = document.createElement("canvas");
    // 设置宽高
    this.canvas.width = this.canvas.height = this.size;
    // 加入到容器中
    this.box.appendChild(this.canvas);
    // 获取ctx
    this.ctx = this.canvas.getContext("2d");
  };
  // 创建背景棋盘
  this.createChessboard = function(){
    // ----------- 边框 -----------
    this.ctx.lineWidth = 10;
    this.ctx.lineJoin = "round";
    this.ctx.strokeRect(0, 0, this.size, this.size);
    // ----------- 创建棋盘 -----------
    this.ctx.lineWidth = 1;
    for (var i = 0; i <= this.cellNum; i++) {
      // 画横线
      this.ctx.beginPath();
      this.ctx.moveTo(this.padding, this.padding+i*this.cellSize);
      this.ctx.lineTo(this.size-this.padding, this.padding+i*this.cellSize);
      this.ctx.stroke();
      // 画竖线
      this.ctx.beginPath();
      this.ctx.moveTo(this.padding+i*this.cellSize, this.padding);
      this.ctx.lineTo(this.padding+i*this.cellSize, this.size-this.padding);
      this.ctx.stroke();
    }
  };
  // 画一个棋子
  this.drawPiece = (x, y, type=0) => {
    // 根据坐标计算出图中位置
    var posX, posY;
    posX = this.padding + x * this.cellSize;
    posY = this.padding + y * this.cellSize;
    // 创建渐变色
    var grd = this.ctx.createRadialGradient(posX, posY, this.pieceSize/18, posX, posY, this.pieceSize);
    // type: 0, 黑棋 1, 白棋
    grd.addColorStop(0, this.color[1-type]);
    grd.addColorStop(0, this.color[type]);
    this.ctx.fillStyle = grd;
    // 画圆
    this.ctx.beginPath(); this.ctx.arc(posX, posY, this.pieceSize/2, 0, 2*Math.PI); this.ctx.fill();
  };
  // 清除棋子
  this.clearPiece = (x, y) => {
    // 清除棋子所在位置的像素
    var posX, posY;
    posX = this.padding + x * this.cellSize - this.pieceSize/2;
    posY = this.padding + y * this.cellSize - this.pieceSize/2;
    this.ctx.clearRect(posX, posY, this.pieceSize, this.pieceSize);
    // 补上十字架
    this.ctx.lineWidth = 1;
    // 竖线
    this.ctx.beginPath(); this.ctx.moveTo(posX+this.pieceSize/2, posY); this.ctx.lineTo(posX+this.pieceSize/2, posY+this.pieceSize); this.ctx.stroke();
    // 横线
    this.ctx.beginPath(); this.ctx.moveTo(posX, posY+this.pieceSize/2); this.ctx.lineTo(posX+this.pieceSize, posY+this.pieceSize/2); this.ctx.stroke();
  };
  // 注册鼠标点击事件
  this.registClick = function(){
    this.canvas.addEventListener("click", (ev) => {
      // 将位置坐标,转换为点
      var x = Math.round((ev.clientX - this.padding)/this.cellSize);
      x = x <= 0 ? 0 : x; x = x > this.cellNum ? this.cellNum : x;
      var y = Math.round((ev.clientY - this.padding)/this.cellSize);
      y = y <= 0 ? 0 : y; y = y > this.cellNum ? this.cellNum : y;
      // 设置当前位置
      this.curPos = [x, y];
      // 玩家落子
      if(this.isMyTurn && !this.isInAll(this.curPos)){ // 判断是否轮到玩家,并且下的位置是否重复
        this.putPiece(this.myPieces, this.curPos);
      }
      else return; // 轮到玩家的时候才能落子
      // 判断输赢
      if(this.isWin(this.myPieces)) {setTimeout(function(){alert("you win!");}, 100); return;}
      // 电脑落子
      this.aiPutPiece();
      // 判断输赢
      if(this.isWin(this.aiPieces)) {setTimeout(function(){alert("robot win!");}, 100); return;}
      this.isMyTurn = true;
    });
  };
  // 判断否在所下的棋子里面
  this.isIn = (pos, arr) => {
    var len = arr.length;
    for(var i=0; i < len; i++){
      if(pos[0] == arr[i][0] && pos[1] == arr[i][1]) return true;
    }
    return false;
  };
  // 判断是否在所有下的棋子里面
  this.isInAll = (pos) => {
    return this.isIn(pos, this.myPieces.concat(this.aiPieces));
  }
  // 是否下满
  this.isFull = () => {
    return (this.myPieces.length + this.aiPieces.length) == (this.cellNum+1) * (this.cellNum+1);
  };
  // 电脑落子
  this.aiPutPiece = ()=>{
    var x, y;
    // 目前,制作了一点功能,就是在玩家刚刚落子的周围一格落子
    // 1. 获得随机的周围的坐标
    while(1){
      x = this.curPos[0] + Math.pow(-1, parseInt(Math.random()*2));
      y = this.curPos[1] + Math.pow(-1, parseInt(Math.random()*2));
      if(x >=0 && x <=20 && y >= 0 && y <=20 && !this.isInAll([x, y])) break;
    }
    // 2. 落子
    this.putPiece(this.aiPieces, [x, y], 1);
  }
  // 实现下棋的函数
  this.putPiece = (pieces, pos, type=0) => {
    this.drawPiece(pos[0], pos[1], type);
    pieces.push(pos);
  }
  // 胜利判断
  this.isWin = (pieces) => {
    /*
    * 这里不用遍历棋盘来判断四个方向,只需要判断当前落子位置的四个方向。
    */
    var x, y, count = 0;

    // 处在水平线上 判断
    x = this.curPos[0]-1; y = this.curPos[1];
    while(1) if(this.isIn([x, y], pieces)) {count++; x--;} else break; // 左边
    x = this.curPos[0]+1; y = this.curPos[1];
    while(1) if(this.isIn([x, y], pieces)) {count++; x++;} else break; // 右边
    if(count >= 4) return true; else /** 左右匹配失败 **/ count = 0;

    // 处在垂直线上 判断 比较四次
    x = this.curPos[0]; y = this.curPos[1]-1;
    while(1) if(this.isIn([x, y], pieces)) {count++; y--;} else break; // 上边
    x = this.curPos[0]; y = this.curPos[1]+1;
    while(1) if(this.isIn([x, y], pieces)) {count++; y++;} else break; // 下边
    if(count >= 4) return true; else /** 上下匹配失败 **/ count = 0;

    // 处在左对角线上的判断
    x = this.curPos[0]-1; y = this.curPos[1]-1;
    while(1) if(this.isIn([x, y], pieces)) {count++; x--; y--;} else break; // 左上
    x = this.curPos[0]+1; y = this.curPos[1]+1;
    while(1) if(this.isIn([x, y], pieces)) {count++; x++; y++;} else break; // 右下
    if(count >= 4) return true; else /** 左对角线匹配失败 **/ count = 0;

    // 处在右对角线上的判断
    x = this.curPos[0]+1; y = this.curPos[1]-1;
    while(1) if(this.isIn([x, y], pieces)) {count++; x++; y--;} else break; // 右上
    x = this.curPos[0]-1; y = this.curPos[1]+1;
    while(1) if(this.isIn([x, y], pieces)) {count++; x--; y++;} else break; // 左下
    if(count >= 4) return true; else /** 右对角线匹配失败 **/ return false;
  };
  // 运行
  this.run = function(){
    // 初始化方法
    this.init();
    // 创建棋盘
    this.createChessboard();
    // 注册点击事件
    this.registClick();
  }
}

五子棋.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06-五子棋</title>
  <script src="../gobang.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    var box = document.getElementById("box");
    var gobang = new Gobang(box);
    gobang.run();
  </script>
</body>
</html>

更多有趣的经典小游戏实现专题,分享给大家:

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

javascript经典小游戏汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 原生JS+Canvas实现五子棋游戏实例

    一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *

  • 原生JS+Canvas实现五子棋游戏

    本文实例为大家分享了JS  Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px auto; box-shadow: -2p

  • JS+canvas五子棋人机对战实现步骤详解

    1. 创建实例 function Gobang () { this.over = false; // 是否结束 this.player = true; // true:我 false:电脑 this.allChesses = []; // 所有棋子 this.existChesses = [] // 已经落下的棋子 this.winsCount = 0; // 赢法总数 this.wins = []; // 所有赢法统计 this.myWins = []; //我的赢法统计 this.compu

  • JS canvas绘制五子棋的棋盘

    本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow blur spread color inset: h-shadow: (必须)阴影的水平偏移量,如果是正值,则阴影在元素块右边:如果是负值,则阴影在元素块左边. v-shadow: (必须)阴影的垂直偏移量,如果是正值,则阴影在元素块底部:如果是负值,则阴影在元素块顶部. blur: (可选)阴影

  • Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

    这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五

  • JS+canvas实现的五子棋游戏【人机大战版】

    本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css

  • 基于javascript canvas实现五子棋游戏

    本文实例为大家分享了基于canvas的五子棋的具体代码,供大家参考,具体内容如下 第一部分:核心类Gobang 属性: this.box = box; // 存放五子棋的容器 this.canvas = null; // 画布 this.ctx = null; this.size = 600; // 棋盘大小 this.cellNum = 20; // 单行棋格数量 this.padding = this.size/this.cellNum; // padding值 this.cellSize

  • JavaScript+canvas实现五子棋游戏

    本文实例为大家分享了JavaScript+canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 效果截图: 代码实现: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initia

  • JS+Canvas实现五子棋游戏

    本文实例为大家分享了JS+Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 布局+样式部分代码 : <style type='text/css'> canvas { display: block; margin: 50px auto; box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9; cursor: pointer; } .btn-wrap { display: flex; flex-direction: row; j

  • 基于C语言实现五子棋游戏完整实例代码

    本文实例讲述了基于C语言实现五子棋游戏的方法,代码备有比较完整的注释,可以帮助读者更好的加以理解. 五子棋游戏代码如下: /* * 使用键盘的上下左右键移动棋盘,空格键表示下棋,ESC键退出程序 */ #include <stdio.h> #include <stdlib.h> #include <bios.h> #include <graphics.h> #include<malloc.h> /* * 对应键盘键的十六进制数字 */ #defi

  • java基于swing实现的五子棋游戏代码

    本文实例讲述了java基于swing实现的五子棋游戏代码.分享给大家供大家参考. 主要功能代码如下: 复制代码 代码如下: import java.awt.*; import javax.swing.*; import java.awt.event.*; public class Main extends JFrame implements ActionListener{         private static final long serialVersionUID = 1L;      

  • 如何基于javascript实现贪吃蛇游戏

    这篇文章主要介绍了如何基于javascript实现贪吃蛇游戏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: <div class="content"> <div class="btn startBtn"> <!-- 开始按钮 --> <button type="button"></button> </div>

  • 利用js canvas实现五子棋游戏

    本文实例为大家分享了canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

  • 原生JavaScript实现简单五子棋游戏

    本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码,供大家参考,具体内容如下 HTML页面 注释都很明确了,大家好好学习. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=d

  • 基于JavaScript制作一个骰子游戏

    目录 知识点 HTML 部分 CSS 部分 JavaScript 部分 总结 游戏可以通过这个链接进入 完整源码我已经放在GitHub上了 这节实验我们将使用 HTML.CSS 和 JavaScript 构建一个骰子游戏.设置两名玩家(一个人玩也行)然后掷骰子,获得更高点数的玩家将赢得游戏. 知识点 :hover 选择器 querySelector() 方法 setAttribute() 方法 骰子 1-6 点的图片都放在这里了,大家可以将这些图片保存在本地的文件夹中然后用相对地址引用,或者也可

随机推荐