JavaScript容易贪吃蛇,基本面向对象
日期：2014-05-16 浏览次数：20471 次
JavaScript简单贪吃蛇,基本面向对象
没有写博客的习惯,这篇算心血来潮,算篇近几天编写的小程序纪实.
以编写此程序的方式结束Javascript的本阶段的学习.编写的目的在于熟悉javascript的编程方式,包括代码风格,面向对象的运用等.
回到程序,说说Snake的移动的实现方法.其实很简单,向头部添加Unit,然后删除尾部.其他,参见注释.
作者:pcenshao
转载请注明来自:
http://blog.csdn.net/pywepe
程序包括一个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 : {},
&n
没有写博客的习惯,这篇算心血来潮,算篇近几天编写的小程序纪实.
以编写此程序的方式结束Javascript的本阶段的学习.编写的目的在于熟悉javascript的编程方式,包括代码风格,面向对象的运用等.
回到程序,说说Snake的移动的实现方法.其实很简单,向头部添加Unit,然后删除尾部.其他,参见注释.
作者:pcenshao
转载请注明来自:
http://blog.csdn.net/pywepe
程序包括一个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 : {},
&n
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
