⼩程序之贪吃蛇⼩游戏开发（完整代码）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;
//⽤来获取屏幕⼤⼩
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.lor);
context.beginPath();
<(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;
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;
}
}
wx.drawCanvas({
canvasId:"snakeCanvas",
Actions()
});
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.x = rand(0,windowWidth);
this.y = rand(0,windowHeight);
}
for (var i = 0; i < 20; i++) {
var foodObj = new Food();
foods.push(foodObj);
}
animate();
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。