javascript制作游戏.docx
《javascript制作游戏.docx》由会员分享，可在线阅读，更多相关《javascript制作游戏.docx（11页珍藏版）》请在冰点文库上搜索。
javascript制作游戏
javascript制作2048游戏
这几天玩儿着2048这个游戏，突然心血来潮想练习下写程序的思路，于是乎就模仿做了一个，到目前位置还没有实现动态移动，不是很好看，不过玩儿着自己模仿的小游戏还是蛮爽的，哈哈
2048.html
<!
DOCTYPE
<htmlxmlns=““
<head
<metahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”/
<title2048</title
<linkrel=“stylesheet”type=“text/css”href=“css/2048.css”/
<!
--<scripttype=“text/javascript”src=“--
<scripttype=“text/javascript”src=“js/2048.js”</script
</head
<body
<divid=“div2048”
<aid=“start”taptostart:
-）</a
</div
</body
</html
2048.css
@charset“utf-8”;
#div2048
{
width:
500px;
height:
500px;
background-color:
#b8af9e;
margin:
0auto;
position:
relative;
}
#start
{
width:
500px;
height:
500px;
line-height:
500px;
display:
block;
text-align:
center;
font-size:
30px;
background:
#f2b179;
color:
#FFFFFF;
}
#div2048div.tile
{
margin:
20px0px0px20px;
width:
100px;
height:
40px;
padding:
30px0;
font-size:
40px;
line-height:
40px;
text-align:
center;
float:
left;
}
#div2048div.tile0{
background:
#ccc0b2;
}
#div2048div.tile2
{
color:
#7c736a;
background:
#eee4da;
}
#div2048div.tile4
{
color:
#7c736a;
background:
#ece0c8;
}
#div2048div.tile8
{
color:
#fff7eb;
background:
#f2b179;
}
#div2048div.tile16
{
color:
#fff7eb;
background:
#f59563;
}
#div2048div.tile32
{
color:
#fff7eb;
background:
#f57c5f;
}
#div2048div.tile64
{
color:
#fff7eb;
background:
#f65d3b;
}
#div2048div.tile128
{
color:
#fff7eb;
background:
#edce71;
}
#div2048div.tile256
{
color:
#fff7eb;
background:
#edcc61;
}
#div2048div.tile512
{
color:
#fff7eb;
background:
#ecc850;
}
#div2048div.tile1024
{
color:
#fff7eb;
background:
#edc53f;
}
#div2048div.tile2048
{
color:
#fff7eb;
background:
#eec22e;
}
2048.js
functiongame2048（container）
{
this.container=container;
this.tiles=newArray（16）;
}
game2048.prototype={
init:
function（）{
for（vari=0,len=this.tiles.length;i<len;i++）{
vartile=this.newTile（0）;
tile.setAttribute（‘index’,i）;
this.container.appendChild（tile）;
this.tiles[i]=tile;
}
this.randomTile（）;
this.randomTile（）;
},
newTile:
function（val）{
vartile=document.createElement（‘div’）;
this.setTileVal（tile,val）
returntile;
},
setTileVal:
function（tile,val）{
tile.className=‘tiletile’+val;
tile.setAttribute（‘val’,val）;
tile.innerHTML=val0?
val:
‘‘;
},
randomTile:
function（）{
varzeroTiles=[];
for（vari=0,len=this.tiles.length;i<len;i++）{
if（this.tiles[i].getAttribute（‘val’）==0）{
zeroTiles.push（this.tiles[i]）;
}
}
varrTile=zeroTiles[Math.floor（Math.random（）*zeroTiles.length）];
this.setTileVal（rTile,Math.random（）<0.8?
2:
4）;
},
move:
function（direction）{
varj;
switch（direction）{
case‘W’:
for（vari=4,len=this.tiles.length;i<len;i++）{
j=i;
while（j=4）{
this.merge（this.tiles[j-4],this.tiles[j]）;
j-=4;
}
}
break;
case‘S’:
for（vari=11;i=0;i--）{
j=i;
while（j<=11）{
this.merge（this.tiles[j+4],this.tiles[j]）;
j+=4;
}
}
break;
case‘A’:
for（vari=1,len=this.tiles.length;i<len;i++）{
j=i;
while（j%4!
=0）{
this.merge（this.tiles[j-1],this.tiles[j]）;
j-=1;
}
}
break;
case‘D’:
for（vari=14;i=0;i--）{
j=i;
while（j%4!
=3）{
this.merge（this.tiles[j+1],this.tiles[j]）;
j+=1;
}
}
break;
}
this.randomTile（）;
},
merge:
function（prevTile,currTile）{
varprevVal=prevTile.getAttribute（‘val’）;
varcurrVal=currTile.getAttribute（‘val’）;
if（currVal!
=0）{
if（prevVal==0）{
this.setTileVal（prevTile,currVal）;
this.setTileVal（currTile,0）;
}
elseif（prevVal==currVal）{
this.setTileVal（prevTile,prevVal*2）;
this.setTileVal（currTile,0）;
}
}
},
equal:
function（tile1,tile2）{
returntile1.getAttribute（‘val’）==tile2.getAttribute（‘val’）;
},
max:
function（）{
for（vari=0,len=this.tiles.length;i<len;i++）{
if（this.tiles[i].getAttribute（‘val’）==2048）{
returntrue;
}
}
},
over:
function（）{
for（vari=0,len=this.tiles.length;i<len;i++）{
if（this.tiles[i].getAttribute（‘val’）==0）{
returnfalse;
}
if（i%4!
=3）{
if（this.equal（this.tiles[i],this.tiles[i+1]））{
returnfalse;
}
}
if（i<12）{
if（this.equal（this.tiles[i],this.tiles[i+4]））{
returnfalse;
}
}
}
returntrue;
},
clean:
function（）{
for（vari=0,len=this.tiles.length;i<len;i++）{
this.container.removeChild（this.tiles[i]）;
}
this.tiles=newArray（16）;
}
}
vargame,startBtn;
window.onload=function（）{
varcontainer=document.getElementById（‘div2048’）;
startBtn=document.getElementById（‘start’）;
startBtn.onclick=function（）{
this.style.display=‘none’;
game=game||newgame2048（container）;
game.init（）;
}
}
window.onkeydown=function（e）{
varkeynum,keychar;
if（window.event）{//IE
keynum=e.keyCode;
}
elseif（e.which）{//Netscape/Firefox/Opera
keynum=e.which;
}
keychar=String.fromCharCode（keynum）;
if（[‘W’,‘S’,‘A’,‘D’].indexOf（keychar）-1）{
if（game.over（））{
game.clean（）;
startBtn.style.display=‘block’;
startBtn.innerHTML=‘gameover,replay?
’;
return;
}
game.move（keychar）;
}
}
以上所诉就是本文的全部内容了，希望大家能够喜欢。
升级会员 