上代码:
tan.js
// pages/tan/tan.js
var startX=0;
var startY=0;
var moveX = 0;
var moveY = 0;
//移动位置和开始位置的坐标差值
var X=0;
var Y =0;
//蛇头的对象
var snakeHead={
x:0,
y:0,
color:"red",
w:20,
h:20
}
//蛇身对象数据
var snakeArr=[];
//方向
var direction ="right";
var directio=null;
//食物数组
var foodArr=[];
//窗口宽高
var windowWidth=0;
var windowHeight=0;
//撞上为true
var bool=true;
//记录吃的食物数
var foodNum=0;
Page({
//按下获取坐标
touchstart:function(e){
startX = e.touches[0].x;
startY = e.touches[0].y;
},
touchmove: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){
directio="right"
}else if(Math.abs(X)>Math.abs(Y)&&X<0){
directio = "left"
}else if(Math.abs(Y)>Math.abs(X)&& Y>0){
directio = "bottom"
}else if(Math.abs(Y)>Math.abs(X)&&Y<0){
directio = "top"
}
direction = directio;
},
onReady:function(){
//获取画布上下文
var context = wx.createCanvasContext("snakCanvas",this);
//帧数
var num=0;
function draw(obj){
context.setFillStyle(obj.color);
context.beginPath();
context.rect(obj.x, obj.y, obj.w, obj.h);
//关闭路径
context.closePath();
//填充
context.fill();
}
//碰撞函数 obj1蛇 obj2 食物对象
function collide(obj1,obj2){
var l1 = obj1.x;
var r1 = l1 + obj1.w;
var t1 = obj1.y;
var b1 = t1 + obj1.h;
var l2 = obj2.x;
var r2 = l2 + obj2.w;
var t2 = obj2.y;
var b2 = t2 + obj2.h;
if(r1>l2 && l1<r2 && b1>t2 && t1<b2){
return true;
}else{
return false;
}
}
function animation(){
if(num==1){
console.log(bool)
}
if (num % 10 == 0) {
//向蛇身体添加最新的位置
snakeArr.push({
x: snakeHead.x,
y: snakeHead.y,
w: 20,
h: 20,
color: "#00ff00"
});
if (snakeArr.length>foodNum){
snakeArr.shift()
}
switch (direction) {
case "right":
snakeHead.x += snakeHead.w;
if (Math.abs(snakeHead.x) >= windowWidth && snakeHead.x>0){
snakeHead.x = 0;
}
break;
case "left":
snakeHead.x -= snakeHead.w;
if (Math.abs(snakeHead.x+20) == 0 ) {
snakeHead.x = windowWidth;
}
break;
case "top":
snakeHead.y -= snakeHead.h;
if (snakeHead.y+20<=0){
snakeHead.y = windowHeight;
}
console.log(windowHeight)
// console.log(snakeHead.y)
break;
case "bottom":
snakeHead.y += snakeHead.h;
if (snakeHead.y >= windowHeight){
snakeHead.y =0;
}
break;
}
}
num++;
//绘制蛇头
draw(snakeHead);
//绘制蛇身
for (var i = 0; i < snakeArr.length;i++){
var snake = snakeArr[i]
draw(snake);
}
//绘制食物
for (var i = 0; i < foodArr.length; i++) {
var food = foodArr[i];
draw(food);
if(collide(snakeHead,food)){
foodNum++;
//如果碰到食物,那么该食物就重新随机生成
bool=true;
food.x = rand(0, windowWidth);
food.y = rand(0, windowHeight);
food.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";
var w = rand(10, 20);
food.w = w;
food.h = w;
draw(food);
}else{
bool=false;
}
}
requestAnimationFrame(animation)
wx.drawCanvas({
canvasId:"snakCanvas",
actions:context.getActions()
})
}
//随机数
function rand(max,min){
return parseInt(Math.random() * (max - min) + min)
}
var res = wx.getSystemInfoSync()
windowWidth = res.windowWidth;
windowHeight = res.windowHeight;
//食物对象
function Food(){
this.x = rand(0, windowWidth);
this.y = rand(0, windowHeight);
var w =rand(10,20);
this.w=w;
this.h=w;
this.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255)+")";
}
for (var i = 0; i < 20; i++) {
var food = new Food();
foodArr.push(food);
}
animation()
}
})
tan.wxml
<canvas canvas-id="snakCanvas" style="width:100%;height:100%;background-color:#ccc" bindtouchstart="touchstart" bindtouchmove="touchmove"></canvas>
tan.wxss
/* pages/tan/tan.wxss */
Page{
height: 100%
}
效果图:真的超级简单简陋的