2. 程式人生 > 程式設計 >VUE+Canvas實現簡單五子棋遊戲的全過程

VUE+Canvas實現簡單五子棋遊戲的全過程

阿新 • • 發佈：2021-05-11

前言

在佈局上，五子棋相比那些目標是隨機運動的遊戲，實現起來相對簡單許多，思路也很清晰，總共分為：

（1）畫棋盤；

（2）監聽點選事件畫黑白棋子；

（3）每次落子之後判斷是否有5子相連，有則贏。

最複雜的恐怕就是如何判斷五子棋贏了，那麼就先從簡單的開始，畫個棋盤吧~

1、畫棋盤

棋盤很簡單，我們畫個15*15的棋盤，橫線豎線相交錯：

drawCheckerboard() {
      // 畫棋盤
      let _this = this;
      _this.ctx.beginPath();
      _this.ctx.fillStyle = "#fff";
      _this.ctx.rect(0,450,450);
      _this.ctx.fill();
      for (var i = 0; i < 15; i++) {
        _this.ctx.beginPath();
        _this.ctx.strokeStyle = "#D6D1D1";
        _this.ctx.moveTo(15 + i * 30,15); //垂直方向畫15根線，相距30px;
        _this.ctx.lineTo(15 + i * 30,435);
        _this.ctx.stroke();
 http://www.cppcns.com
 
       _this.ctx.moveTo(15,15 + i * 30); //水平方向畫15根線，相距30px;
        _this.ctx.lineTo(435,15 + i * 30);
        _this.ctx.stroke();
 
        _this.resultArr.push(new Array(15).fill(0));
      }
}

先用一個450 * 450 的正方形打底，四周留15寬度的空白，然後畫上間隔為30的線。在for迴圈裡，我們還初始化了一個15 * 15的二維陣列，並全部填上0，沒錯，就是記錄落子的。

VUE+Canvas實現簡單五子棋遊戲的全過程

2、監聽點選事件畫黑白棋子

好了，我們在獲取dom的時候順便監聽一下click事件，來畫棋子：

letcontainer=document.getElementById("程式設計客棧gobang");

container.addEventListener("click",_this.handleClick);

handleClick(event) {
      let x = event.offsetX - 70;
      let y = event.offsetY - 70;
      if (x < 15 || x > 435 || y < 15 || y > 435) {
        // 點出界的
        return;
      }
      this.drawChess(x,y);
      if(this.winGame){
        this.drawResult();
        return;
      }
      this.whiteTurn = !this.whiteTurn;
      this.drawText();
}

畫棋子的程式碼：

