javascript贪吃蛇完整版(源码)


Posted in Javascript onDecember 09, 2013

javascript贪吃蛇完整版 注释完整,面向对象

<html>
<head>
    <title>贪吃蛇 Snake v2.4</title>
<style>
    body{
        font-size:9pt;
    }
    table{
        border-collapse: collapse;
        border:solid #333 1px;
    }
    td{
        height: 10px;
        width: 10px;
        font-size: 0px;
    }
    .filled{
        background-color:blue;
    }
</style>
</head>
<script>
    function $(id){return document.getElementById(id);}
/**************************************************************
* javascript贪吃蛇 v2.4 <br />
* v2.4修正了蛇身颜色可以随着蛇前进而移动
**************************************************************/
    //贪吃蛇类
    var Snake = {
        tbl: null,
        /**
        * body: 蛇身,数组放蛇的每一节,
        * 数据结构{x:x0, y:y0, color:color0},
        * x,y表示坐标,color表示颜色
        **/
        body: [],
        //当前移动的方向,取值0,1,2,3, 分别表示向上,右,下,左, 按键盘方向键可以改变它
        direction: 0,
        //定时器
        timer: null,
        //速度
        speed: 250,
        //是否已经暂停
        paused: true,
        //行数
        rowCount: 30,
        //列数
        colCount: 30,
        //初始化
        init: function(){
            var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
            this.tbl = $("main");
            var x = 0;
            var y = 0;
            var colorIndex = 0;
            //产生初始移动方向
            this.direction = Math.floor(Math.random()*4);
            //构造table
            for(var row=0;row<this.rowCount;row++){
                var tr=this.tbl.insertRow(-1);
                for(var col=0;col<this.colCount;col++) {
                    var td=tr.insertCell(-1);
                }
            }
            //产生20个松散节点
            for(var i=0; i<10; i++){
                x = Math.floor(Math.random()*this.colCount);
                y = Math.floor(Math.random()*this.rowCount);
                colorIndex = Math.floor(Math.random()*7);
                if(!this.isCellFilled(x,y)){
                    this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
                }
            }
            //产生蛇头
            while(true){
                x = Math.floor(Math.random()*this.colCount);
                y = Math.floor(Math.random()*this.rowCount);
                if(!this.isCellFilled(x,y)){
                    this.tbl.rows[y].cells[x].style.backgroundColor = "black";
                    this.body.push({x:x,y:y,color:'black'});
                    break;
                }
            }
            this.paused = true;
            //添加键盘事件
            document.onkeydown= function(e){
                if (!e)e=window.event;
                switch(e.keyCode | e.which | e.charCode){
                  case 13: {
                    if(Snake.paused){
                      Snake.move();
                      Snake.paused = false;
                    }
                    else{
                       //如果没有暂停,则停止移动
                      Snake.pause();
                      Snake.paused = true;
                    }
                    break;
                  }
                    case 37:{//left
                        //阻止蛇倒退走
                        if(Snake.direction==1){
                            break;
                        }
                        Snake.direction = 3;
                        break;
                    }
                    case 38:{//up
                       //快捷键在这里起作用
                      if(event.ctrlKey){
                         Snake.speedUp(-20);
                        break;
                      }
                        if(Snake.direction==2){//阻止蛇倒退走
                            break;
                        }
                        Snake.direction = 0;
                        break;
                    }
                    case 39:{//right
                        if(Snake.direction==3){//阻止蛇倒退走
                            break;
                        }
                        Snake.direction = 1;
                        break;
                    }
                    case 40:{//down
                      if(event.ctrlKey){
                         Snake.speedUp(20);
                        break;
                      }
                        if(Snake.direction==0){//阻止蛇倒退走
                            break;
                        }
                        Snake.direction = 2;
                        break;
                    }
                }
            }
        },
        //移动
        move: function(){
            this.timer = setInterval(function(){
                Snake.erase();
                Snake.moveOneStep();
                Snake.paint();
            }, this.speed);
        },
        //移动一节身体
        moveOneStep: function(){
            if(this.checkNextStep()==-1){
                clearInterval(this.timer);
                alert("Game over!/nPress Restart to continue.");
                return;
            }
            if(this.checkNextStep()==1){
                var _point = this.getNextPos();
                var _x = _point.x;
                var _y = _point.y;
                var _color = this.getColor(_x,_y);
                this.body.unshift({x:_x,y:_y,color:_color});
                //因为吃了一个食物,所以再产生一个食物
                this.generateDood();
                return;
            }
            //window.status = this.toString();
            var point = this.getNextPos();
            //保留第一节的颜色
            var color = this.body[0].color;
            //颜色向前移动
            for(var i=0; i<this.body.length-1; i++){
              this.body[i].color = this.body[i+1].color;
            }
            //蛇尾减一节, 蛇尾加一节,呈现蛇前进的效果
            this.body.pop();
            this.body.unshift({x:point.x,y:point.y,color:color});
            //window.status = this.toString();
        },
        //探寻下一步将走到什么地方
        pause: function(){
          clearInterval(Snake.timer);
          this.paint();
        },
        getNextPos: function(){
            var x = this.body[0].x;
            var y = this.body[0].y;
            var color = this.body[0].color;
            //向上
            if(this.direction==0){
                y--;
            }
            //向右
            else if(this.direction==1){
                x++;
            }
            //向下
            else if(this.direction==2){
                y++;
            }
            //向左
            else{
                x--;
            }
            //返回一个坐标
            return {x:x,y:y};
        },
        //检查将要移动到的下一步是什么
        checkNextStep: function(){
            var point = this.getNextPos();
            var x = point.x;
            var y = point.y;
            if(x<0||x>=this.colCount||y<0||y>=this.rowCount){
                return -1;//触边界,游戏结束
            }
            for(var i=0; i<this.body.length; i++){
                if(this.body[i].x==x&&this.body[i].y==y){
                    return -1;//碰到自己的身体,游戏结束
                }
            }
            if(this.isCellFilled(x,y)){
                return 1;//有东西
            }
            return 0;//空地
        },
        //擦除蛇身
        erase: function(){
            for(var i=0; i<this.body.length; i++){
                this.eraseDot(this.body[i].x, this.body[i].y);
            }
        },
        //绘制蛇身
        paint: function(){
            for(var i=0; i<this.body.length; i++){
                this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
            }
        },
        //擦除一节
        eraseDot: function(x,y){
            this.tbl.rows[y].cells[x].style.backgroundColor = "";
        },
        paintDot: function(x,y,color){
            this.tbl.rows[y].cells[x].style.backgroundColor = color;
        },
        //得到一个坐标上的颜色
        getColor: function(x,y){
            return this.tbl.rows[y].cells[x].style.backgroundColor;
        },
        //用于调试
        toString: function(){
            var str = "";
            for(var i=0; i<this.body.length; i++){
                str += "x:" + this.body[i].x + " y:" + this.body[i].y + " color:" + this.body[i].color + " - ";
            }
            return str;
        },
        //检查一个坐标点有没有被填充
        isCellFilled: function(x,y){
            if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
                return false;
            }
            return true;
        },
        //重新开始
        restart: function(){
            if(this.timer){
                clearInterval(this.timer);
            }
            for(var i=0; i<this.rowCount;i++){
              this.tbl.deleteRow(0);
            }
            this.body = [];
            this.init();
            this.speed = 250;
        },
        //加速
        speedUp: function(time){
          if(!this.paused){
            if(this.speed+time<10||this.speed+time>2000){
              return;
            }
            this.speed +=time;
            this.pause();
            this.move();
          }
        },
        //产生食物。
        generateDood: function(){
          var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
        var x = Math.floor(Math.random()*this.colCount);
            var y = Math.floor(Math.random()*this.rowCount);
            var colorIndex = Math.floor(Math.random()*7);
            if(!this.isCellFilled(x,y)){
                this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
            }
        }
    };
