基于Javascript怎么開發(fā)連連看游戲小程序

今天小編給大家分享一下基于Javascript怎么開發(fā)連連看游戲小程序的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

01、程序設(shè)計(jì)的步驟

1. 設(shè)計(jì)點(diǎn)類Point

點(diǎn)類Point比較簡(jiǎn)單，主要存儲(chǔ)方塊所在棋盤坐標(biāo)（x,y）。

//定義坐標(biāo)點(diǎn)類
function Point(_x, _y) {
  this.x = _x;
  this.y = _y;
}

2. 設(shè)計(jì)游戲主邏輯

整個(gè)游戲在Canvas對(duì)象中進(jìn)行，在頁面加載時(shí)調(diào)用create_map( )實(shí)現(xiàn)將圖標(biāo)圖案隨機(jī)放到地圖中，地圖map中記錄的是圖案的數(shù)字編號(hào)。最后調(diào)用print_map()按地圖map中記錄圖案信息將圖2中圖標(biāo)圖案繪制在Canvas對(duì)象中，生成游戲開始的界面。同時(shí)綁定Canvas對(duì)象觸屏開始事件，對(duì)玩家觸屏操作做出反應(yīng)。

var map = [];
var Select_first = false; //是否已經(jīng)選中第一塊
var linePointStack = []; //存儲(chǔ)連接的折點(diǎn)棋盤坐標(biāo)
var Height = 12;
var Width = 10;
var p1, p2; //存儲(chǔ)選中第一塊，第二塊方塊對(duì)象坐標(biāo)
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
    //創(chuàng)建畫布上下文
    this.init(); //初始化地圖, 將地圖中所有方塊區(qū)域位置置為空方塊狀態(tài)
    this.create_map() ; //生成隨機(jī)地圖
    this.print_map(); //輸出map地圖
    this.ctx = wx.createCanvasContext('myCanvas')
    this.ctx.draw();
  },
init: function() {
    //初始化地圖, 將地圖中所有方塊區(qū)域位置置為空方塊狀態(tài)
    for (var x = 0; x < Width; x++) {
      map[x] = new Array();
      for (var y = 0; y < Height; y++) {
        map[x][y] = " "; //" "表示空的
      }
    }
  },

3. 編寫函數(shù)代碼

print_map( )按地圖map中記錄圖案信息將圖2中圖標(biāo)圖案顯示在Canvas對(duì)象中，生成游戲開始的界面。

**
   *按地圖map中記錄圖案信息將圖標(biāo)圖案顯示在Canvas對(duì)象中，生成游戲開始的界面。
   */
  print_map: function() { //輸出map地圖
    let ctx = this.ctx
    for (var x = 0; x < Width; x++)
      for (var y = 0; y < Height; y++)
        if (map[x][y] != ' ') {
          var img1 = '/images/' + map[x][y] + ".jpg";
          //ctx.drawImage('/images/4.jpg', 50 * i, 50, 50, 50)
          ctx.drawImage(img1, 25 * x, 25 * y, 25, 25);
        }
  },

用戶在窗口中上單擊時(shí)，由屏幕像素坐標(biāo)(e.touches[0].x, e.touches[0].y)計(jì)算被單擊方塊的地圖棋盤位置坐標(biāo)（x,y)。判斷是否是第一次選中方塊，是則僅僅對(duì)選定方塊加上紅色示意框線。如果是第二次選中方塊，則加上黑色示意框線，同時(shí)要判斷是否圖案相同且連通。假如連通則畫選中方塊之間連接線。

Canvas對(duì)象觸屏事件則調(diào)用智能查找功能find2Block()。

Canvas對(duì)象觸屏開始事件代碼。

