|
锁定老帖子 主题：花了半天多时间写了个简陋版的贪吃蛇
精华帖 (0) :: 良好帖 (3) :: 新手帖 (2) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-11-22
最后修改：2009-11-27
最近比较长一段时间都在学习js,也不知道自己学的怎么样,借这个游戏练练手,第一次写,虽然非常简陋,但还算能玩,小小满足一下继续努力,hoho!
开始和暂停按空格,方向键控制方向. ---- 做了一些修改,画上了表格,蛇跟实物跟格子对齐,增加闯关与积分功能,关数越高速度越快,食物位置也越靠边和角.. 每过一关需按空格继续..
<head>
<meta content-type="text/html;charset=utf-8"/>
<style>
#table {
position:absolute;
left:0;
top:0;
z-index:6;
width :100%;
height:100%;
border:"1px solid black";
}
#table td {
width:18;
height:18;
background-color:yellow;
padding:1;
}
#info {
position:relative;
top:-18;
left:591;
width :100;
height:150;
background-color:blue;
}
</style>
<script >
Game = {
BlockWidth : 20,
GameState :"pause",
Level : 1,
Scoure : 0,
Option :{
init:function(){
this.speed = 200-(Game.Level-1)*50;
//this.foodPositionLevel = 1;
this.foodNumOfsucced = 10+((Game.Level-1)*5);
this.eatDeficultLevel = 16-Game.Level;
}
},
Map : {
init : function(left,top,width,height,foodNum){
this.food = [];
this.foodNum = foodNum;
this.left = left;
this.top = top;
this.width = width;
this.height = height;
this.instance = document.createElement("div");
this.instance.setAttribute("id","map");
this.instance.style.position = "absolute";
this.instance.style.left = left;
this.instance.style.top = top;
//this.instance.style.offsetWidth = width;
//this.instance.style.offsetHeight = height;
this.instance.style.width = width;
this.instance.style.height = height;
this.instance.style.backgroundColor = "gray";
document.getElementById("adiv").appendChild(this.instance);
var table = document.createElement("table");
table.setAttribute("id","table");
var frag = document.createDocumentFragment();
frag.appendChild(table);
for(var i = 0;i<600;i+=Game.BlockWidth){
var row = table.insertRow(-1);
for(var j =0;j<600;j+=Game.BlockWidth){
var cell = row.insertCell(-1);
//cell.innerHTML = "";
}
}
this.instance.appendChild(frag);
},
createOrRefreshFood: function(){
var ran;
var tempRan;
var foodPosLeft,foodPosTop;
for(var i=0;i<this.foodNum;i++){
if(!this.food[i]){
this.food[i] = Game.Food.create(Game.BlockWidth-2,Game.BlockWidth-2,"red");
this.instance.appendChild(this.food[i]);
}
//写了个关数越高,食物越靠近边沿的算法
ran = Math.random();
if(parseInt(ran*100) % 2 == 0 ){
tempRan = (1/(Game.Level*2))*ran;
}else{
tempRan = 1-(1/(Game.Level*2))*ran;
}
if(parseInt(ran*1000) % 3 == 0 ){
foodPosLeft = tempRan*(this.width-20) + this.left;
foodPosLeft = foodPosLeft - foodPosLeft%20
foodPosTop = ran*(this.height-20) + this.top;
foodPosTop = foodPosTop - foodPosTop%20;
}else if(parseInt(ran*1000) % 3 == 1){
foodPosLeft = ran*(this.width-20) + this.left;
foodPosLeft = foodPosLeft - foodPosLeft%20;
foodPosTop = tempRan*(this.height-20) + this.top;
foodPosTop = foodPosTop - foodPosTop % 20;
}else{
foodPosLeft = tempRan*(this.width-20) + this.left;
foodPosLeft = foodPosLeft - foodPosLeft%20;
foodPosTop = tempRan*(this.height-20) + this.top;
foodPosTop = foodPosTop - foodPosTop % 20;
}
this.food[i].style.left = foodPosLeft;
this.food[i].style.top = foodPosTop;
}
}
},
Food : {
create : function(width,height,color){
this.width = width;
this.height = height;
this.color = color;
this.instance = document.createElement("div");
this.instance.style.position = "absolute";
this.instance.style.zIndex = "9";
this.instance.style.width = width;
this.instance.style.height = height;
this.instance.style.backgroundColor = color;
return this.instance;
}
},
Snack : {
init: function(defaultFoodNum){
this.foodNum = defaultFoodNum;
this.foodNumOfEat = 0;
this.instance = [];
this.derect = -1; // -1 = left,1=right,-2=up,2=down
this.instance[0] = document.createElement("div");
this.instance[0].style.position = "absolute";
this.instance[0].style.backgroundColor = "black";
this.instance[0].style.zIndex = "9";
this.instance[0].style.width = Game.BlockWidth;
this.instance[0].style.height = Game.BlockWidth;
this.instance[0].style.left = 200;
this.instance[0].style.top = 200;
this.tail = null;
this.instance[0].style.border = "2px solid white";
Game.Map.instance.appendChild(this.instance[0]);
for(var i=1;i<this.foodNum;i++){
this.instance[i] = this.instance[0].cloneNode(true);
this.instance[i].style.width = Game.BlockWidth;
this.instance[i].style.height = Game.BlockWidth;
this.instance[i].style.left = (parseInt(this.instance[i-1].style.left)+ Game.BlockWidth);
this.instance[i].style.top = 200;
this.instance[i].style.backgroundColor = "black";
this.instance[i].style.border = "2px solid white";
//this.instance[i].style.borderColor = "red";
Game.Map.instance.appendChild(this.instance[i]);
}
},
move:function(derect){
if(derect + this.derect!=0){
this.derect = derect;
}
var head = {};
head.left = parseInt(this.instance[0].style.left);
head.top = parseInt(this.instance[0].style.top);
switch (this.derect){
case -1:{
this.instance[0].style.left = parseInt(this.instance[0].style.left)-Game.BlockWidth;
break;
}
case 1:{
this.instance[0].style.left = parseInt(this.instance[0].style.left)+Game.BlockWidth;
break;
}
case -2:{
this.instance[0].style.top = parseInt(this.instance[0].style.top)-Game.BlockWidth;
break;
}
case 2:{
this.instance[0].style.top = parseInt(this.instance[0].style.top)+Game.BlockWidth;
break;
}
}
if(this.tail!=null){
this.foodNum++;
}
if(this.foodNum>1){
for(var i=this.foodNum-1;i>1;i--){
this.instance[i].style.left = this.instance[i-1].style.left;
this.instance[i].style.top = this.instance[i-1].style.top;
}
if(this.tail!=null){
Game.Map.instance.appendChild(this.tail);
this.tail = null;
}
this.instance[1].style.left = head.left;
this.instance[1].style.top = head.top;
}
if(this.isFull()){
alert("恭喜您,顺利闯过第"+Game.Level+"关");
clearInterval(Game.timing);
if(Game.Level>5){
alert("you win!");
}else{
Game.Level++;
$("act").innerHTML = Game.Level;
Game.Option.init();
}
}else if(this.isDead()){
clearInterval(Game.timing);
window.onkeydown = null;
alert("you fail");
}else{
this.eat();
}
},
eat : function(){
var map = Game.Map;
var head = this.instance[0];
for(var i=0;i<map.food.length;i++){
if(Math.abs(parseInt(this.instance[0].style.left)-parseInt(map.food[i].style.left))<=Game.Option.eatDeficultLevel
&& Math.abs(parseInt(this.instance[0].style.top)-parseInt(map.food[i].style.top))<=Game.Option.eatDeficultLevel) {
//alert("eat!");
this.tail = this.instance[this.instance.length] = this.instance[0].cloneNode(true);
var foodEated = map.food[i];
for(var j=i+1;j<map.food.length;j++){
map.food[j-1] = map.food[j];
}
map.food.length--;
foodEated.parentNode.removeChild(foodEated);
this.foodNumOfEat++;
//alert(Game.Scoure);
Game.Scoure = Game.Scoure + (100*Game.Level);
//alert($("scoure"));
$("scoure").innerHTML = ""+Game.Scoure;
break;
}
}
if(map.food.length<=0){
map.createOrRefreshFood(map.foodNum);
}
},
isFull : function(){
//alert(this.foodNumOfEat);
//alert(Game.foodNumOfsucced);
return this.foodNumOfEat >= Game.Option.foodNumOfsucced;
},
isDead : function(){
var map = Game.Map;
if(
parseInt(this.instance[0].style.left) < map.left
|| parseInt(this.instance[0].style.left) >= (map.left+map.width)
|| parseInt(this.instance[0].style.top) < map.top
|| parseInt(this.instance[0].style.top) >= (map.top + map.height) ) {
return true;
}
for(var i=1;i<this.foodNum;i++){
if(this.instance[0].style.left == this.instance[i].style.left
&& this.instance[0].style.top == this.instance[i].style.top){
return true;
}
}
}
},
GameStart :function(level){
this.Map.init(0,0,600,600,1);
this.Map.createOrRefreshFood();
this.Snack.init(6);
this.Option.init(level);
var gameItsSelf = this;
//if(!window.onkeydown){
// window.onkeydown = document.body.onkeydown;
//}
//alert(document.body.onkeydown);
window.onkeydown = document.body.onkeydown = function(event){
event = window.event||event;
var keyCode = event.keyCode;
//alert(keyCode);
if(keyCode==32){
//alert("暂停");
if(Game.GameState=="pause"){
Game.GameState = "alive";
window.clearInterval(Game.timing);
Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,Game.Snack.derect),Game.Option.speed);
}else{
Game.GameState = "pause";
window.clearInterval(Game.timing);
}
}else if(Game.GameState =="alive"){
var tempDirect;
switch (keyCode) {
case 37:{
//$("debug").innerHTML +="X";
tempDirect = -1;
if(tempDirect!=Game.Snack.derect){
window.clearInterval(Game.timing);
Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
}
break;
}
case 38:{
//$("debug").innerHTML +="y";
tempDirect = -2;
if(tempDirect!=Game.Snack.derect){
window.clearInterval(Game.timing);
Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
}
break;
}
case 39:{
tempDirect = 1;
if(tempDirect!=Game.Snack.derect){
window.clearInterval(Game.timing);
Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
}
break;
}
case 40: {
tempDirect = 2;
if(tempDirect!=Game.Snack.derect){
window.clearInterval(Game.timing);
Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
}
break;
}
default :
break;
}
}
}
}
}
function bindParamsToFun(obj,fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
fun.apply(obj,args);
};
}
function $(id){
return document.getElementById(id);
}
window.onload = function(){
Game.GameStart();
}
//window.onload = function(){
// alert(document.getElementById("theBody"));
//}
</script>
</head>
<body id="theBody">
<div id="adiv" width="1000" height="1000">
<div id="info">
<table>
<tr>
<td>关数 :</td>
<td><span id="act">0</span></td>
</tr>
<tr>
<td>分数 :</td>
<td><span id="scoure">0</span></td>
</tr>
</table>
</div>
</div>
</body>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-11-24
挺不错，跑的挺快的~~~
|
| 返回顶楼 | |
|
发表时间：2009-11-25
不错，不过蛇和豆是位置还要再调一下，对得不是很齐
|
| 返回顶楼 | |
|
发表时间：2009-11-25
是啊，有点对不齐，我也做了一个，在我第一篇博文中。楼主看看吧，提点意见。
|
| 返回顶楼 | |
|
发表时间：2009-11-25
楼上的 和 楼主.
你们写代码. 都不写注释么? |
| 返回顶楼 | |
|
发表时间：2009-11-25
Darrick 写道 楼上的 和 楼主.
你们写代码. 都不写注释么? 哈哈，当时写的急，没整理思路，想到哪写到哪，就没写注释。 |
| 返回顶楼 | |
|
发表时间：2009-11-25
我想问楼主学习JS多久了？半天就可以写出来了，比较起来真让我汗颜呀。
|
| 返回顶楼 | |
|
发表时间：2009-11-25
是有点没对齐..而且连地图的表格都没生成.因为一开始写不写的完心里都没底,报着试试看的态度,一点点写的,写到后面算是写出来了,但是累的也不想动了,就没管了.
|
| 返回顶楼 | |
|
发表时间：2009-11-25
楼主很强大
|
| 返回顶楼 | |
|
发表时间：2009-11-25
现在都流行用js写游戏。。 赞一个
|
| 返回顶楼 | |
