javascript制作2048游戏
2048.html
<!DOCTYPE> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>2048</title> <linkrel="stylesheet"type="text/css"href="css/2048.css"/> <!--<scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>--> <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=val>0?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);
}
}
以上所诉就是本文的全部内容了，希望大家能够喜欢。