js实现贪吃蛇游戏含注释
程序员文章站
2022-06-22 13:45:42
本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下两个小时完成的,有点简陋。直接看效果。打开调试面板,在resource面板,新建snippet粘贴以下代码,右键snippet...
本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下
两个小时完成的,有点简陋。
直接看效果。打开调试面板,在resource面板,新建snippet
粘贴以下代码,右键snippet,run。
clearinterval(timer); document.body.innerhtml = ""; //每秒移动多少格 let speed = 10; let speedupmul = 3; //是否能穿墙 let isthroughthewall = true; //行数 let row = 40; let headcolor = 'red'; let bodycolor = 'green'; let foodcolor = 'yellow'; let bordercolor = 'grey'; // 游戏全局变量 let hasfood = false; //游戏状态 let gamestaus = 'start'; let hasaccelerate = false; let maincontainer = document.createelement("div"); maincontainer.style.width = 20 * row + 1 + "px"; maincontainer.style.height = 20 * row + 1 + "px"; maincontainer.style.margin = "0 auto"; maincontainer.style.position = "relative"; maincontainer.style.border = "1px solid " + bordercolor; document.body.appendchild(maincontainer); for(let i = 0;i<row;i++){ let margintop = 20 * i + "px"; for(let j = 0;j<row;j++){ let marginleft = j * 20 + "px"; let tempdiv = document.createelement('div'); tempdiv.style.width = "19px"; tempdiv.style.height = "19px"; tempdiv.style.margintop = margintop; tempdiv.style.marginleft = marginleft; tempdiv.style.border = "0.5px solid " + bordercolor; tempdiv.style.position = "absolute"; tempdiv.id = j + "div" + i; maincontainer.appendchild(tempdiv); } } class cell{ constructor(x, y, color){ if(isthroughthewall){ if(x < 0) x = row-1; if(x > row - 1) x = 0; if(y < 0) y = row - 1; if(y > row - 1) y = 0; }else{ if(x < 0 || y < 0|| x > row - 1 || y > row - 1){ clearinterval(timer); alert('游戏结束'); return; } } this.x = x; this.y = y; this.color = color; let tempdiv = document.getelementbyid(x + 'div' + y); if(tempdiv) tempdiv.style.backgroundcolor = color; } } snake = { head : {}, body : [], dire : 1 } let headx = math.floor(math.random() * 14) + 3; let heady = math.floor(math.random() * 14) + 3; snake.head = new cell(headx, heady, headcolor); //上右下左 let direction = [1, 2, 3, 4] snake.dire = direction[math.floor(math.random() * 4)]; if(snake.dire == 1){ snake.body.push(new cell(snake.head.x, snake.head.y+1, bodycolor)); snake.body.push(new cell(snake.head.x, snake.head.y+2, bodycolor)); snake.body.push(new cell(snake.head.x, snake.head.y+3, bodycolor)); } if(snake.dire == 2){ snake.body.push(new cell(snake.head.x-1, snake.head.y, bodycolor)); snake.body.push(new cell(snake.head.x-2, snake.head.y, bodycolor)); snake.body.push(new cell(snake.head.x-3, snake.head.y, bodycolor)); } if(snake.dire == 3){ snake.body.push(new cell(snake.head.x, snake.head.y-1, bodycolor)); snake.body.push(new cell(snake.head.x, snake.head.y-2, bodycolor)); snake.body.push(new cell(snake.head.x, snake.head.y-3, bodycolor)); } if(snake.dire == 4){ snake.body.push(new cell(snake.head.x+1, snake.head.y, bodycolor)); snake.body.push(new cell(snake.head.x+2, snake.head.y, bodycolor)); snake.body.push(new cell(snake.head.x+3, snake.head.y, bodycolor)); } function game(){ if(gamestaus == 'pause'){ return; } if(gamestaus == 'gameover'){ clearinterval(timer); alert('游戏结束'); return; } initfood(); let snakeheadx = snake.head.x; let snakeheady = snake.head.y; let color = ''; if(snake.dire == 1){ let tempdiv = document.getelementbyid(snakeheadx + 'div' + (snakeheady-1)); if(tempdiv) color = tempdiv.style.backgroundcolor; snake.head = new cell(snakeheadx, snakeheady - 1, headcolor); } if(snake.dire == 2){ let tempdiv = document.getelementbyid((snakeheadx + 1) + 'div' + snakeheady); if(tempdiv) color = tempdiv.style.backgroundcolor; snake.head = new cell(snakeheadx + 1, snakeheady, headcolor); } if(snake.dire == 3){ let tempdiv = document.getelementbyid(snakeheadx + 'div' + (snakeheady+1)); if(tempdiv) color = tempdiv.style.backgroundcolor; snake.head = new cell(snakeheadx, snakeheady + 1, headcolor); } if(snake.dire == 4){ let tempdiv = document.getelementbyid((snakeheadx - 1) + 'div' + snakeheady); if(tempdiv) color = tempdiv.style.backgroundcolor; snake.head = new cell(snakeheadx - 1, snakeheady, headcolor); } snake.body.unshift(new cell(snakeheadx, snakeheady, bodycolor)); if(color && color == foodcolor){ hasfood = false; initfood(); }else if(color && color == bodycolor){ gamestaus = 'gameover'; }else{ let lastbody = snake.body.pop(); new cell(lastbody.x, lastbody.y, ''); } } var timer = setinterval(game, 10 / speed * 100) /** * 初始化食物 */ function initfood(){ while(!hasfood){ let x = math.floor(math.random() * row); let y = math.floor(math.random() * row); let snakebody = snake.body; let enable = true; if(snake.head.x == x && snake.head.y == y){ enable = false; } for(sbody of snakebody){ if(sbody.x == x && sbody.y == y){ enable = false; break; } } if(enable){ new cell(x, y, foodcolor); hasfood = true; } } } document.onkeydown = function(e){ if(e.keycode == 38){ //上 if(snake.dire != 3 && snake.dire != 1){ snake.dire = 1; }else if(snake.dire == 1){ if(!hasaccelerate){ clearinterval(timer); hasaccelerate = true; speed = speed * speedupmul; timer = setinterval(game, 10 / speed * 100) } } } if(e.keycode == 39){ //右 if(snake.dire != 4 && snake.dire != 2){ snake.dire = 2; }else if(snake.dire == 2){ if(!hasaccelerate){ clearinterval(timer); hasaccelerate = true; speed = speed * speedupmul; timer = setinterval(game, 10 / speed * 100) } } } if(e.keycode == 40){ //下 if(snake.dire != 1 && snake.dire != 3){ snake.dire = 3; }else if(snake.dire == 3){ if(!hasaccelerate){ clearinterval(timer); hasaccelerate = true; speed = speed * speedupmul; timer = setinterval(game, 10 / speed * 100) } } } if(e.keycode == 37){ //左 if(snake.dire != 2 && snake.dire != 4){ snake.dire = 4; }else if(snake.dire == 4){ if(!hasaccelerate){ clearinterval(timer); hasaccelerate = true; speed = speed * speedupmul; timer = setinterval(game, 10 / speed * 100) } } } //空格键暂停 if(e.keycode == 32){ if(gamestaus == 'start'){ gamestaus = 'pause'; }else if(gamestaus == 'pause'){ gamestaus = 'start'; } } } document.onkeyup = function(e){ if(e.keycode == 38){ //上 if(snake.dire == 1 && hasaccelerate){ clearinterval(timer); hasaccelerate = false; speed = speed / speedupmul; timer = setinterval(game, 10 / speed * 100) } } if(e.keycode == 39){ //右 if(snake.dire == 2 && hasaccelerate){ clearinterval(timer); hasaccelerate = false; speed = speed / speedupmul; timer = setinterval(game, 10 / speed * 100) } } if(e.keycode == 40){ //下 if(snake.dire == 3 && hasaccelerate){ clearinterval(timer); hasaccelerate = false; speed = speed / speedupmul; timer = setinterval(game, 10 / speed * 100) } } if(e.keycode == 37){ //左 if(snake.dire == 4 && hasaccelerate){ clearinterval(timer); hasaccelerate = false; speed = speed / speedupmul; timer = setinterval(game, 10 / speed * 100) } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 使用jQuery选择器的优势
下一篇: 一个Jsp初学者的学习过程(二)