javascript贪吃蛇
2013-11-28 15:49
381 查看
看别人用js写小游戏，自己也忍不住写了一个贪吃蛇！下面是最初的程序框架！最终版还没整理出啦！
下面是代码部分：
| Qsnake，apple | 全局变量 | ||
| dir | Qsnake[0]拥有的方向 | ||
| Snake (x,y,num) | xNow | 目前对应的x位置坐标 | |
| yNow | 目前对应的y位置坐标 | ||
| Num | 身体个数，从0 | ||
| createSnake | 创建snake | ||
| position | 创建之后定位 | ||
| Apple | xpos | Apple对应的坐标位置 | |
| ypos | |||
| createApple | 创建一个apple | ||
| position | 随意给予苹果位置，赋予xpos与ypos值 | ||
| Point(x,y) | 将传入的左边转换成决定定位的像素，返回一个对象，包含对应像素的字符串。 | ||
| snakeBegin | snake创建以及开始运动 | ||
| moveControler | 控制整个流程,负责循环 | ||
| direction | 方向控制 |
<!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>
<script type="text/javascript" src="useful.js"></script>
<script type="text/javascript" src="Square.js"></script>
<style>
button{height:30px; width:80px;}
body{background-color:#0FF;}
#snakeMap{ height:600px; background-color:#CCC; width:600px; position:absolute; left:50%; margin-left:-300px;}
/*tiaoshi*/
#tiaoshi{width:200px;}
#tiaoshi p{ margin:0; font-size:14px; float:left; padding-right:5px;}
</style>
</head>
<body>
<div id="snakeMap"> </div>
<button id="begin" type="button">开始</button>
<button id="zanting" type="button">暂停</button>
<button id="restart" type="button">重新开始</button><br/>
<SELECT id="idState" style="width:150" name="state" selectedIndex="$!{state}">
<OPTION value="500">我是菜鸟</OPTION>
<OPTION value="300">初入门墙</OPTION>
<OPTION value="200">小有成就</OPTION>
<OPTION value="180">大师人物</OPTION>
<OPTION value="150">一代宗师</OPTION>
<OPTION value="120">天下无敌</OPTION>
<OPTION value="50">你敢试不！</OPTION>
</SELECT>
<div id="tiaoshi"></div>
</body>
</html>// 常用功能的封装useful.js
//调试
function tiaoshi(a){
var tiaoshi=document.getElementById("tiaoshi");
var p1=document.createElement("p");
var text=document.createTextNode(a+"");
tiaoshi.appendChild(p1);
p1.appendChild(text);
}
function ClassName(f){
if(document.getElementsByClassName){
return document.getElementsByClassName(f);
}else{
var a=document.getElementsByTagName("*");
var b=new Array();
var j=0;
for(var i=0;i<a.length;i++){
if(a[i].className==f){
b[j]=a[i];
j++;
}
}
}
return b;
}
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;
}
},
getKeyCode:function(event){
return event.keyCode;
},
getEvent:function(event){
return event?event:window.event;
}
}// Square.js
//私有全局的变量
var Qsnake=new Array(),apple;//snake的身体数组
var changeAll={
heightNum:30,
widthNum:30,
height:20,
width:20,
path:20,
speed:200,
getAll:function(){
return this.heightNum*widthNum;
}
}
function Point(x,y){//将坐标转换为具体的位置，x是横坐标，y是纵坐标
var a=new Object();
a.x=x*changeAll.width+"px";
a.y=y*changeAll.height+"px";
return a;
}
//苹果类
function Apple(){
this.xpos;
this.ypos;
}
Apple.prototype.createApple=function(){
var snakeMap=document.getElementById("snakeMap");
var apple=document.createElement("div");
apple.id="apple";
apple.style.height=changeAll.height+"px";;
apple.style.width=changeAll.width+"px";
apple.style.backgroundColor="#F00";
apple.style.position="absolute";
var a=snakeMap.appendChild(apple);
}
Apple.prototype.position=function(){
var apple=document.getElementById("apple");
this.ypos=Math.floor(Math.random()*changeAll.heightNum);
this.xpos=Math.floor(Math.random()*changeAll.widthNum);
for(var i=0;i<Qsnake.length;i++){
if(this.ypos==Qsnake[i].yNow&&this.xpos==Qsnake[i].xNow){
apple.position();
return;
}
}
var pos=Point(this.xpos,this.ypos);
apple.style.left=pos.x;
apple.style.top=pos.y;
}
//snake类
function Snake(x,y,num){
this.xNow=x;
this.yNow=y;
this.num=num;
}
Snake.prototype.createSnake=function(){//创建snake
var snakeMap=document.getElementById("snakeMap");
var snakeBody=document.createElement("div");
snakeBody.className="snakebody";
snakeBody.style.position="absolute";
snakeBody.style.height=changeAll.height+"px";;
snakeBody.style.width=changeAll.width+"px";
snakeBody.style.backgroundColor="#0F0";
snakeMap.appendChild(snakeBody);
}
Snake.prototype.position=function(){//snake的定位
var pos=Point(this.xNow,this.yNow);
var snakeBody=ClassName("snakebody");
snakeBody[this.num].style.left=pos.x;
snakeBody[this.num].style.top=pos.y;
}
function Controler(){//循环部分
if(Qsnake[0].yNow>changeAll.heightNum-1||Qsnake[0].xNow>changeAll.widthNum-1||Qsnake[0].yNow<0||Qsnake[0].xNow<0){
alert("你输拉");
return;
}
if(Qsnake[0].xNow==apple.xpos&&Qsnake[0].yNow==apple.ypos)
{
apple.position();
var oldBodyNum=Qsnake.length;
Qsnake[oldBodyNum]=new Snake(0,0,oldBodyNum);
Qsnake[0].createSnake();
Qsnake[0].position();
}
if(Qsnake.length>1){
for(var i=Qsnake.length-1;i>0;i--){
Qsnake[i].xNow=Qsnake[i-1].xNow;
Qsnake[i].yNow=Qsnake[i-1].yNow;
Qsnake[i].position();
}
}
switch(Qsnake[0].dir){
case 37:(function(){
Qsnake[0].xNow--;
})();
break;
case 38:(function(){
Qsnake[0].yNow--;
})();
break;
case 39:(function(){
Qsnake[0].xNow++;
})();
break;
case 40:(function(){
Qsnake[0].yNow++;
})();
break;
}
Qsnake[0].position();
for(var i=Qsnake.length-1;i>3;i--){
if(Qsnake.length>4&&Qsnake[i].xNow==Qsnake[0].xNow&&Qsnake[i].yNow==Qsnake[0].yNow){
alert('你输拉1');
return;
}
}
changeAll.loo=setTimeout(Controler,changeAll.speed);
}
function snakeBegin(){//snake开始部分
Qsnake[0]=new Snake(2,2,0);//创建头
Qsnake[0].createSnake();
Qsnake[0].position();
Qsnake[0].dir=39;
Controler();
}
function direction(event){//键盘控制方向
var keycode=EventUtil.getKeyCode(event);
if(Qsnake[0].dir!=keycode-2&&Qsnake[0].dir!=keycode+2){
Qsnake[0].dir=keycode;
clearTimeout(changeAll.loo);Controler();
}
}
function speed(){
var objSelect=document.getElementById("idState");
for(i=0;i<objSelect.options.length;i++){
if(objSelect[i].selected == true){
changeAll.speed=objSelect[i].value;
}
}
}
function controlb(){//界面按钮的添加
var snakeMap=document.getElementsByTagName("body");
var zanting=document.getElementById("zanting");
var kaishi=document.getElementById("begin");
var restart=document.getElementById("restart");
EventUtil.addHandler(snakeMap[0],"keyup",function(event){var event=EventUtil.getEvent(event);direction(event);});
EventUtil.addHandler(zanting,"click",function(){clearTimeout(changeAll.loo)});
EventUtil.addHandler(begin,"click",function(){clearTimeout(changeAll.loo);Controler();});
EventUtil.addHandler(restart,"click",function(){
clearTimeout(changeAll.loo);
speed();
Qsnake=null;
var snakeMap=document.getElementById("snakeMap");
var newChile=document.createElement("div");
newChile.id="snakeMap";
snakeMap.parentNode.replaceChild(newChile,snakeMap);
Qsnake=new Array();
apple=new Apple();
snakeBegin();
apple.createApple();
apple.position();
});
}
window.onload=function(){
speed();
apple=new Apple();
snakeBegin();
apple.createApple();
apple.position();
controlb();
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript贪吃蛇二(完全面向对象实现)
- 纯javascript实现“贪吃蛇”之02-----Day17
- javascript 贪吃蛇
- 试试HTML5+JavaScript编写贪吃蛇游戏
- JavaScript， 实现贪吃蛇小游戏
- javascript之贪吃蛇案例
- 纯javascript贪吃蛇
- javascript小游戏 贪吃蛇
- JavaScript编写一个贪吃蛇游戏
- 初试javascript ：贪吃蛇啊
- JavaScript-贪吃蛇
- JavaScript实战游戏--贪吃蛇
- JavaScript版—贪吃蛇小组件
- javascript贪吃蛇小游戏
- JavaScript 贪吃蛇小游戏
- javascript 贪吃蛇(详细注释版)
- javascript_贪吃蛇_面向过程的写法
- 从零开始学 Web 之 JavaScript 高级（一）原型，贪吃蛇案例
- 一个120行的javascript贪吃蛇的代码
- 初试javascript ：贪吃蛇啊