一个js oop的游戏，和大家交流一下oop的心得（同时谢谢提供原始游戏代码的人）

20010430505 2009-07-31 06:04:46
加精 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 



<html xmlns="http://www.w3.org/1999/xhtml" > 

<head> 

<title>wujinjian </title> 

<script type="text/javascript"> 

var snakeBodyW_H=20; //蛇身大小 

var ModeEnum = {First:"first",Next:"next"}

var DirectEnum ={Left:"left",Right:"right",Up:"up",Down:"down"};

var components = {};

var handlers = {};

function $Find(id)

{

    if(!components[id])

    {

       if(id=="SnakeGame")

       {

            components[id] = new SnakeGame();

       }

       else if(id=="snake")

       {

            components[id] = new Snake();

       }

       else if(id=="foods")

       {

            components[id] = new Food();

       }

    }

    return components[id];

}

function $Get(id)

{

    return document.getElementById(id);

}

function $CreateDelegate(instance, method) {

    /// <param name="instance" mayBeNull="true"></param>

    /// <param name="method" type="Function"></param>

    /// <returns type="Function"></returns>

    return function() {

        return method.apply(instance, arguments);

    }

}

function InitGame() {

    document.getElementById("tx_id").value = "第 1 关";

    var snakeGame = $Find("SnakeGame");

    if(snakeGame)

    {

        snakeGame.set_snakeId("snake");

        snakeGame.set_foodsId("foods");

        snakeGame.ResetStart();  

    }

}

function SnakeGame()

{

    this._sd=250;

    this._timer=null;

    this._foodsId=null;

    this._snakeId=null;

    this._direction = null;

    this._mode = ModeEnum.First;

    this._isPass = false;

}

SnakeGame.prototype = {

    ResetStart: function() {

        document.getElementById("start_bt_id").disabled = true;



        if (this._mode == ModeEnum.First)

            document.getElementById("tx_id").value = "第 1 关";

        this._timer = null;

        this._direction = DirectEnum.Right;

        var foods = $Find(this._foodsId);

        var snake = $Find(this._snakeId);

        snake.set_footDivObjId("food_div_id");

        snake.set_mapDivObjId("map_id");

        foods.set_footDivObjId("food_div_id");

        foods.ResetFoods();

        snake.ResetSnake();

        snake.Initialize();

        this._startGame();

    },

    _startGame: function() {

        //        debugger;

        //初始化蛇身的个数，这里是3个

        this._timer = setInterval(this.raise_move, this._sd);

    },

    _moveSnake: function() {

        this.raise_move();

    },

    //判断蛇是否吃到食物 

    IsDivSuperpose: function(snakeDivObj, footDivObj) {

        var snakePos = GetItemPos(snakeDivObj);

        var foodPos = GetItemPos(footDivObj);

        var rectangle = GetRectangle(foodPos, snakePos);

        if (rectangle > 0) {

            var foods = $Find(this._foodsId);

            foods.ConsumeFood();

            if (!foods.CheckFood()) {

                foods.NewFood();

                var snake = $Find(this._snakeId);

                snake.AddSnakeBody();

            }

            else {

                //                this.set_isPass(true);

                this.GoToNextLevel();

            }



        }

    },

    GoToNextLevel: function() {

        alert("恭喜你进入下一关");

        this._sd = this._sd - 10; //速度 

        document.getElementById("tx_id").value = "第 " + (document.getElementById("tx_id").value.split(" ")[1] - 0 + 1) + " 关";

        this._mode = ModeEnum.Next;

        var foods = $Find(this._foodsId);

        var snake = $Find(this._snakeId);

        this.ResetStart();

        //        InitGame();

    },

    IsKill: function(snakeDivObj, mapDivObj) {

        var snakePos = GetItemPos(snakeDivObj);

        var panelRectangle = GetItemPos(mapDivObj);

        if (snakePos.Right >= panelRectangle.Right ||

            snakePos.Left <= panelRectangle.Left || snakePos.Top <= panelRectangle.Top

            || snakePos.Bottom >= panelRectangle.Bottom) {

            this._gameOver();

            return true;

        }

        return false;

    },

    _gameOver: function() {

        var obj = clearInterval(this._timer);

        var snake = $Find(this._snakeId);

        snake.ClearSnakeHandler();

        alert("失败！");

        document.getElementById("start_bt_id").disabled = false;

    },

    get_sd: function() { return this._sd; },

    set_sd: function(value) { this._sd = value; },



    get_isPass: function() { return this._isPass; },

    set_isPass: function(value) { this._isPass = value; },



    get_mode: function() { return this._mode; },

    set_mode: function(value) { this._mode = value; },



    get_timer: function() { return this._timer; },

    set_timer: function(value) { this._timer = value; },



    get_foodsId: function() { return this._foodsId; },

    set_foodsId: function(value) { this._foodsId = value; },



    get_direction: function() { return this._direction; },

    set_direction: function(value) { this._direction = value; },

    add_move: function(handler) {

        handlers["move"] = handler;

    },

    remove_move: function(handler) {

        handlers["move"] = null;

        delete handlers["move"];

    },

    raise_move: function(eventargs) {

        var handler = handlers["move"];

        if (handler) {

            handler(this, eventargs);

        }

    },

    get_snakeId: function() { return this._snakeId; },

    set_snakeId: function(value) { this._snakeId = value; }

}