touchStart: function(e) {
    var x = Math.floor(e.touches[0].x / 25);
    var y = Math.floor(e.touches[0].y / 25);
    let ctx = this.ctx;
    var pair=false; //是否配對(duì)成功
    this.print_map(); //輸出map地圖
    console.log("clicked at" + x + "，" + y);
    if (map[x][y] == " ")
      console.log("提示此處無方塊");
    else {
      if (Select_first == false) {
        p1 = new Point(x, y);
        //畫選定（x1,y1)處的框線
        ctx.setStrokeStyle("red");
        ctx.strokeRect(x * 25, y * 25, 25, 25);
        Select_first = true;
      } else {
        p2 = new Point(x, y);
        //判斷第二次單擊的方塊是否已被第一次單擊選取，如果是則返回。
        if ((p1.x == p2.x) && (p1.y == p2.y))
          return;
        //畫選定（x2,y2)處的框線
        console.log('第二次單擊的方塊' + x + ', ' + y)
        ctx.strokeRect(x * 25, y * 25, 25, 25);
        if (this.IsSame(p1, p2) && this.IsLink(p1, p2)) { //判斷是否連通
          console.log('連通' + x + ', ' + y);
          Select_first = false;
          //畫選中方塊之間連接線
          this.drawLinkLine(p1, p2);
          map[p1.x][p1.y] = ' '; //清空記錄地圖中第1個(gè)方塊
          map[p2.x][p2.y] = ' '; //清空記錄地圖中第2個(gè)方塊
          pair=true; //配對(duì)成功，定時(shí)0.5秒后刷新屏幕
          linePointStack=[];
          if(this.isWin()) { //游戲結(jié)束
            console.log("游戲結(jié)束,你通關(guān)了??！");
          }
        } else {
          //不能連通則取消選定的2個(gè)方塊
          Select_first = false;
        }
      }
    }
    ctx.draw();
    if (pair) { //配對(duì)成功
      this.print_map(); //重新輸出map地圖
      //定時(shí)0.5秒后刷新屏幕
      setTimeout(function () {
        ctx.draw();
      }, 500); //過半秒
    }
  },

 IsSame(p1,p2)判斷p1 ( x1, y1)與p2(x2, y2)處的方塊圖案是否相同。

IsSame: function(p1, p2) {
    if (map[p1.x][p1.y] == map[p2.x][p2.y]) {
      console.log("clicked at IsSame");
      return true;
    }
    return false;
  },

以下是畫方塊之間連接線的方法。

drawLinkLine(p1,p2)繪制(p1,p2)所在2個(gè)方塊之間的連接線。判斷l(xiāng)inePointStack數(shù)組長(zhǎng)度，如果為0，則是直接連通。linePointStack數(shù)組長(zhǎng)度為1，則是一折連通，linePointStack存儲(chǔ)是一折連通的折點(diǎn)。linePointStack數(shù)組長(zhǎng)度為2，則是2折連通，linePointStack存儲(chǔ)是2折連通的兩個(gè)折點(diǎn)。

drawLinkLine: function(p1, p2) { //畫連接線
    console.log("折點(diǎn)數(shù)" + linePointStack.length);
    if (linePointStack.length == 0) //直線聯(lián)通
      this.drawLine(p1, p2);
    if (linePointStack.length == 1) { //一折連通
      var z = linePointStack.pop();
      console.log("一折連通點(diǎn)z" + z.x + z.y);
      this.drawLine(p1, z);
      this.drawLine(p2, z);
    }
    if (linePointStack.length == 2) { //2折連通
      var z1 = linePointStack.pop()
      //print("2折連通點(diǎn)z1",z1.x,z1.y)
      this.drawLine(p2, z1)
      var z2 = linePointStack.pop()
      //print("2折連通點(diǎn)z2",z2.x,z2.y)
      this.drawLine(z1, z2);
      this.drawLine(p1, z2);
    }
  },

 drawLinkLine(p1,p2)繪制(p1,p2)之間的直線。

drawLine: function(p1, p2) { //繪制(p1, p2)之間的直線
    let ctx = this.ctx;
    ctx.beginPath();
    ctx.moveTo(p1.x * 25 + 12, p1.y * 25 + 12);
    ctx.lineTo(p2.x * 25 + 12, p2.y * 25 + 12);
    ctx.stroke();
  },

 IsWin()檢測(cè)是否尚有非未被消除的方塊，即地圖map中元素值非空（" "），如果沒有則已經(jīng)贏得了游戲。

/**
   *#檢測(cè)是否已經(jīng)贏得了游戲
   */
  isWin: function() {
    //檢測(cè)是否尚有非未被消除的方塊
    //(非BLANK_STATE狀態(tài))
    for (var y = 0; y < Height; y++)
      for (var x = 0; x < Width; x++)
        if (map[x][y] != " ")
          return false;
    return true;
  }

以上就是“基于Javascript怎么開發(fā)連連看游戲小程序”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。