JavaScript贪吃蛇
// 思路分析
// 三个对象 map snake Food
// map 宽800px和高500px 可以整除 snake每节的宽度
// food 宽10px 高10px 相当于每一节蛇的宽度 同样有(x,y)
// snake 不是一个整体,分为三节 头 身 尾 每节都有自己的坐标(x,y),但是三节又是连着的
// 功能介绍
/*
通过蛇头吃到在界面上随机出现的点,然后增加自身的长度
增加的原理:就是在body数组中增加一条数据,吃到一个点后,重新创建一条蛇
点(food):界面上的点每隔一定时间会随机出现,因为点是一个对象,我们把界面上所有随机出现的点放在一个allFood数组中,当蛇吃到点后,会去这个数组中匹配吃到的那个点,然后移除该点(这样做游戏的性能会比较差,因为当界面上点很多很多的时候,这个判断就比较费时了,时间复杂度貌似O(n))
空格键控制暂停开始,以及蛇的速度,原理:修改定时器的时间,时间越小,蛇移动越快
*/
// 蛇的移动方式
/*
1、蛇的移动方向由蛇头控制
2、后一个节点走到前一个节点的位置上,头的位置是我们控制的
3、移动的距离是一个点的单位长度,而不是px,这个根据自己的点大小进行控制
4、移动的范围是在地图内,注意:蛇不是以px移动的,所以一上面的为例,蛇的移动范围在 0<=x<=800 0<=y<=500,但是这是距离,水平移动的次数 0~80 垂直移动的次数 0~50
*/
// 蛇的死亡情况
/*
1、当蛇头碰到边界的时候
2、当蛇头碰到自身的时候
*/
不多说,直接上代码,在代码中有注释,自己理解
界面上调用
<script>
var map = new Map();
var food = new Food();
var snake = new Snake();
var speed = 200;
var allFood = [];
allFood.push(food);
var timeId1 = setInterval(() => {
var food = new Food();
allFood.push(food);
}, 5000);
var timeId = setInterval("snake.move(timeId,timeId1,allFood)", speed);
var isPause = true;
document.onkeydown = function (e) {
switch (e.keyCode) {
case 37:
if (snake.direction != "right") {
snake.direction = "left";
}
break;
case 38:
if (snake.direction != "down") {
snake.direction = "up";
}
break;
case 39:
if (snake.direction != "left") {
snake.direction = "right";
}
break;
case 40:
if (snake.direction != "up") {
snake.direction = "down";
}
break;
case 32:
if (isPause) {
clearInterval(timeId);
isPause = false;
} else {
speed -= 50;
if (speed <= 50) speed = 50;
timeId = setInterval("snake.move(timeId,timeId1,allFood)", speed);
isPause = true;
}
break;
}
}
</script>
地图map对象(其实是构造函数,但是用的是oop的思想)
一个全局变量count,用于计分
var count = 0;
// 定义地图对象构造函数
function Map() {
// 设置地图对象的宽高和背景色
this.width = 800;
this.height = 500;
this.bgColor = "#000";
// 创建map对象,并且显示在界面上
this.showMap = function ()