//创建坐标数组
var gridData = [];
//设置网络行列排布
var td = 30;
var tf = 30;
//设置蛇身大小
var snakeBody = 20;
//在确定新的蛇头坐标时,我们会拿下面的对象和新的蛇头坐标对比
var directionNum = {
left:{x:-1,y:0,flag:"left"},
right:{x:1,y:0,flag:"right"},
up:{x:0,y:-1,flag:"top"},
down:{x:0,y:1,flag:"bottom"}
}
//设置蛇的身体排布
var snake = {
//这个是蛇一开始就移动的方向
direction:directionNum.right,
snakePos:[
{x:0,y:0,domContent:"",flag:"body"},
{x:1,y:0,domContent:"",flag:"body"},
{x:2,y:0,domContent:"",flag:"body"},
{x:3,y:0,domContent:"",flag:"head"},
]
}
//设置食物的配置信息
var food = {
x:0,y:0,domContent:""
}
//分数
var score = 0;
//时间延迟
var time = 100;
//计时器
var Timerstop = null;
//以下便是整体设置
function initGame() {
//初始化地图
for(var i = 0;i < td;i++){
for(var j = 0;j < tf;j++){
gridData.push({
x:i,
y:j
})
}
}
//绘制蛇
drawsnake(snake);
//绘制食物
drawfood();
}
//绘制蛇身
function drawsnake(snake){
for(var i = 0;i < snake.snakePos.length;i++){
if(!snake.snakePos[i].domContent){
//如果进入此条件则代表第一次创建蛇身
snake.snakePos[i].domContent = document.createElement('div');
snake.snakePos[i].domContent.style.position = 'absolute';
snake.snakePos[i].domContent.style.width = snakeBody + 'px';
snake.snakePos[i].domContent.style.height = snakeBody + 'px';
snake.snakePos[i].domContent.style.left = snake.snakePos[i].x * snakeBody + 'px';
snake.snakePos[i].domContent.style.top = snake.snakePos[i].y * snakeBody + "px";
if(snake.snakePos[i].flag === "head"){
//说明这是蛇身
snake.snakePos[i].domContent.style.background = `url("img/right.png") center/contain no-repeat`;
switch (snake.direction.flag) {
case 'top':{
snake.snakePos[i].domContent.style.transform = `rotate(-90deg)`;
break;
}
case 'right':{
snake.snakePos[i].domContent.style.transform = `rotate(0deg)`;
break;
}
case 'bottom':{
snake.snakePos[i].domContent.style.transform = `rotate(90deg)`;
break;
}
case 'left':{
snake.snakePos[i].domContent.style.transform = `rotate(180deg)`;
break;
}
}
} else {
snake.snakePos[i].domContent.style.background = "#9ddbb1";
snake.snakePos[i].domContent.style.borderRadius = '50%';
}
}
document.querySelector(".container").appendChild(snake.snakePos[i].domContent);
}
}
//碰撞检测
function isCollide(newhead){
var CollideCheackInfo = {
isCollide : false,
isEat : false
}
//如果蛇碰到了墙
if(newhead.x < 0 || newhead.x >= td || newhead.y < 0 || newhead.y >=tf){
CollideCheackInfo.isCollide = true;
return CollideCheackInfo;
}
//检测是否碰到了自己
for(let i = 0;i < snake.snakePos.length;i++){
if(newhead.x === snake.snakePos[i].x && newhead.y === snake.snakePos[i].y){
CollideCheackInfo.isCollide = true;
return CollideCheackInfo;
}
}
//检测是否吃到食物
if(newhead.x === food.x && newhead.y === food.y){
CollideCheackInfo.isEat = true;
score++;
}
return CollideCheackInfo;
}
//绘制食物
function drawfood(){
while(true){
//设置一个可以跳出循环的条件
var isrepect = false;
//首先食物的位置坐标肯定是随机的,但是不能在界外生成
food.x = Math.floor(Math.random()*td);
food.y = Math.floor(Math.random()*tf);
//其次食物还不能生成在蛇的身上
for(let i = 0;i < snake.snakePos.length;i++){
if(snake.snakePos[i].x === food.x && snake.snakePos[i].y === food.y){
var isrepect = true;
break;
//这里就是跳出循环,则可以重新遍历食物的坐标
}
}
if(!isrepect){
//如果进入了这个循环则代表食物的坐标没有任何的问题,则可以跳出整个死循环
break;
}
}
//下面进行食物的样式配置
if(!food.domContent){
food.domContent = document.createElement("div");
food.domContent.style.width = snakeBody + "px";
food.domContent.style.height = snakeBody + "px";
food.domContent.style.background = "green";
food.domContent.style.borderRadius = "50%";
food.domContent.style.position = "absolute";
document.querySelector(".container").append(food.domContent);
}
food.domContent.style.left = food.x * snakeBody + "px";
food.domContent.style.top = food.y * snakeBody + "px";
}
//蛇的移动方法
function snakemove(){
//根据计算算出旧蛇头的坐标
var oldhead = snake.snakePos[snake.snakePos.length - 1];
//在这里就是将新的位置改为新头
var newhead = {
domContent : "",
x : oldhead.x + snake.direction.x,
y : oldhead.y + snake.direction.y,
flag : "head"
}
//进行碰撞试验
var Collideresult = isCollide(newhead);
if(Collideresult.isCollide){
if(window.confirm(`游戏结束,您的成绩为${score}分,是否重新开始游戏`)){
document.querySelector('.container').innerHTML = '';
snake = {
//这个是蛇一开始就移动的方向
direction:directionNum.right,
snakePos:[
{x:0,y:0,domContent:"",flag:"body"},
{x:1,y:0,domContent:"",flag:"body"},
{x:2,y:0,domContent:"",flag:"body"},
{x:3,y:0,domContent:"",flag:"head"},
]
}
food = {
x:0,y:0,domContent:""
}
score = 0;
initGame();
} else {
document.onkeydown = null;
clearInterval(timerstop);
}
return;
}
//在这里则就是将旧的头部改为身体
oldhead.flag = "body";
oldhead.domContent.style.background = "#9ddbb1";
oldhead.domContent.style.borderRadius = "50%";
snake.snakePos.push(newhead);
//这里查看是否吃到了食物
if(Collideresult.isEat){
//吃到了食物就得重新生成食物
drawfood();
} else {
//没有吃到食物就得移除最后一个元素
document.querySelector('.container').removeChild(snake.snakePos[0].domContent);
snake.snakePos.shift();
}
//接下来就是重新绘制蛇身
drawsnake(snake);
}
//计时器函数
function startTime(){
Timerstop = setInterval(function(){
snakemove();
},time)
}
function bindEvent(){
//首先是键盘事件,控制台可获得字符
document.onkeydown = function(e){
if((e.key === "ArrowRight" || e.key === "d") && snake.direction.flag !== 'left'){
//此时蛇向右
snake.direction = directionNum.right;
}
if((e.key === "ArrowLeft" || e.key === "a") && snake.direction.flag !== 'right'){
//此时蛇向左
snake.direction = directionNum.left;
}
if((e.key === "ArrowUp" || e.key === "w") && snake.direction.flag !== 'down'){
//此时蛇向上
snake.direction = directionNum.up;
}
if((e.key === "ArrowDown" || e.key === "s") && snake.direction.flag !== 'top'){
//此时蛇向下
snake.direction = directionNum.down;
}
//用计时器进行移动
startTime();
}
}
//以下是主方法
function main(){
//先进行方法的初始化
initGame();
//绑定事件
bindEvent();
}
main();
为什么我的贪吃蛇速度会越来越快,不断移动的话会使他的速度变得更快。这是因为钻了计时器的空子吗?求解,快急死孩子了。
最新推荐文章于 2025-05-23 20:42:37 发布