游戲效果圖
大家的時(shí)間都很寶貴,話不多說, 直接進(jìn)入主題 貪吃蛇項(xiàng)目主要由兩個(gè)文件完成(snakeGame.wxml+snakeGame.js), 這兩個(gè)文件也是必不可少的...現(xiàn)在先看snakeGame.wxml文件, 內(nèi)容很簡(jiǎn)單, 如下 <canvas style="width: 100%; height: 100%; background-color: #ccc" canvas-id="snakeCanvas" class="snake-canvas-C" bindtouchstart="touchStart" bindtouchmove="touchMove"></canvas> 創(chuàng)建畫布標(biāo)簽 配置一些樣式 綁定了兩個(gè)事件 ---bindtouchstart="touchStart" bindtouchmove="touchMove" 在snakeGame.js 對(duì)這兩個(gè)事件(touchStart手指觸摸屏幕/touchMove手指在手機(jī)上移動(dòng))進(jìn)行處理
下面著重解釋snakeGame.js文件內(nèi)容 // 核心代碼為 function beginDraw (){ // ........邏輯操作代碼 // 調(diào)用 wx.drawCanvas,通過 canvasId 指定在哪張畫布上繪制,通過 actions 指定繪制行為 wx.drawCanvas({ canvasId: 'snakeCanvas', actions: context.getActions() // 獲取繪圖動(dòng)作數(shù)組 }); // 循環(huán)執(zhí)行動(dòng)畫繪制 requestAnimationFrame(beginDraw); } beginDraw(); } 上面代碼會(huì)循環(huán)調(diào)用beginDraw()函數(shù), 進(jìn)行蛇身, 食物的添加等操作...下面逐行解釋代碼: // 獲取手機(jī)屏幕寬/高 wx.getSystemInfo({ success: function(res) { windowW = res.windowWidth; windowH = res.windowHeight; } }) // 游戲開始的時(shí)候, 彈窗進(jìn)行游戲說明 wx.showModal({ title: '請(qǐng)開始游戲', content: "每得"+perSocre+"分,蛇身增長1 ", success: function(res) { if (res.confirm) { beginGame(); } else { initGame(); // 點(diǎn)擊取消 返回上一頁 wx.navigateBack({ delta: 1 }) } } }); 游戲需要使用的變量 // 手指開始位置 var startX = 0; var startY = 0; // 手指移動(dòng)路徑 var moveX = 0; var moveY = 0; // 差值 var diffX = 0; var diffY = 0; var snakeW = 10; var snakeH = 10; var context = null; // 蛇頭 var snakeHead = { color: "#0000ff", x: 0, y: 0, w: snakeW, h: snakeH }; // 蛇身 數(shù)組 var snakeBodys = []; // 窗口寬/高 var windowW = 0; var windowH = 0; // 食物 var foods = []; // 蛇頭移動(dòng)方向 var snakeMoveDirection = "right"; // 總得分(吃到的食物大小-寬度的總和) var score = 0; // 蛇身總長(每得perSocre分 +1) var snakeLength = 0; // 是否變長/即移除蛇身 (每得perSocre分 變長-蛇身+1) var shouldRemoveBody = true; // (每得perSocre分 變長-蛇身+1) var perSocre = 5; // 得了count個(gè)perSocre分 var count = 1; // 蛇移動(dòng)的速度(幀頻率-----越大越慢) var defaultSpeedLevel = 10; var moveSpeedLevel = defaultSpeedLevel; // 減慢動(dòng)畫 var perform = 0; // 吃到食物的次數(shù) var eatFoodCount=0; // 每 speederPerFood 次吃到食物加速 var speederPerFood = 2; // 初始化為2 表示每吃到2次食物, 蛇的移動(dòng)速度增加 初始化游戲配置函數(shù) // 初始化游戲環(huán)境 function initGame(){ snakeHead.x= 0; snakeHead.y = 0; snakeBodys.splice(0,snakeBodys.length);//清空數(shù)組 snakeMoveDirection = "right"; // 上下文 context = wx.createContext(); foods.splice(0,foods.length); score = 0; count = 1; moveSpeedLevel = defaultSpeedLevel; // 恢復(fù)默認(rèn)幀頻率 perform = 0; eatFoodCount = 0; // 創(chuàng)建食物 20個(gè) for (var i = 0; i<20; i++) { var food = new Food(); foods.push(food); } } snakeGame.wxml文件中綁定的兩個(gè)函數(shù)(手機(jī)點(diǎn)擊touchStart/手機(jī)移動(dòng)touchMove)函數(shù) touchStart: function (e){ startX = e.touches[0].x; startY = e.touches[0].y; // console.log("開始點(diǎn)擊"); }, touchMove: function (e){ // console.log("開始拖動(dòng)手指"); moveX = e.touches[0].x; moveY = e.touches[0].y; diffX = moveX - startX; diffY = moveY - startY; if ( Math.abs(diffX) > Math.abs(diffY) && diffX>0 && !(snakeMoveDirection == "left") ){ // 向右 snakeMoveDirection = "right"; // console.log("向右"); } else if (Math.abs(diffX) > Math.abs(diffY) && diffX<0 && !(snakeMoveDirection == "right") ){ // 向左 snakeMoveDirection = "left"; // console.log("向左"); } else if (Math.abs(diffX) < Math.abs(diffY) && diffY>0 && !(snakeMoveDirection == "top") ){ // 向下 snakeMoveDirection = "bottom"; // console.log("向下"); } else if (Math.abs(diffX) < Math.abs(diffY) && diffY<0 && !(snakeMoveDirection == "bottom") ){ // 向上 snakeMoveDirection = "top"; // console.log("向上"); } }, 完整可運(yùn)行demo請(qǐng)移駕githubhttps://github.com/CoderPeak/---snakeGame重要的事情后面說... 微信小程序是不允許用來開發(fā)游戲的, 確切的說是不允許在微信小程序上架游戲(比較tx主業(yè)就是游戲, 不能砸了自己的飯碗)... 此項(xiàng)目請(qǐng)?jiān)谀M器上運(yùn)行... |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)