当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript小游戏贪吃蛇(详细注释)

Javascript
js 方法实现返回多个数据的代码
Ext 表单布局实例代码
javascript document.referrer 用法
JavaScript 字符编码规则
JS 动态加载脚本的4种方法
jQuery textarea的长度进行验证
jQuery select的操作实现代码
jQuery 1.2.x 升級 1.3.x 注意事项
关于viewport,Ext.panel和Ext.form.panel的关系
日期 时间js控件
JavaScript的parseInt 进制问题
javascript 有用的脚本函数
javascript 两个字符串比较函数
javascript 代码运行器
js arguments.callee的应用代码
JavaScript Table排序 2.0 (更新)
给Function做的OOP扩展
<script defer> defer 是什么意思
FF和IE之间7个JavaScript的差异
javascript获取当前ip的代码

No. « 135 136 137 138 »

技术文章搜索

关键字

Javascript小游戏贪吃蛇(详细注释)

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 334 ::
收藏到网摘: n/a

作者：CNwander
测试：IE7 FF3.0.14

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

Tips: (老鸟跳过，希望对新手有所帮助)

  1. IE: element.innerText = FF: element.textContent；
  2. setAttribute("cellpadding","0")在IE中无效，正确写法cellPadding (一不小心就犯错了)；
  3. FF中，使用绑定在某元素上的键盘事件前，先让它获得焦点，document也不例外，这容易疏忽；
  4. 在IE中create table element，记得加tbody；

代码（有详细注释）：

// code by CNwander.
// common
function $(str) {
    return document.getElementById(str);
}
function $tag(str,target) {
    target = target || document;
    return target.getElementsByTagName(str);
}
// global
// const
var WIDTH = 20, //网格宽度
    HEIGHT = 20, //网格高度
    SAY = ["相当不错，虽然说和CNwander还不是一个级别的","可以啊，再加点油都可以和CNwander媲美了！","一个字，牛，连CNwander都甘拜下风了","差不多行了，别把游戏玩爆了"];
var len = 3, //蛇的长度
    speed, //爬行速度
    gridElems = multiArray(WIDTH,HEIGHT), //单元格对象
    carrier, //承载对象(食物，障碍，滑板，刹车)
    snake, //蛇每节的坐标点
    info, //交互对话
    btnStart, //开始按钮
    topScore = len,
    snakeTimer, //蛇行走计时器
    brakeTimers = [], //随机刹车
    skateTimers = [], //随机滑板
    directkey; // 方向键值 37-40 左上右下
window.onload = function(){
    info = $("say");
    btnStart = $("btnStart");
    initGrid(); //网格初始化
    document.onkeydown = attachEvents; //绑定方向事件
    btnStart.onclick = function (e) {
        btnStart.blur(); //firefox中必须释放焦点
        start(); //游戏开始
        btnStart.setAttribute("disabled",true);
        btnStart.style.color = "#aaa";
    }
}
//开始游戏
function start() {
    len = 3;
    speed = 10;
    directkey = 39;
    carrier = multiArray(WIDTH,HEIGHT);
    snake = new Array();
    clear();
    initSnake(); //蛇初始化
    addObject("food");
    walk();
    addRandomBrake();
}
//创建网格
function initGrid() {
    var body = $tag("body")[0];
    var table = document.createElement("table"),
        tbody = document.createElement("tbody")
    for(var j = 0; j < HEIGHT; j++) { 
        var col = document.createElement("tr"); 
        for(var i = 0; i < WIDTH; i++) { 
            var row = document.createElement("td");
            gridElems[i][j] = col.appendChild(row); 
        }
        tbody.appendChild(col); 
    }
    table.appendChild(tbody);
    $("snakeWrap").appendChild(table);
}
//创建蛇
function initSnake() {
    var pointer = randomPointer(len-1, len-1, WIDTH/2);
    for(var i = 0; i < len; i++) {
        var x = pointer[0] - i,
            y = pointer[1];
        snake.push([x,y]);
        carrier[x][y] = "cover";
    }
}
//添加键盘事件
function attachEvents(e) {
    e = e || event;
    directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向键、反向无效
    return false;
}
function walk() {
    if(snakeTimer) window.clearInterval(snakeTimer);
    snakeTimer = window.setInterval(step, Math.floor(3000/speed));
}
function step() {
    //获取目标点
    var headX = snake[0][0],
        headY = snake[0][1];
    switch(directkey) {
        case 37: headX -= 1; break;
        case 38: headY -= 1; break;
        case 39: headX += 1; break
        case 40: headY += 1; break;
    }
    //碰到边界，阻挡物，则结束游戏
    if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || carrier[headX][headY] == "block" || carrier[headX][headY] == "cover" ) {
        trace("GAME OVER");
        if(getText($("score"))*1 < len) trace(len,$("score"));
        btnStart.removeAttribute("disabled");
        btnStart.style.color = "#000";
        window.clearInterval(snakeTimer);
        for(var i = 0; i < brakeTimers.length; i++) window.clearTimeout(brakeTimers[i]);
        for(var i = 0; i < skateTimers.length; i++) window.clearTimeout(skateTimers[i]);
        return;
    }
    //加速
    if(len % 4 == 0 && speed < 60 && carrier[headX][headY] == "food") {
        speed += 5;
        walk();   
        trace("加速！");
    }
    //捡到刹车
    if(carrier[headX][headY] == "brake") {
        speed = 5;
        walk();
        trace("恭喜！捡到刹车一个。");
    }
    //遭遇滑板
    if(carrier[headX][headY] == "skate") {
        speed += 20;
        walk();
        trace("遭遇滑板！");
    }   
    //添加阻挡物
    if(len % 6 == 0 && len < 60 && carrier[headX][headY] == "food") {
        addObject("block");
    }   
    //对话
    if(len <= 40 && len % 10 == 0) {
        var cheer = SAY[len/10-1];
        trace(cheer);
    }   
    //吃东西
    if(carrier[headX][headY] != "food") {
        var lastX = snake[snake.length-1][0],
            lastY = snake[snake.length-1][1];
        carrier[lastX][lastY] = false;
        gridElems[lastX][lastY].className = "";
        snake.pop();
    } else {
        carrier[headX][headY] = false;
        trace("吃到食物");
        addObject("food");
    }
    snake.unshift([headX,headY]);
    carrier[headX][headY] = "cover";
    gridElems[headX][headY].className = "cover";
   
    len = snake.length;
}
//添加物品
function addObject(name) {
    var p = randomPointer();
    carrier[p[0]][p[1]] = name;
    gridElems[p[0]][p[1]].className = name;
}
//添加随机数量刹车和滑板
function addRandomBrake() {
    var num = randowNum(1,5);
    for(var i = 0; i < num; i++) {
        brakeTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10000,100000)) );
        skateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5000,100000)) );
    }        
}
//输出信息
function trace(sth,who) {
    who = who || info;
    if(document.all) who.innerText = sth;
    else who.textContent = sth;
}
//获取信息
function getText(target) {
    if(document.all) return target.innerText;
    else return target.textContent;
}
//创建二维数组
function multiArray(m,n) {
    var arr =  new Array(n);
    for(var i=0; i<m; i++)
        arr[i] = new Array(m);
    return arr;
}
//清除画面
function clear() {
    for(var y = 0; y < gridElems.length; y++) {
        for(var x = 0; x < gridElems[y].length; x++) {
            gridElems[x][y].className = "";
        }
    }
}
//产生指定范围随机点
function randomPointer(startX,startY,endX,endY) {
    startX = startX || 0;
    startY = startY || 0;
    endX = endX || WIDTH;
    endY = endY || HEIGHT;
    var p = [],
        x = Math.floor(Math.random()*(endX - startX)) + startX,
        y = Math.floor(Math.random()*(endY - startY)) + startY;
    if(carrier[x][y]) return randomPointer(startX,startY,endX,endY);
    p[0] = x;
    p[1] = y;
    return p;
}
//产生随机整数
function randowNum(start,end) {
    return Math.floor(Math.random()*(end - start)) + start;
}