贪吃蛇心得

整体思路

用面向对象的思路写一个贪吃蛇游戏,首先需要找到游戏中的所有对象。在每一个游戏的实现中都会有一个游戏引擎对象,我们定义为gameBox,除此之外该游戏还包括了蛇(snake),食物(food)两个对象。找到对象后再去分析对象所具有的属性和方法,并通过代码去实现它。

实现过程

1、游戏引擎对象的实现。

由于在每个游戏中,引擎对象一般都只有一个,所以我们可以用对象字面量的形式来定义,具体代码如下:

var gameBox = {

    rows: 20,
    cols: 20,
        allTds: [],
        start: function(){
                var oTable = document.createElement('table');

        for (var i=0; i

整个游戏的环境我们用一个表格来实现,最原始的 游戏引擎对象包括表格的行数(rows)、列数(cols)以及保存所有td的数组(allTds)三个属性,和一个将环境添加到页面的方法(start)。

2、食物对象的实现。

食物除了具有自身大小,颜色,位置等属性外,还具有显示,改变位置等方法,由于在游戏中可能不止出现一个食物,所以我们采用构造函数的方式来创建食物对象。

function Food(){

    this.x = 0;
    this.y = 0;
}

Food.prototype.change = function(){

    this.x = parseInt(Math.random()*gameBox.cols);
    this.y = parseInt(Math.random()*gameBox.rows);
    
    this.show();
    
}
Food.prototype.show = function(){
    
    gameBox.allTds[this.y][this.x].className = 'food'; 
}

定义两个x,y属性i来保存食物的位置,然后当达到一定要求时改变食物的位置,食物的位置是随机的,所以需要创建两个随机数,作为食物的位置。

3、蛇对象的实现

和食物一样,蛇在游戏中可能也不止一条,所以我们也采用构造函数的方式来定义对象。

function Snake(){

    this.nodes = [
        {x:5,y:1},      
        {x:4,y:1},
        {x:3,y:1},
        {x:2,y:1},
        {x:1,y:1}
    ];

    this.directer = 'down';
}

Snake.prototype.render = function(){

    for (var i=0; i=gameBox.cols || y>=gameBox.rows || x<0 || y<0)
    {
        alert("Game Over!!");
        clearInterval(gameBox.timer)
        return ;
    }

    
    this.nodes.unshift({x:x,y:y});

    this.nodes.pop({x:x,y:y});

    if (x == gameBox.food.x && y == gameBox.food.y)
    {
        this.nodes.unshift({x:x,y:y});
        gameBox.food.change();
        

    }
    
    this.render();
}

在蛇对象中定义一个nodes属性来保存蛇,directer属性保存蛇的运动方向render方法将蛇显示在游戏环境中。

你可能感兴趣的:(贪吃蛇心得)