JS贪吃蛇总结

来源：互联网发布：实体店客源流失数据编辑：程序博客网时间：2024/04/27 11:11
先上代码
<!DOCTYPE html><html><head><title></title><script type="text/javascript"></script></head><body></body></html><script type="text/javascript">//1.绘制地图function Map(){var len = 20;var w = 800;var h = 500;this.showmap = function(){var div = document.createElement('div');div.style.width=w+"px";div.style.height=h+"px";div.style.float="left";div.style.backgroundImage="url(12.jpg)";document.body.appendChild(div);}}//1.绘制食物function Food(){var len = 20; this.xFood=0; this.yFood=0; this.pian = null;this.showfood = function(){if (this.pian===null) {this.pian = document.createElement('div');this.pian.style.width=len+"px";this.pian.style.height=len+"px";this.pian.style.backgroundColor="green";this.pian.style.position = "absolute";document.body.appendChild(this.pian);}this.xFood = len*Math.floor(Math.random()*40);this.yFood = len*Math.floor(Math.random()*25);this.pian.style.left = this.xFood+"px";this.pian.style.top = this.yFood+"px";}}//绘制小蛇function Snake(){var len =20;this.defenobj=0;this.redirect = "right";this.foodnum = 0;this.snakebody = [[0,1,'green','null'],[1,1,'green','null'],[2,1,'green','null'],[3,1,'red','null']];this.showsnake = function(){for (var i = 0; i < this.snakebody.length; i++) {if (this.snakebody[i][3] === 'null') {this.snakebody[i][3] = document.createElement('div');this.snakebody[i][3].style.position = "absolute";this.snakebody[i][3].style.width=len+"px";this.snakebody[i][3].style.height=len+"px";this.snakebody[i][3].style.backgroundColor=this.snakebody[i][2];document.body.appendChild(this.snakebody[i][3]);}this.snakebody[i][3].style.left = this.snakebody[i][0]*len+"px";this.snakebody[i][3].style.top = this.snakebody[i][1]*len+"px";}this.shudu();}this.movesnake = function(){for (var i = 0; i < this.snakebody.length-1; i++) {this.snakebody[i][0] = this.snakebody[i+1][0];this.snakebody[i][1] = this.snakebody[i+1][1];}if (this.redirect=='right') {this.snakebody[this.snakebody.length-1][0]++;}else if(this.redirect=='left') {this.snakebody[this.snakebody.length-1][0]--;}else if(this.redirect=='top') {this.snakebody[this.snakebody.length-1][1]--;}else if(this.redirect=='down') {this.snakebody[this.snakebody.length-1][1]++;}//获得蛇头坐标var xtousnake = this.snakebody[this.snakebody.length-1][0]*len;var ytousnake = this.snakebody[this.snakebody.length-1][1]*len;if (xtousnake == food.xFood && ytousnake == food.yFood) {var newjie = [this.snakebody[0][0],this.snakebody[0][1],'green','null'];this.foodnum++;this.defen();console.log(this.foodnum);this.snakebody.unshift(newjie);food.showfood();}if (xtousnake>39*len || xtousnake*len<0 || ytousnake>24*len || ytousnake*len<0) {alert("游戏结束！！");clearInterval(this.mytime);return false;}for (var k = 0; k < this.snakebody.length-1; k++) {if (xtousnake == this.snakebody[k][0]*len && ytousnake===this.snakebody[k][1]*len) {alert('自残啦，，游戏结束！！');clearInterval(this.mytime);return false;}this.snakebody[k]}this.showsnake();}//控制蛇的速度this.shudu = function(){clearInterval(this.mytime);this.mytime = setInterval("snake.movesnake()",1000-this.foodnum*200);}this.defen = function(){if (this.defenobj ==0) {var defendiv = document.createElement('div');var h = document.createElement('h2');var htext = document.createTextNode('你的得分：');var font = document.createElement('font');font.id = "sss";var ftext = document.createTextNode('0');defendiv.style.width="400px";defendiv.style.height="500px";defendiv.style.float = "left";defendiv.style.backgroundColor="#90EE90";h.appendChild(htext);defendiv.appendChild(h);font.appendChild(ftext);defendiv.appendChild(font);document.body.appendChild(defendiv);this.defenobj=1;return;}var abc = document.getElementById('sss');abc.innerHTML=this.foodnum*10;}}window.onload = function(){var map = new Map();map.showmap();food = new Food();food.showfood();snake = new Snake();snake.showsnake();snake.defen();document.onkeyup = function(evt){var num  = evt.keyCode;switch(num){case 38:snake.redirect='top';break;case 40:snake.redirect='down';break;case 37:snake.redirect='left';break;case 39:snake.redirect='right';break;}}}</script>
计算得分，用dom2创建，在同个函数创建后，再获取创建的对象然后动态赋值。蛇吃食的算法是，从后面开始坐标赋值。
0 0