1:首先是index.wxml文件代码:
<!--index.wxml-->
<canvas canvas-id='snakeCanvas' style='width:100%;height:100%;background-color:#ccc;'
bindtouchstart='canvasStart' bindtouchmove='canvasMove' bindtouchend='canvasEnd'></canvas>
2:然后是index.js文件代码
//index.js
//手指按下时的坐标
var startX = 0;
var startY = 0;
//手指在canvas上移动的坐标
var moveX = 0;
var moveY = 0;
//移动位置跟开始位置差值
var X =0;
var Y = 0;
//手指方向
var direction = null;
//蛇移动方向
var snakeDirection = "right";
//身体对象(数组)
var snakeBodys = [];
//食物对象(数组)
var foods = [];
//窗口的宽高
var windowWidth = 0;
var windowHeight = 0;
//用来获取屏幕大小
wx.getSystemInfo({
success: function (res) {
windowWidth = res.windowWidth;
windowHeight = res.windowHeight;
}
});
//蛇头对象
var snakeHead = {
x: parseInt(Math.random() * (windowWidth-20)),
y: parseInt(Math.random() * (windowHeight-20)),
color: '#ff0000', //这里只能接受16进制 没法写red这样
w: 20,
h: 20,
reset:function(){
this.x = parseInt(Math.random() * (windowWidth - 20));
this.y = parseInt(Math.random() * (windowHeight - 20));
}
}
//用于确定是否删除
var collideBol = true;
Page({
canvasStart:function(e){
startX = e.touches[0].x;
startY = e.touches[0].y;
},
canvasMove:function(e){
moveX = e.touches[0].x;
moveY = e.touches[0].y;
X = moveX - startX;
Y = moveY - startY;
if(Math.abs(X) > Math.abs(Y) && X > 0){
direction = "right";
}else if(Math.abs(X) > Math.abs(Y) && X < 0){
direction = "left";
}else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
direction = "down"; //这里很奇怪,是我数学坐标系没学好吗?明明Y轴正坐标是向上才对啊
}else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
direction = "top";
}
},
canvasEnd:function(){
snakeDirection = direction;
},
onReady:function(){
var context = wx.createContext();
//帧数
var frameNum = 0;
function draw(obj){
context.setFillStyle(obj.color);
context.beginPath();
context.rect(obj.x, obj.y, obj.w, obj.h);
context.closePath();
context.fill();
}
//蛇头与食物碰撞函数
function collide(obj1,obj2){
var l1 = obj1.x;
var r1 = obj1.w + l1;
var t1 = obj1.y;
var b1 = obj1.h+t1;
var l2 = obj2.x;
var r2 = obj2.w + l2;
var t2 = obj2.y;
var b2 = obj2.h + t2;
//这里1是蛇头方块的上下左右边框 2是食物,同样是上下左右
//(当蛇头又边框撞到食物左边框也就是大于左边框时就是碰撞了)
if(r1>l2 && l1<r2 && b1 > t2 && t1< b2){
return true;
}else{
return false;
}
}
//蛇头与墙壁碰撞函数
function collide2(obj1){
var l1 = obj1.x;
var r1 = obj1.w + l1;
var t1 = obj1.y;
var b1 = obj1.h + t1;
if (l1 <=snakeHead.w || r1 >=windowWidth || t1 <=snakeHead.h || b1 >= windowHeight){
return true;
}else{
return false;
}
}
function directionSet(){
switch (snakeDirection) {
case "left":
snakeHead.x -= snakeHead.w;
break;
case "right":
snakeHead.x += snakeHead.w;
break;
case "down":
snakeHead.y += snakeHead.h;
break;
case "top":
snakeHead.y -= snakeHead.h;
break;
}
}
function animate(){
frameNum++;
if (frameNum % 20 == 0){
//蛇身体数组添加一个上一个的位置(身体对象)
snakeBodys.push({
x: snakeHead.x,
y: snakeHead.y,
w: 20,
h: 20,
color: "#00ff00"
});
if (snakeBodys.length > 4) {
//移除不用的身体位置
if (collideBol){
snakeBodys.shift();
}else{
collideBol = true;
}
}
directionSet();
}
//绘制蛇头
draw(snakeHead);
if (collide2(snakeHead)) {
collideBol = false;
snakeHead.reset();
snakeBodys=[];
draw(snakeHead);
}
//绘制蛇身
for(var i=0;i<snakeBodys.length;i++){
var snakeBody = snakeBodys[i];
draw(snakeBody);
}
//绘制食物
for(var i=0;i<foods.length;i++){
var foodObj = foods[i];
draw(foodObj);
if (collide(snakeHead,foodObj)){
//console.log("撞上了");
collideBol = false;
foodObj.reset();
}
}
wx.drawCanvas({
canvasId:"snakeCanvas",
actions:context.getActions()
});
requestAnimationFrame(animate);
}
function rand(min,max){
return parseInt(Math.random()*(max-min))+min;
}
//构造食物对象
function Food() {
var w = rand(10,20);
this.w = w;
this.h = w;
this.x = rand(this.w, windowWidth - this.w);
this.y = rand(this.h, windowHeight - this.h);
this.color = "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
//内部方法 (重置食物位置颜色)
this.reset = function (){
this.x = rand(0,windowWidth);
this.y = rand(0,windowHeight);
this.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";
}
}
for (var i = 0; i < 20; i++) {
var foodObj = new Food();
foods.push(foodObj);
}
animate();
}
})