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 相关文章推荐
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
小程序自定义弹框效果
Nov 16 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利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
js 单引号 传递方法
2009/06/22 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
总裁岗位职责
2013/12/04 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
租房协议书
2014/04/10 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
python对文档中元素删除,替换操作
2022/04/02 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript