關于此文章能看懂的條件：對使用微信開發工具熟悉一點即可
- 在微信開發工具中，用小程式方式新建或打卡專案，
注意：如果是下載來的專案，解壓后，要選
小程式打開，選錯是打不開的哦~
如圖
- 專案源代碼里可看到，打開檔案再pages/index/index.js，里面有開始實作的，從
onLoad()加載方法中寫初始化邏輯代碼，定義好需要處理資料
onLoad() {
//...
//這里實作了初始化邏輯方法，呼叫執行
this.initData();
//...
}
/**
* 實作方法
*/
initData: function(){
var data = this.data;
//定義所有棋子集合，先空著，后面畫出來就有
data.allPieces = [];
//定義選中的棋子，默認null就當沒選
data.selectedPiece = null;
//定義狀態的，看甲乙哪一方棋手先手了，再賦值，
data.flag = null;
//定義游戲是未開始
data.playing = false;
//定義目的棋子存的資料，用于判斷是否可吃
data.piece = null;
//定義拾起來的棋子存的資料
data.site = null;
//定義游戲是未結束
data.gameover = false;
//...
}
- 準備一個畫布
Canvas，畫一個棋盤,需要用到strokeRect()畫矩形 - 接著畫縱橫線相連，用
moveTo()和lineTo()畫線，最后用stroke()在棋盤上畫出方格效果
onLoad() {
//...
//這里實作畫棋盤的邏輯方法，呼叫執行
this.initChessboard();
//...
}
/**
* 實作方法
*/
initChessboard: function(){
var canvA = wx.createCanvasContext('chess_a');
canvA.strokeRect(padding, padding, data.canvMaxW - 2 * padding, data.canvMaxH - 2 * padding);
//...
for (var i = 1, index = 0, w = data.canvMaxW - padding; i < 9; i++) {
index = padding + cH * i;
canvA.moveTo(padding, index);
canvA.lineTo(w, index);
}
//...
canvA.stroke();
canvA.draw();
}
如圖
-
想到棋盤是固定且不會動的特點，棋盤就放在一個新建視圖層中，檔案在/pages/index/index.wxml，把這圖層作為游戲背景，
PS：如果不想畫棋盤，嫌麻煩的?，就網上找個類似棋盤的背景圖來代替，用筆者上面的截圖做背景圖也可以😀 -
接下來，就是畫棋子🚩了，需要提供每一個棋子的標識以及位置等一些相關資料，這樣棋子動了以后，更新資料才能重新去畫，實作棋子變動效果
onLoad() {
//...
//這里是畫所有棋子的方法，呼叫執行
this.initAllChessmen();
//...
}
/**
* 實作方法
*/
initAllChessmen: function(){
//...
for (var i = 0; i < data.allPieces.length; i++) {
this.drawPiece(data, data.canvB, data.allPieces[i]);
}
//...
}
/**
* 實作畫棋子方法
*/
drawPiece: function(data, canv, piece, isSelect, isClear, site){
//...
}
如圖
- 大致實作思路已講明了，推薦收藏記下來，專案例子全部原始碼已打包上傳到
CSDN下載，CSDN下載地址點這里 中國象棋-單機游戲-微信小程式原始碼
- 有下載或贊賞的，TA遠方 作者在此謝過，您的支持是作者繼續寫原創的動力！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/352186.html
標籤：其他