贪吃蛇游戏.rar_javascript_贪吃蛇；_JavaScript/JQuery

<!DOCTYPE html> <meta charset = 'utf-8' content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <html> <head> <title></title> <style type="text/css"> body,div{margin: 0;padding: 0;} #main{width: 800px;height: 400px;position: relative;left: 350px;top: 50px} #map{width: 800px;height: 400px;background: url(../img/bj.jpg);position: relative;} button{width: 100px;height: 40px;} </style> </head> <body> <div id="main"> <button>开始游戏</button> <div id = "map"></div> </div> <script type="text/javascript"> //设计蛇 function Snake(){ this.w = 20; this.h = 20; this.direction = 'right'; this.body = [ {x:2,y:0}, {x:1,y:0}, {x:0,y:0} ]; //显示蛇 this.display = function(){ for(var i=0;i<this.body.length;i++){ var oimg = document.createElement('img'); oimg.src = "../img/snake.jpg"; this.body[i].flag = oimg; oimg.style.width = this.w + 'px'; oimg.style.height = this.h + 'px'; oimg.style.position = "absolute"; oimg.style.left = this.body[i].x * this.w + 'px'; oimg.style.top = this.body[i].y * this.h + 'px'; document.getElementById('map').appendChild(oimg); } } //让蛇跑起来 this.run = function(){ for(var i=this.body.length-1;i>0;i--){ this.body[i].x = this.body[i-1].x; this.body[i].y = this.body[i-1].y; } //蛇头 switch(this.direction){ case 'right': this.body[0].x +=1; break; case 'left': this.body[0].x -=1; break; case 'up': this.body[0].y -=1; break; case 'down': this.body[0].y +=1; break; } //蛇不能跑出界 if(this.body[0].x<0 || this.body[0].x>39 || this.body[0].y<0 || this.body[0].y>19){ clearInterval(timer); alert("GAME OVER!"); return false; } //判断蛇是否吃到自己 for(var i=4;i<this.body.length;i++){ if(this.body[i].x == this.body[0].x && this.body[i].y == this.body[0].y){ clearInterval(timer); alert("你吃到了自己，游戏结束！"); return false; } } //删除旧的，生成新的 for(var i=0;i<this.body.length;i++){ if(this.body[i].flag != null){ document.getElementById('map').removeChild(this.body[i].flag); } } this.display(); //判断蛇是否吃到食物 if(this.body[0].x == food.x && this.body[0].y == food.y){ this.body.push({x:0,y:0,flag:null}); document.getElementById('map').removeChild(food.flag); food.display(); } } } //食物登场 function Food(){ this.w = 20; this.h = 20; this.display = function(){ var oimg = document.createElement('img'); oimg.src = "../img/food.jpg"; this.flag = oimg; oimg.style.width = this.w + 'px'; oimg.style.height = this.h + 'px'; this.x = Math.floor(Math.random()*40); this.y = Math.floor(Math.random()*20); oimg.style.position = "absolute"; oimg.style.left = this.x * this.w + 'px'; oimg.style.top = this.y * this.h + 'px'; document.getElementById('map').appendChild(oimg); } } var snake = new Snake(); snake.display(); var food = new Food(); food.display(); var timer; //跑起来 document.getElementsByTagName('button')[0].onclick = function(){ clearInterval(timer); timer = setInterval("snake.run()",200); } //改变方向 document.body.onkeydown = function(av){ switch(av.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; } } </script> </body> </html>