</script>
<body onload="Snake.init();">
/*************************************************************<br />
* javascript贪吃蛇 v2.4<br />
**************************************************************/<br />
<table id="main" border="1" cellspacing="0" cellpadding="0"></table>
<input type="button" id="btn" value="开始/暂停" />点左边按钮或按Enter开始/暂停游戏<br />
<input type="button" id="reset" value="重新开始" /><br />
<input type="button" id="upSpeed" value="加速" />点左边按钮或按Ctrl + ↑加速<br />
<input type="button" id="downSpeed" value="减速" />点左边按钮或按Ctrl + ↓减速
<script>
  $('btn').onclick = function(){
    if(Snake.paused){
      Snake.move();
      Snake.paused = false;
    }
    else{
      Snake.pause();
      Snake.paused = true;
    }
  };
  $("reset").onclick = function(){
    Snake.restart();
    this.blur();
  };
  $("upSpeed").onclick = function(){
    Snake.speedUp(-20);
  };
  $("downSpeed").onclick = function(){
    Snake.speedUp(20);
  };
</script>
</body>
</html>
Javascript 相关文章推荐
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
关于js内存泄露的一个好例子
Dec 09 #Javascript
JS连连看源码完美注释版(推荐)
Dec 09 #Javascript
解析Javascript中难以理解的11个问题
Dec 09 #Javascript
深入理解Javascript作用域与变量提升
Dec 09 #Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 #Javascript
jquery div拖动效果示例代码
Dec 08 #Javascript
jquery垂直公告滚动实现代码
Dec 08 #Javascript
You might like
人族 TERRAN 概述
2020/03/14 星际争霸
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
PHP new static 和 new self详解
2017/02/19 PHP
CSS常用网站布局实例
2008/04/03 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python pygame实现五子棋小游戏
2020/10/26 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
自我鉴定三原则
2014/01/13 职场文书
公司会议策划方案
2014/05/17 职场文书
仰望星空观后感
2015/06/10 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL