您的位置:首页 > Web前端 > JavaScript

我的js学习笔记之第一阶段总结即小作业贪吃蛇V0.1

2011-12-27 19:56 645 查看
最近看到不少同龄人写的东西,实在自行惭愧,觉得自己落后太多了,一定要加油努力了。

来公司实习也有半个多月了,从对前端技术基本一无所知,到现在可以用EXT写一点点很简单前端,感觉进步还是有那么一点点的,但并没在EXT花费太多精力,主要还把大部分时间都放在对js的学习上。总觉得框架是好东西,但决不能依赖于框架。下一步的学习方向,是JS和EXT并行,并且多花些时间进行对《how tomcat works》的学习,我看了头俩章,觉得这本书讲得真的非常的好,不仅是对WEB服务器有很清楚的讲解,看这本书,对java本身也是很好的提升,希望国内的大牛们也能多出些这些关注技术本身的书,对于我四级都差点不过的人来说,英文书籍看着还是相当困扰的。

自学JS也有差不多10几天了,对语法的学习只是编写程序的第一步,为做练习而用,偶尔看了一个大牛写的js贪吃蛇,今天就抽空写了一个不完全版的还没有可玩性的贪吃蛇,差距是相当明显的,希望可以在以后对js的学习中,逐步完善这个小游戏。

游戏还只是构建中一小部分,构建出游戏的整体框架,可以根据上下左右键改变蛇的运动方向,和对墙壁的进行碰撞检测,

这个游戏的关键就是--根据蛇头的方向计算出下一步的坐标,进而判断,并把蛇身的坐标放到数组中,进而根据数组“重绘”,没用到html5的canvas,毕竟不懂,用js生成一个表格模拟了一个二维数组。

代码如下。

<!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>无标题文档</title>
<style type="text/css">
*{
margin:10px auto;
}
td{
width:12px;
height:12px;
}
</style>
</head>
<body onload="Frame.init()">
<div id="tit"><h1>贪吃蛇V0.1-按任意键开始</h1></div>
<div id="div"></div>
<script type="text/javascript">
//屏蔽游览器的事件差异的工具类
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler)
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){
return event ? event : window.event;
},
getTarget:function(event){
return event.target || event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
//界面对象
Frame={
e:null,
init:function(){

//表格的行列数
var rows=25;
var cols=25;
//用表格模拟一个二维数组
var table=document.createElement("table");
//插入行和单元格
for(i=0;i<rows;i++){
var tr=table.insertRow(i);
for(j=0;j<cols;j++){
var td=tr.insertCell(j);
}
}
table.border='1';
var tab=document.getElementById("div");
tab.appendChild(table);
//绑定键盘监听
EventUtil.addHandler(document,"keydown",function(event){
e=EventUtil.getEvent(event);
Dargon.setDir(e);
Dargon.move(e,table);
});
}
}
//蛇对象
var Dargon={
//定时器
timer:null,
//速度
speed:2000,
//存放蛇身{x:x,y:y},作为绘制蛇的根依据
body:[{x:4,y:4},{x:5,y:4},{x:6,y:4}],
//头的方向,1是右,2是左,3是上,4是下,默认为右
direction:1,
//根据事件,设置蛇头方向
setDir:function(event){
var code=event.keyCode;
switch(code){
case 37:
Dargon.direction=2;
break;
case 38:
Dargon.direction=3;
break;
case 39:
Dargon.direction=1;
break;
case 40:
Dargon.direction=4;
break;
}
},
//蛇的一定,设置定时器
move:function(event,table){
this.timer=setInterval(function(){
Dargon.erase(table);
Dargon.moveOne(event);
Dargon.paint(table);
},this.speed);
},
//定时器驱动任务之一
moveOne:function(event){
if(this.checkNext()==-1){
alert("笨蛋,撞墙了!");
clearInterval(this.timer);
return;
}
//得到下一个点
var nextP=this.nextStep();
var _x=nextP.x;
var _y=nextP.y;
//蛇尾的坐标出栈
this.body.pop()
//把下一个点的想x,y放入数组头部
this.body.unshift({x:_x,y:_y});
},
eraseDot: function(x,y,table){
table.rows[x].cells[y].style.backgroundColor = "";
},
paintDot:function(x,y,table){
table.rows[x].cells[y].style.backgroundColor = "black";
},
//根据数组的值,绘制蛇身
paint:function(table){
for(var i=0;i<this.body.length;i++){
this.paintDot(this.body[i].y,this.body[i].x,table);
}
},
//根据数组的值,擦出蛇身
erase:function(table){
for(var i=0;i<this.body.length;i++){
this.eraseDot(this.body[i].y,this.body[i].x,table);
}
},
//得到下一个点的坐标
nextStep:function(){
var x=this.body[0].x;
var y=this.body[0].y;
if(this.direction==1){
x++;
}
if(this.direction==2){
x--;
}
if(this.direction==3){
y--;
}
if(this.direction==4){
y++;
}
return {x:x,y:y};
},
//碰撞检测,情况并不完全
checkNext:function(){
var point = this.nextStep();
var x = point.x;
var y = point.y;
if(x<0||x>=Frame.rows||y<0||y>=Frame.cols){
return -1;//碰撞边界,游戏结束
}
}
}
//种子类,还未用到
var Bean={
//种子会出现的位置
x:null,
y:null,
}
</script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: