微信小程序：贪吃蛇

wx.js

var startX = 0;
var startY = 0;
var moveX = 0;
var moveY = 0;
//移动位置和开始位置的坐标差值
var X = 0;
var Y = 0;
//蛇的对象
var snake = {x: 0,y: 0,color: "#ff0000", w: 20,h: 20,
}
//食物对象
var food = {x: 0,y: 0,color: "#ff0000", w: 20,h: 20,
}
//蛇身对象数据
var snakeArr = [];
//方向
var direction = "right";
var directio = null;
//窗口宽高
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
//食物数组
var foodArr = [];
//记录吃的食物数
var foodNum = 0;Page({
//按下获取坐标 touchs触摸
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){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);function draw(obj){context.setFillStyle(obj.color);context.beginPath();context.rect(obj.x,obj.y,obj.w,obj.h);context.closePath();context.fill();}setInterval(function animate(){switch (direction){case "left":  snake.x -= 20;break;case "right": snake.x += 20;break;case "top":   snake.y -= 20;break;case "bottom": snake.y += 20;break;}draw(snake)//绘制食物for (var i = 0; i < foodArr.length; i++) {var food = foodArr[i];draw(food);if(collide(snake,food)){//碰到食物 改变食物位置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);}}//向蛇身体添加最新的位置snakeArr.push({x: snake.x,y: snake.y,w: 20,h: 20,color: "#fff000",});if(snakeArr.length>foodNum){ snakeArr.shift() }for(let i=0;i<snakeArr.length-1;i++){let body=snakeArr[i]draw(body)}context.draw();//界限if(snake.x>windowWidth){ snake.x=-20 }else if(snake.x<0){ snake.x=windowWidth }else if(snake.y>windowHeight){ snake.y=-20 }else if(snake.y<0){ snake.y=windowHeight }},300)//随机数function rand(max, min){ return parseInt(Math.random() * (max - min) + min)}//碰撞函数 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){foodNum++//食物个数return true;} }//初始食物function foodstart(){for(let i=0;i<20;i++){food.x = rand(0, windowWidth);food.y = rand(0, windowHeight);var w = rand(10, 20);food.w = w;food.h = w; food.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";foodArr.push(JSON.parse(JSON.stringify(food)))//制作食物并传到数组}} foodstart();//启动食物} 
})

WX.ML

<canvas canvas-id="snakCanvas" style="width:100%;height:100%;background-color:#ccc" 
bindtouchstart="canvasStart" bindtouchmove="canvasMove"></canvas>

WX.CSS

Page{height: 100%
}