drawChess(x,y) {
      let _this = this;
      let xLine = Math.round((x - 15) / 30); // 豎線第x條
      let yLine = Math.round((y - 15) / 30); // 橫線第y條
      if(_this.resultArr[xLine][yLine] !== 0){
        return;
      }
      let grd = _this.ctx.createRadialGradient(
        xLine * 30 + 15,yLine * 30 + 15,4,xLine * 30 + 15,10
      );
      grd.addColorStop(0,_this.whiteTurn ? "#fff" : "#4c4c4c");
      grd.addColorStop(1,_this.whiteTurn ? "#dadada" : "#000");
      _this.ctx.beginPath();
      _this.ctx.fillStyle = grd;
      _this.ctx.arc(
        xLine * 30 + 15,10,2 * Math.PI,false
      );
      _this.ctx.fill();
      _this.ctx.closePath();
 
      _this.setResultArr(xLine,http://www.cppcns.comyLine);
      _this.checkResult(xLine,yLine);
}

很容易可以計算出點選座標最近的那個棋盤交叉點，http://www.cppcns.com當然，如果那裡已經落了子，就得return。然後在交點處畫上白子或者黑子，這裡用漸變填充使棋子看起來更像那麼回事。接著，在對應的二維數組裡記錄一下棋子狀況：

setResultArr(m,n) {
      let _this = this;
      _this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // 白棋為1；黑棋為2
 
}

VUE+Canvas實現簡單五子棋遊戲的全過程

3、檢查五子棋輸贏結果

輸贏結果怎麼判斷？肉眼看去，無非就是以當前落子為0,0原點建立座標系，然後判斷0，180，45和135四條線上是否有連續5子。相比於直接遍歷計數，更好的方法就是取出四條線上的資料，然後判斷是否有相連的5個1或者2字元。

假設我們落子的陣列座標是[m,n]。

（1）橫線的結果陣列字串：this.resultArr[m].join('')；

（2）豎線的結果陣列字串：

for(let i = 0; i<15; i++){
        lineHorizontal.push(_this.resultArr[i][n]);

}

（3）135（左上到右下）：j從0-15，分別取this.resultArr[m-j][n-j]結果unshift進臨時陣列頭部，取this.resultArr[m+j][n+j]放到臨時陣列尾部，行成結果；

（4）45（左下到右上）：j從0-15，分別取this.resultArr[m+j][n-j]結果unshift進臨時陣列頭部，取this.resultArr[m-j][n+j]放到臨時陣列尾部，行成結果；

當然這裡面都是要判斷一下陣列越界。

得到結果字串後，我們判斷是否有“22222”或者“11111”這樣的字串存在，有則說明勝利。

checkResult(m,n){ // 判斷是否有5子相連
      let _this = this;
      let checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack;
      // 取出[m,n]橫豎斜四條線的一維陣列
      let lineVertical = _this.resultArr[m].join('');
      if(lineVertical.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let lineHorizontal = [];
      for(let i = 0; i<15; i++){
        lineHorizontal.push(_this.resultArr[i][n]);
      }
      lineHorizontal = lineHorizontal.join('');
      if(lineHorizontal.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let line135 = [];
      for(let j = 0; j < 15; j++){
        if(m - j >= 0 && n - j >= 0){ // 左上角
          line135.unshift(_this.resultArr[m - j][n -j]);
        }
        if(j > 0 && m + j < 15 && n + j < 15){ // 右下角
          line135.push(_this.resultArr[m + j][n + j]);
        }
      }
      line135 = line135.join('');
      if(line135.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let line45 = [];
      for(let j = 0; j < 15; j++){
        if(m + j < 15 && n - j >= 0){ // 右上角
          line45.unshift(_this.resultArr[m + j][n -j]);
        }
        if(j > 0 && m - j >=0 && n + j < 15){ // 左下角
          line45.push(_this.resultArr[m - j][n + j]);
        }
      }
      line45 = line45.join('');
      if(line45.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
}

最後勝出，我們顯示一下是哪方獲勝。

VUE+Canvas實現簡單五子棋遊戲的全過程

至此，一個簡單的黑白棋遊戲就做好了~~~~~

老規矩，原始碼貼上：

<template>
  <div class="gobang">
    <canvas id="gobang" width="800" height="600"></canvas>
  </div>
</template>
 
<script>
const CheckStrWhite = "11111";
const CheckStrBlack = "22222";
export default {
  name: "Gobang",data() {
    return {
      ctx: null,winGame: false,whiteTurn: false,// 白棋輪；true-黑棋輪
      resultArr: [] // 記錄棋子位置的陣列
    };
  },mounted() {
    let _this = this;
    let container = document.getElementById("gobang");
 
    container.addEventListener("click",_this.handleClick);
 
    _this.ctx = container.getContext("2d");
    _this.ctx.translate(70,70);
    _this.drawCheckerboard();
  },computed:{
    chessText(){
      return this.whiteTurn ? '白棋' : '黑棋';
    }
  },methods: {
    drawCheckerboard() {
      // 畫棋盤
      let _this = this;
      _this.ctx.beginPath();
      _this.ctx.fillStyle = "#fff";
      _this.ctx.rect(0,435);
        _this.ctx.stroke();
        _this.ctx.moveTo(15,15 + i * 30); //水平方向畫15根線，相距30px;棋盤為14*14；
        _this.ctx.lineTo(435,15 + i * 30);
        _this.ctx.stroke();
 
        _this.resultArr.push(new Array(15).fill(0));
      }
      _this.drawText();
    },drawChess(x,yLine);
      _this.checkResult(xLine,yLine);
    },setResultArr(m,n) {
      let _this = this;
      _this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // 白棋為1；黑棋為2
 
    },checkResult(m,n]橫豎斜四條線的一維陣列
      let lineVertical = _this.resultArr[m].join('');
      if(lineVertical.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let lineHorizontal = [];
      for(let i = 0; i<15; i++){
        lineHorizontal.push(_this.resultArr[i][n]);
      }
      lineHorizontal = lineHorizontal.join('');
      if(lineHorizontal.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let line135 = [];
      for(let j = 0; j < 15; j++){
        if(m - j >= 0 && n - j >= 0){ // 左上角
          line135.unshift(_this.resultArr[m - j][n -j]);
        }
        if(j > 0 && m + j < 15 && n + j < 15){ // 右下角
          line135.push(_this.resultArr[m + j][n + j]);
        }
      }
      line135 = line135.join('');
      if(line135.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let line45 = [];
      for(let j = 0; j < 15; j++){
        if(m + j < 15 && n - j >= 0){ // 右上角
          line45.unshift(_this.resultArr[m + j][n -j]);
        }
        if(j > 0 && m - j >=0 && n + j < 15){ // 左下角
          line45.push(_this.resultArr[m - j][n + j]);
        }
      }
      line45 = line45.join('');
      if(line45.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
    },drawText(){
      let _this = this;
      _this.ctx.clearRect(435 + 60,100,70);
      _this.ctx.fillStyle = "#fff";
      _this.ctx.font="20px Arial";
      _this.ctx.fillText('本輪：' + _this.chessText,435 + 70,35);
    },drawResult(){
      let _this = this;
      _this.ctx.fillStyle = "#ff2424";
      _this.ctx.font="20px Arial";
      _this.ctx.fillText(_this.chessText+'勝！',70);
    },handleClick(event) {
      let x 程式設計客棧= event.offsetX - 70;
      let y = event.offsetY - 70;
      if (x < 15 || x > 435 || y < 15 || y > 435) {
        // 點出界的
        return;
      }
      this.drawChess(x,y);
      if(this.winGame){
        this.drawResult();
        return;
      }
      this.whiteTurn = !this.whiteTurn;
      this.drawText();
    }
  }
};
</script>
 
<!-- Add "scoped" attribute to limit css to this component only -->
<style scoped lang="scss">
.gobang {
  #gobang {
    background: #2a4546;
  }
}
</style>

總結

到此這篇關於vue+Canvas實現簡單五子棋遊戲的文章就介紹到這了,更多相關VUE+Canvas五子棋遊戲內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

相關推薦

VUE+Canvas實現簡單五子棋遊戲的全過程

前言 在佈局上，五子棋相比那些目標是隨機運動的遊戲，實現起來相對簡單許多，思路也很清晰，總共分為：

C++實現簡單五子棋遊戲

五子棋是世界智力運動會競技專案之一，是一種兩人對弈的純策略型棋類遊戲，是世界智力運動會競技專案之一，通常雙方分別使用黑白兩色的棋子，下在棋盤直線與橫線的交叉點上，先形成5子連線者獲勝。

js實現簡單五子棋遊戲

本文例項為大家分享了js實現五子棋遊戲的具體程式碼，供大家參考，具體內容如下

vue+canvas實現拼圖小遊戲

利用 vue+canvas 實現拼圖小遊戲，供大家參考，具體內容如下 思路步驟 一個拼圖拼盤和一個原圖參照

原生JavaScript實現簡單五子棋遊戲

本文例項為大家分享了實現簡單五子棋遊戲的具體程式碼，供大家參考，具體內容如下

js+canvas實現簡單掃雷小遊戲

掃雷小遊戲作為windows自帶的一個小遊戲，受到很多人的喜愛，今天我們就來嘗試使用h5的canvas結合js來實現這個小遊戲。

C語言實現簡單五子棋小遊戲

五子棋簡單功能實現，供大家參考，具體內容如下 遊戲功能演示 程式碼如下：

Qt實現簡單五子棋小遊戲

C++程式碼簡單實現五子棋功能，主要是分為視窗繪圖的顯示，橫、縱、斜三個方面計算的功能程式碼實現，即能連續出現5個相同棋子就為贏。在這裡就簡單講解一下這三個方面的功能實現(主要是通過QT實現)。

VUE+Canvas實現財神爺接元寶小遊戲

之前的canvas小遊戲系列歡迎大家戳： 《vue實現一個Flappy Bird~~~》 《猜單詞遊戲》

C語言模擬實現簡單掃雷遊戲

本文指的掃雷是簡單模擬電腦中的掃雷遊戲，但以我目前的水平，也就只能在黑框中實現

C語言實現簡單掃雷遊戲

本文例項為大家分享了C語言實現簡單掃雷遊戲的具體程式碼，供大家參考，具體內容如下

vue.js實現簡單的計算器功能

使用vue.js來編寫一個簡單的計算器，供大家參考，具體內容如下 效果如圖所示：是一個十分簡單的計算器，包含了加減乘除，不是用原生js寫的，而是用vue.js寫的

C++基於EasyX實現簡單掃雷遊戲

本文例項為大家分享了C++ EasyX實現簡單掃雷遊戲的具體程式碼，供大家參考，具體內容如下

C++實現簡單掃雷遊戲

掃雷是一個經典的電腦小遊戲，用C++來編一下，效果自己試一下 #include<stdio.h>

java實現簡單掃雷遊戲

本文例項為大家分享了java實現簡單掃雷遊戲的具體程式碼，供大家參考，具體內容如下

C#實現簡單打字遊戲

本文例項為大家分享了C#實現簡單打字遊戲的具體程式碼，供大家參考，具體內容如下

vue+canvas實現移動端手寫簽名

本文例項為大家分享了vue+canvas實現移動端手寫簽名的具體程式碼，供大家參考，具體內容如下

vue.js實現簡單購物車功能

本文例項為大家分享了vue.js實現簡單購物車的具體程式碼，供大家參考，具體內容如下

java實現簡易五子棋遊戲

本文例項為大家分享了java實現簡易五子棋遊戲的具體程式碼，供大家參考，具體內容如下

C++實現簡易五子棋遊戲

C++實現的簡易五子棋遊戲，供大家參考，具體內容如下 三個函式： void menu()；//選單