JavaScript简略贪吃蛇,基本面向对象
日期：2014-05-16 浏览次数：20418 次
?
程序包括一个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 = t
