// pages/game/game.js
var positions;
const stdWid = 20;
var direction = -1;//2上1左 -2下-1右
var headNode;
var cvs;
var headImg;
var food1,food2;
var interval;
var speed;
Page({
/**
* 页面的初始数据
*/
data: {
score:0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
speed = options.speed;
this.initGame()
},
//移动函数
snakeMove: function (e) {
headNode = positions[positions.length - 1];
var newNode = {"x":headNode.x,"y":headNode.y};
switch (direction) {
case -1:
newNode.x = headNode.x+stdWid;
break;
case 1:
newNode.x = headNode.x-stdWid;
break;
case -2:
newNode.y = headNode.y+stdWid;
break;
case 2:
newNode.y = headNode.y-stdWid;
break;
default:
break;
}
positions.push(newNode);
},
//改变方向函数
changeDirection: function (e) {
console.log(e)
var newDir = e.target.dataset.direct
if (direction + newDir != 0) {
direction = newDir;
headImg = "/images/head_" + e.target.dataset.img + ".jpg"
}
},
// 绘制蛇函数
drawSnack: function (e) {
cvs.drawImage("/images/food.jpg",food1.x,food1.y,stdWid,stdWid)
cvs.drawImage("/images/food2.jpg",food2.x,food2.y,stdWid,stdWid)
for (let index = 0; index < positions.length - 1; index++) {
const e = positions[index];
cvs.drawImage("/images/star.jpg", e.x, e.y, stdWid, stdWid)
}
cvs.drawImage(headImg, positions[positions.length - 1].x, positions[positions.length - 1].y, stdWid, stdWid)
cvs.draw()
},
//collisionTrack 游戏元素碰撞函数
collisionTrack:function(e){
// 1)碰到边界，提示游戏结束，停止计时器
if(headNode.x < 0 || headNode.x >= 280 || headNode.y < 0 || headNode.y >= 280){
clearInterval(interval)
this.handleModel("撞墙了，是否继续？")
}
// 2)碰到food1，随机生成新的food1 加长，加分
if (headNode.x == food1.x && headNode.y == food1.y) {
food1 = {'x':Math.floor(Math.random() * 14) * stdWid,
'y':Math.floor(Math.random() * 14) * stdWid}
this.setData({score:this.data.score+1});
if(this.data.score >= 6){
clearInterval(interval)
this.handleModel("你赢了！要再玩一次吗？")
}
}else{
positions.shift();
}
// 3)碰到food2，判断长度够不够，够则减4；不够die并停止计时
if (headNode.x == food2.x && headNode.y == food2.y) {
if(positions.length >= 6){
positions.splice(0,5);
}else {
clearInterval(interval);
this.handleModel("中毒太深~要再来一次吗？")
}
food2 = {'x':Math.floor(Math.random() * 14) * stdWid,
'y':Math.floor(Math.random() * 14) * stdWid}
}
},
handleModel:function(content){
wx.showModal({
content: content,
complete: (res) => {
if (res.cancel) {
wx.navigateBack()
}
if (res.confirm) {
this.initGame()
}
}
})
},
initGame:function(){
clearInterval(interval)
this.setData({score:0})
cvs = wx.createCanvasContext('gameCanvas');
headImg = "/images/head_right.jpg";
console.log("游戏初始化。。")
positions = [
{'x': 20, 'y': 20},
{'x': 40, 'y': 20},
{'x': 60, 'y': 20},
{'x': 80, 'y': 20},
{'x': 100,'y': 20},
]
food1 = {'x':Math.floor(Math.random() * 14) * stdWid,
'y':Math.floor(Math.random() * 14) * stdWid}
food2 = {'x':Math.floor(Math.random() * 14) * stdWid,
'y':Math.floor(Math.random() * 14) * stdWid}
interval = setInterval(() => {
// var head = positions[positions.length -1];
// newNode = {'x':head.x+20,'y':head.y};
this.snakeMove();
this.drawSnack();
this.collisionTrack();
}, speed)
direction = -1
}
})
标签：positions,headNode,js,food1,game,贪吃蛇,var,stdWid,Math From： https://blog.51cto.com/u_16349720/9113036