javascript实现简单的贪吃蛇游戏


Posted in Javascript onMarch 31, 2015

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 相关文章推荐
JavaScript 滚轮事件使用说明
Mar 07 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
JavaScript中的 new 命令
May 22 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
javascript制作2048游戏
Mar 30 #Javascript
JavaScript模拟实现继承的方法
Mar 30 #Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 #Javascript
JS实现向表格中动态添加行的方法
Mar 30 #Javascript
JS实现向表格行添加新单元格的方法
Mar 30 #Javascript
JS实现控制表格行文本对齐的方法
Mar 30 #Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 #Javascript
You might like
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
PHP输入流php://input介绍
2012/09/18 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
python实现自主查询实时天气
2018/06/22 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
使用K.function()调试keras操作
2020/06/17 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
中间件分为哪几类
2012/03/14 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
python爬虫selenium模块详解
2021/03/30 Python
MySQL日期时间函数知识汇总
2022/03/17 MySQL
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