javascript实现简单的贪吃蛇游戏

网络编程 2025/1/19 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

javascript实现简单的贪吃蛇游戏，功能很简单，代码也很实用，就不多废话了，小伙伴们参考注释吧。

<html>
<head>
  <meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>贪吃蛇</title>
<script type="text/javascript">
  var map;  //地图
  var snake; //蛇
  var food;  //食物
  var timer; //定时器
  var initSpeed=200; //初始定时器时间间隔（毫秒）,间接代表蛇移动速度
  var nowSpeed=initSpeed; //游戏进行时蛇移动速度
  var grade=0;  //积分
  var flag=1;   //（可间接看做）关卡
  //地图类
  function Map(){
    this.width=800;
    this.height=400;
    this.position='absolute';
    this.color='#EEEEEE';
    this._map=null;
    //生成地图
    this.show=function(){
      this._map=document.createElement('div');
      this._map.style.width=this.width+'px';
      this._map.style.height=this.height+'px';
      this._map.style.position=this.position;
      this._map.style.backgroundColor=this.color;
      document.getElementsByTagName('body')[0].appendChild(this._map);
    }
  }
  //食物类
  function Food(){
    this.width=20;
    this.height=20;
    this.position='absolute';
    this.color='#00FF00';
    this.x=0;
    this.y=0;
    this._food;
    //生成食物
    this.show=function(){
      this._food=document.createElement('div');
      this._food.style.width=this.width+'px';
      this._food.style.height=this.height+'px';
      this._food.style.position=this.position;
      this._food.style.backgroundColor=this.color;
      this.x=Math.floor(Math.random()*map.width/this.width);
      this.y=Math.floor(Math.random()*map.height/this.width);
      this._food.style.left=this.x*this.width;
      this._food.style.top=this.y*this.height;
 
      map._map.appendChild(this._food);
    }
  }
  //蛇类
  function Snake(){
    this.width=20;
    this.height=20;
    this.position='absolute';
    this.direct=null;//移动方向
    //初始蛇身
    this.body=new Array(
        [3,2,'red',null],//蛇头
        [2,2,'blue',null],
        [1,2,'blue',null]
      );
    //生成蛇身
    this.show=function(){
      for(var i=0;i<this.body.length;i++){
        if(this.body[i][3]==null){
          this.body[i][3]=document.createElement('div');
          this.body[i][3].style.width=this.width;
          this.body[i][3].style.height=this.height;
          this.body[i][3].style.position=this.position;
          this.body[i][3].style.backgroundColor=this.body[i][2];
          map._map.appendChild(this.body[i][3]);
        }
        this.body[i][3].style.left=this.body[i][0]*this.width+'px';
        this.body[i][3].style.top=this.body[i][1]*this.height+'px';
      }
    }
    //控制蛇移动
    this.move=function(){
       
      var length=this.body.length-1;
      for(var i=length;i>0;i--){
        this.body[i][0]=this.body[i-1][0];
        this.body[i][1]=this.body[i-1][1];
      }
 
      switch(this.direct){
        case 'right':
          this.body[0][0]=this.body[0][0]+1;
          break;
        case 'left':
          this.body[0][0]=this.body[0][0]-1;
          break;
        case 'up':
          this.body[0][1]=this.body[0][1]-1;
          break;
        case 'down':
          this.body[0][1]=this.body[0][1]+1;
          break;
      }
       
      this.condition();
      this.show();
    }
    //定时器，开始游戏时，调用
    this.speed=function(){
      timer=setInterval('snake.move()',initSpeed);
    }
    //条件处理
    this.condition=function(){
      //吃食物
      if(this.body[0][0]==food.x&&this.body[0][1]==food.y){
        grade++;
        this.body[[this.body.length]]=[0,0,'blue',null];
        map._map.removeChild(food._food)
        food.show();
      }
      //判断是否撞墙
      if(this.body[0][0]<0||this.body[0][0]>=map.width/this.width||this.body[0][1]<0||this.body[0][1]>=map.height/this.height){
        alert('game over');
        clearInterval(timer);
        return ;
      }
      //判断是否撞到自身
      for(var i=1;i<this.body.length;i++){
        if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1]){
          alert('game over');
          clearInterval(timer);
          return ;
        }
      }
      //速度提升处理，积分每曾2分，速度提升一倍
      if(grade/2==flag){
        clearInterval(timer);
        flag++;
        nowSpeed=initSpeed/flag;
        timer=setInterval('snake.move()',nowSpeed);
      }
      document.title='贪吃蛇 积分'+grade+' 速度等级'+initSpeed/nowSpeed;
 
    }
  }
 
  document.onkeydown=function(event){
    //按下任意键，开始游戏
    if(snake.direct===null){
      snake.direct='right';
      snake.speed();
    }
    //控制方向，W S D A分别代表 上下右左
    switch(window.event?window.event.keyCode:event.keyCode){//浏览器兼容处理
      case 87 :
        snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'up';//避免反向移动，触发死亡bug
        break;
      case 83 :
        snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'down';
        break;
      case 68 :
        snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'right';
        break;
      case 65 :
        snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'left';
        break;
    }
  }
  //自动加载游戏
  window.onload=function(){
    map=new Map();
    map.show();
    food=new Food();
    food.show();
    snake=new Snake();
    snake.show();
     
  }
</script>
</head>
<body>
</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

javascript,贪吃蛇

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“javascript实现简单的贪吃蛇游戏”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月19日

javascript实现简单的贪吃蛇游戏

JavaScript操作cookie类实例

javascript制作2048游戏

评论“javascript实现简单的贪吃蛇游戏”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接