上代码：
tan.js
// pages/tan/tan.jsvar 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;//撞上为truevar 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)&&X0){ directio="right" }else if(Math.abs(X)Math.abs(Y)&&X0){ directio = "left" }else if(Math.abs(Y)Math.abs(X)&& Y0){ directio = "bottom" }else if(Math.abs(Y)Math.abs(X)&&Y0){ 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(r1l2 && l1r2 && b1t2 && t1b2){ 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.lengthfoodNum){ snakeArr.shift() } switch (direction) { case "right": snakeHead.x += snakeHead.w; if (Math.abs(snakeHead.x) = windowWidth && snakeHead.x0){ 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"/canvastan.wxss
/* pages/tan/tan.wxss */Page{ height: 100%}效果图：真的超级简单简陋的