function Snake()

{

    this._bodyNum = 3;

    this._snakeGame="SnakeGame";

    this._snakeArr = [];

    this._footDivObjId = null;

    this._mapDivObjId = null;

    this._moveDelegate = $CreateDelegate(this, this.SnakeMove);

}

Snake.prototype = {

    AddSnakeBody: function() {

        this._snakeArr[this._snakeArr.length] = this._createSnakeBody();

    },

    _createSnakeBody: function() {

        var snakeDiv = document.createElement("div");



        snakeDiv.style.position = "absolute";

        snakeDiv.style.left = "120px";

        snakeDiv.style.top = "300px";

        snakeDiv.style.width = snakeBodyW_H + "px";

        snakeDiv.style.height = snakeBodyW_H + "px";



        document.body.appendChild(snakeDiv);



        return snakeDiv;

    },

    Initialize: function() {

        for (var i = 0; i < this._bodyNum; i++) {

            this.AddSnakeBody();

        }

        var snakeGame = $Find(this._snakeGame);

        if (snakeGame) {

            snakeGame.add_move(this._moveDelegate);

        }

    },

    ClearSnakeHandler: function() {

        var snakeGame = $Find(this._snakeGame);

        if (snakeGame) {

            snakeGame.remove_move(this._moveDelegate);

        }

    },

    SnakeMove: function() {

        var last = this._snakeArr[this._snakeArr.length - 1];



        //把最后一个元素移到第一个 

        for (var i = this._snakeArr.length - 1; i > 0; i--) {

            this._snakeArr[i] = this._snakeArr[i - 1];

            this._snakeArr[i].style.backgroundColor = "red";

            this._snakeArr[i].style.border = "white solid 1px";

        }

        this._snakeArr[0] = last;



        var first = this._snakeArr[0];

        var second = this._snakeArr[1];



        first.style.backgroundColor = "blue";



        var secondPos = GetItemPos(second);





        var footDivObj = $Get(this._footDivObjId);

        var mapDivObj = $Get(this._mapDivObjId);

        var snakeGame = $Find(this._snakeGame);

        if (snakeGame) {

            var direction = snakeGame.get_direction();

            if (direction == DirectEnum.Left) {

                first.style.left = secondPos.Left - snakeBodyW_H + "px";

                first.style.top = secondPos.Top + "px";

            }

            else if (direction == DirectEnum.Up) {

                first.style.left = secondPos.Left + "px";

                first.style.top = secondPos.Top - snakeBodyW_H + "px";

            }

            else if (direction == DirectEnum.Right) {

                first.style.left = secondPos.Left + snakeBodyW_H + "px";

                first.style.top = secondPos.Top + "px";

            }

            else if (direction == DirectEnum.Down) {

                first.style.left = secondPos.Left + "px";

                first.style.top = secondPos.Top + snakeBodyW_H + "px";

            }

            if (!snakeGame.IsKill(first, mapDivObj))

                snakeGame.IsDivSuperpose(first, footDivObj);

        }



    },
...全文
2746 130 打赏 收藏 转发到动态 举报
写回复
用AI写文章
130 条回复
切换为时间正序
请发表友善的回复…
发表回复
hotup 2009-08-16
  • 打赏
  • 举报
 回复
一看那么多if else 就知道，程序的结构一定很糟
JavaAlpha 2009-08-16
  • 打赏
  • 举报
 回复
学习 学习 牛
zenowolf 2009-08-10
  • 打赏
  • 举报
 回复
super mario? 用js？怀疑中～
loh_zz 2009-08-10
  • 打赏
  • 举报
 回复
学习学习
peswe 2009-08-07
  • 打赏
  • 举报
 回复
很好，很强大！~
hezulin 2009-08-07
  • 打赏
  • 举报
 回复
学习学习一下
flyinghawl 2009-08-06
  • 打赏
  • 举报
 回复
js，我还不怎么会写呢，顶了
lwj006 2009-08-06
  • 打赏
  • 举报
 回复
ding
desuzhe 2009-08-06
  • 打赏
  • 举报
 回复
好东西要顶起
net205 2009-08-06
  • 打赏
  • 举报
 回复
路过学习的..
hemingwang0902 2009-08-06
  • 打赏
  • 举报
 回复
也来凑凑热闹
domacli 2009-08-06
  • 打赏
  • 举报
 回复
不错,顶,,,

希望LZ能再多创作点其他基于JS的游戏,大家一起交流
ya270078781 2009-08-05
  • 打赏
  • 举报
 回复
牛人..顶了..
tvb5201314 2009-08-05
  • 打赏
  • 举报
 回复
还有没有复杂的?
钱不是问题 2009-08-05
  • 打赏
  • 举报
 回复
先玩下,再看看
xiaohuanjie 2009-08-05
  • 打赏
  • 举报
 回复

头晕
GossLies 2009-08-05
  • 打赏
  • 举报
 回复
哎 ，没仔细看。。
20010430505 2009-08-05
  • 打赏
  • 举报
 回复
[Quote=引用 111 楼 wfyfngu 的回复:]
楼主
请不要使用C#的文档注释去注释JavaScript
会给人不专业的感觉
考虑下面的JavaScript“文档注释”
这种注释方式可以配合一些文档生成工具直接生成文档

JScript code/**
* @class SomeClass 贪食蛇小游戏
* @constitution SomeClass
* @param param1 {String} 参数1
* @param param2 {object || null} 参数2*/
SomeClass=function(param1, param2) {/**
* @field Field1 {String} 字段1*/
thsi.Field1= param1;
};

SomeClass.prototype= {/**
* @public
* @method function1 方法1
* @param agr1 {Number} 参数1*/
function1 :function(arg1) {},/**
* @private*/
_privateFunction :function() {},
toString :function() {}
};
[/Quote]

呵呵，看着方便能理解就行，实话说我就是做C#的，难免会带有这个注释的习惯。
而且我没觉得这有什么不妥。
wfyfngu 2009-08-05
  • 打赏
  • 举报
 回复
楼主
请不要使用C#的文档注释去注释JavaScript
会给人不专业的感觉
考虑下面的JavaScript“文档注释”
这种注释方式可以配合一些文档生成工具直接生成文档

/**

 * @class SomeClass 贪食蛇小游戏

 * @constitution SomeClass 

 * @param param1 {String} 参数1

 * @param param2 {object || null} 参数2

 */

SomeClass = function(param1, param2) {



  /**

   * @field Field1 {String} 字段1

   */

  thsi.Field1 = param1;

};



SomeClass.prototype = {



   /**

   * @public

   * @method function1 方法1

   * @param agr1 {Number} 参数1

   */

  function1 : function(arg1) {},



  /**

   * @private

   */

  _privateFunction : function() {},

  toString : function() {}

};
iamability 2009-08-05
  • 打赏
  • 举报
 回复
学习，学习
加载更多回复（106）
windows类书的学习心得
windows类书的学习心得 这篇文章应该是凑的，不够很长，还是值得读的，转发来。下满是原网址： http://www.blogjava.net/sound/archive/2008/08/21/40499.html 创建人： paul 现在的计算机图书发展的可真快,很久没去书店,昨日去了一下,真是感叹万千,很多陌生的出版社,很多陌生的作者,很多陌生的译者,书名也是越来越夸张,什
Java面试题（一）&100家大公司java笔试题汇总
Java考试题 一：单选题 —– 1.下列哪一种叙述是正确的（D ） A． abstract修饰符可修饰字段、方法和类 B． 抽象方法的body部分必须用一对大括号{ }包住 C． 声明抽象方法，大括号可有可无 D． 声明抽象方法不可写出大括号 2.如下代码 public class Test { public int aMethod() { static int i ...
游戏开发学习指导
转自：http://www.zhihujingxuan.com/18625.html 本人大约从20多年前开始学习及使用C++，但仍未达到我认为「精通」的阶段，甚至对于C++11的各种新特性也未掌握。然而因为我是在读书时自学C++的，也是游戏程序员（原问题中提到题主想从事游戏开发），觉得也许能提供一点意见供网友参考。 首先引一下2010年8月号《程序员》刊登的拙文《C++强大背后》最后
我的Java开发学习之旅------>Java经典面试题
从享受生活的角度上来说：“程序员并不是一种最好的职业，我认为两种人可以做程序员，第一，你不做程序员，你就没有什么工作可做，或者说是即使有可以做的工作但是你非常不愿意去做；第二，你非常痴迷和爱好程序，并且在这方面有一些天赋和优势。程序员的结局也是有两种：第一，默默退休，第二以程序员为起点或跳板，注意积累，跟对了好的老板或团队，找到和很好的搭档自己创业，成为IT金领和富翁。” 人们在时间面前是平等的
Java面试题
1、一个".java"源文件中是否可以包括多个类（不是内部类）？有什么限制？ 可以有多个类，但只能有一个public的类，并且public的类名必须与文件名相一致。 2、Java有没有goto? java中的保留字，现在没有在java中使用。 3、说说&amp;和&amp;&amp;的区别。 &amp;和&amp;&amp;都可以用作逻辑与的运算符，表示逻...
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章