贪吃蛇游戏.rar

  • jiangzr
    了解作者
  • JavaScript
    开发工具
  • 117KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 1
    下载次数
  • 2021-04-12 23:11
    上传日期
js写的网页贪吃蛇小游戏,适合新手学习,巩固js基础知识
贪吃蛇游戏.rar
  • 贪吃蛇游戏
  • code
  • 贪吃蛇.html
    4KB
  • img
  • food.jpg
    7.3KB
  • food.png
    63.4KB
  • bj.jpg
    44.9KB
内容介绍
<!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>
评论
    相关推荐