实现基本框架。
一、代码实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <title>2048</title> <link rel="stylesheet" type="text/css" href="2048.css" /> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="support2048.js"></script> <script type="text/javascript" src="showanimation2048.js"></script> <script type="text/javascript" src="main2048.js"></script> </head> <body> <header> <h1>2048</h1> <a href="javascript:newgame();" id="newgamebutton">New Game</a> <p>score : <span id="score">0</span></p> </header> <div id="grid-container"> <div class="grid-cell" id="grid-cell-0-0"></div> <div class="grid-cell" id="grid-cell-0-1"></div> <div class="grid-cell" id="grid-cell-0-2"></div> <div class="grid-cell" id="grid-cell-0-3"></div> <div class="grid-cell" id="grid-cell-1-0"></div> <div class="grid-cell" id="grid-cell-1-1"></div> <div class="grid-cell" id="grid-cell-1-2"></div> <div class="grid-cell" id="grid-cell-1-3"></div> <div class="grid-cell" id="grid-cell-2-0"></div> <div class="grid-cell" id="grid-cell-2-1"></div> <div class="grid-cell" id="grid-cell-2-2"></div> <div class="grid-cell" id="grid-cell-2-3"></div> <div class="grid-cell" id="grid-cell-3-0"></div> <div class="grid-cell" id="grid-cell-3-1"></div> <div class="grid-cell" id="grid-cell-3-2"></div> <div class="grid-cell" id="grid-cell-3-3"></div> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
header{ display:block; margin:0 auto; width:500px; text-align:center; } header h1{ font-family:Arial; font-size:60px; font-weight:bold; } header #newgamebutton{ display:block; margin:20px auto; width:100px; padding:10px 10px; background-color:#8f7a66; font-family:Arial; color:white; border-radius:10px; text-decoration:none; } header #newgamebutton:hover{ background-color:#9f8b77; } header p{ font-family:Arial; font-size:25px; margin:20px auto; } #grid-container{ width:460px; height:460px; padding:20px; margin:50px auto; background-color:#bbada0; border-radius: 10px; position: relative; } .grid-cell{ width:100px; height:100px; border-radius: 6px; background-color:#ccc0b3; position: absolute; } .number-cell{ border-radius: 6px; font-family: Arial; font-weight:bold; font-size:60px; line-height:100px; text-align:center; position:absolute; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
var board = new Array(); var score = 0; $(document).ready(function(){ newgame(); }); function newgame(){ //初始化棋盘格 init(); //在随机两个格子生成数字 generateOneNumber(); generateOneNumber(); } function init(){ for( var i = 0 ; i < 4 ; i ++ ) for( var j = 0 ; j < 4 ; j ++ ){ var gridCell = $('#grid-cell-'+i+"-"+j); gridCell.css('top', getPosTop( i , j ) ); gridCell.css('left', getPosLeft( i , j ) ); } for( var i = 0 ; i < 4 ; i ++ ){ board[i] = new Array(); for( var j = 0 ; j < 4 ; j ++ ){ board[i][j] = 0; } } updateBoardView(); } function updateBoardView(){ $(".number-cell").remove(); for( var i = 0 ; i < 4 ; i ++ ) for( var j = 0 ; j < 4 ; j ++ ){ $("#grid-container").append( '<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>' ); var theNumberCell = $('#number-cell-'+i+'-'+j); if( board[i][j] == 0 ){ theNumberCell.css('width','0px'); theNumberCell.css('height','0px'); theNumberCell.css('top',getPosTop(i,j) + 50 ); theNumberCell.css('left',getPosLeft(i,j) + 50 ); } else{ theNumberCell.css('width','100px'); theNumberCell.css('height','100px'); theNumberCell.css('top',getPosTop(i,j)); theNumberCell.css('left',getPosLeft(i,j)); theNumberCell.css('background-color',getNumberBackgroundColor( board[i][j] ) ); theNumberCell.css('color',getNumberColor( board[i][j] ) ); theNumberCell.text( board[i][j] ); } } } function generateOneNumber(){ if( nospace( board ) ) return false; //随机一个位置 var randx = parseInt( Math.floor( Math.random() * 4 ) ); var randy = parseInt( Math.floor( Math.random() * 4 ) ); while( true ){ if( board[randx][randy] == 0 ) break; randx = parseInt( Math.floor( Math.random() * 4 ) ); randy = parseInt( Math.floor( Math.random() * 4 ) ); } //随机一个数字 var randNumber = Math.random() < 0.5 ? 2 : 4; //在随机位置显示随机数字 board[randx][randy] = randNumber; showNumberWithAnimation( randx , randy , randNumber ); return true; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function showNumberWithAnimation( i , j , randNumber ){ var numberCell = $('#number-cell-' + i + "-" + j ); numberCell.css('background-color',getNumberBackgroundColor( randNumber ) ); numberCell.css('color',getNumberColor( randNumber ) ); numberCell.text( randNumber ); numberCell.animate({ width:"100px", height:"100px", top:getPosTop( i , j ), left:getPosLeft( i , j ) },50); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
function getPosTop( i , j ){ return 20 + i*120; } function getPosLeft( i , j ){ return 20 + j*120; } function getNumberBackgroundColor( number ){ switch( number ){ case 2:return "#eee4da";break; case 4:return "#ede0c8";break; case 8:return "#f2b179";break; case 16:return "#f59563";break; case 32:return "#f67c5f";break; case 64:return "#f65e3b";break; case 128:return "#edcf72";break; case 256:return "#edcc61";break; case 512:return "#9c0";break; case 1024:return "#33b5e5";break; case 2048:return "#09c";break; case 4096:return "#a6c";break; case 8192:return "#93c";break; } return "black"; } function getNumberColor( number ){ if( number <= 4 ) return "#776e65"; return "white"; } function nospace( board ){ for( var i = 0 ; i < 4 ; i ++ ) for( var j = 0 ; j < 4 ; j ++ ) if( board[i][j] == 0 ) return false; return true; } |
二、总结
根据网上教程写了个简单框架,很粗糙,算是个练手的小项目。