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); } }
以上所诉就是本文的全部内容了,希望大家能够喜欢。