JavaScript简单贪吃蛇,基本面向对象
没有写博客的习惯,这篇算心血来潮,算篇近几天编写的小程序纪实.
以编写此程序的方式结束Javascript的本阶段的学习.编写的目的在于熟悉javascript的编程方式,包括代码风格,面向对象的运用等.
回到程序,说说Snake的移动的实现方法.其实很简单,向头部添加Unit,然后删除尾部.其他,参见注释.
程序包括一个html文件:snake.html和一个js文件:snake.js
snake.html:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript简单贪吃蛇</title>
<script type="text/javascript" src="snake.js"></script>
<script type="text/javascript" >
$s(function(){
$s.SnakeContext.init();
});
</script>
</head>
<body>
<div id="headLocation"></div>
<div id="keyup"></div>
</body>
</html>
snake.js:
/*
* JavaScript简单贪吃蛇.基本面向对象.
* 规则:
* 1.没有墙,左与右连接,上与下连接.
* 2.当蛇头碰撞到自身时死亡.
* 兼容性:
* 完全支持Firefox,Chrome
* 基本支持IE(除了调试部分)
*
* 作者:pcenshao
* 转载请注明来自:
* http://blog.csdn.net/pywepe
* http://pcenshao.taobao.com
*/
(function(){
$s = function(){
if(arguments.length == 1){
if(typeof arguments[0] == "string"){
return document.getElementById(arguments[0]);
}else if(typeof arguments[0] == "function"){
window.onload = arguments[0];
}
}
};
$s.UNIT_WIDTH = 10; // 单元的宽度
$s.UNIT_HEIGHT = 10;
$s.PANEL_WIDTH = 30; // 逻辑宽度
$s.PANEL_HEIGHT = 20; // 逻辑高度
$s.STEP = 250 ; // 每一步的时间
$s.HEAD_COLOR = "red"; // 蛇头颜色
$s.BODY_COLOR = "black"; // 蛇体颜色
/*
* 食物的颜色
*/
$s.COLORS = ["blue","green","#494e8f","#905d1d","#845538","#77ac98","#8552a1"];
/*
* 调试相关
* $s.DEBUG 调试信息显示开关
* $s.KEY_UP_DIR_ID 监视方向键的结点id,若不存在,则不显示
* $s.HEAD_LOCATION_ID 监视蛇头位置的结点id,若不存在,则不显示
*/
$s.DEBUG = false;
$s.KEY_UP_DIR_ID = "keyup";
$s.HEAD_LOCATION_ID = "headLocation";
$s.Dir = { // 代表方向,强制以$s.Dir.UP方法调用,避免参数错误
UP : {},
DOWN : {},
LEFT : {},
RIGHT : {},
NONE : {}
};
$s.State = { // 代表状态
STOP : {},
RUNNGIN : {},
PAUSE : {}
};
$s.Unit = function(){ // 一个单元格,用MVC的眼光看,Unit是模型,UnitView是视图
this.x = 0;
this.y = 0;
this.view = new $s.UnitView();
this.view.unit = this;
this.color = $s.BODY_COLOR;
};
$s.Unit.prototype.repaint = function(){
if(this.view != null){
this.view.repaint(); // 通知重绘
}
};
$s.Snake = function(){
this.units = [];
};
$s.Snake.prototype.init = function(dir,count){
var x = 5;
var y = 5;
for(var i = 0 ; i < count ; i ++){
var u = new $s.Unit();
u.x = x ;
u.y = y ++;
this.units.push(u);
if(i == (count - 1 )){
u.color = $s.HEAD_COLOR;
}
u.repaint();
}
};
$s.Snake.prototype.crash = function(x,y){ // 传入头部的位置,返回true表示碰撞自身
for(var i = this.units.length - 2 ; i >= 0 ; i --){ // 不包括头自身
var u = this.units[i];
&
补充：web前端 , JavaScript ,
