我利用了週六,週日兩天的時間,完完整整地寫出一個2048的web遊戲,其中所涉及的技術:Html+css+javascript。演示地址:
首先,我們拿到這樣一個任務,肯定是要玩一下2048這個遊戲的。並不是單純地玩,要想一下這個遊戲的佈局,思路等等 2048這個遊戲是這樣的:根據你的交互而進行下一步動作,這是什麼意思呢?就是這個遊戲的是否進行是根據你的按鍵來判斷的,你所按的鍵分別是:上下左右。每一個格子移動的時候會做判斷,例如向左移動:左邊是沒有數字的格子還是有數字的格子,這個數字是與當前移動的格子數字相等還是不相等,然後找到在哪個格子上顯示對應的數,遊戲的大概流程就是這樣。
接着我們按照分析→設計→實現的思路:把我們的代碼結構設計一下:首先我們需要一個index.html文件:裏面存放着主頁的佈局:生成兩個4*4的格子布局,第一個是沒有數字的,寬高確定的能顯示的;第二個是動態顯示的,即是一開始不給它設置寬高,當用戶移動的時候再動態顯示出來。第二,需要一個樣式表文件:2048.css。
接着重點是js文件,這裏我們分爲了三個不同功能的文件:①main2048.js:保存主體動作代碼②shownumberAnimation.js:這個是包含數字出現和移動的動畫代碼
③support2048.js:這個是提供一些判斷是否能夠移動的代碼。
接着,我們來看看代碼的具體實現
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>2048</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/2048.css"/>
<script type="text/javascript" src="js/shownumberAnimation.js"></script>
<script type="text/javascript" src="js/support2048.js"></script>
<script type="text/javascript" src="js/main2048.js"></script>
</head>
<body>
<header><h1>2048</h1>
<a href="javascript:newGame();" id="newGameButton">NewGame</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>
2048.css
header{
display: block;
width: 100%;
text-align: center;
margin: 0 auto;
}
header h1{
font-family: "微軟雅黑";
font-size: 40px;
font-weight: bold;
}
header #newGameButton{
display: block;
width:100px;
margin: 20px auto;
background-color: #c00;
border-radius:10px;
color: wheat;
text-decoration: none;
text-align: center;
}
header p{
text-align: center;
}
#grid-container{
width: 460px;
height: 460px;
padding: 20px;
margin: 20px auto;
border-radius:10px ;
background-color:#bbada0 ;
position: relative;
}
.grid-cell{
width: 100px;
height: 100px;
background-color: #ccc0b3;
border-radius: 6px;
position: absolute;
}
.number-cell{
position: absolute;
text-align: center;
border-radius:6px ;
line-height: 100px;
font-weight: bold;
font-family:arial;
}
main2048.js
var board=new Array();
var score=0;
var hasConflicted=new Array();
var startx=0;
var starty=0;
var endx=0;
var endy=0;
$(document).ready(function(){
newGame();
//自適應
forMobile();
});
function newGame(){
//初始化佈局
init();
//隨機生成數字
generateOnenumber();
generateOnenumber();
score=0;
}
function forMobile(){
$('#grid-container').css('width',gridContainerWidth-2*cellSpace);
$('#grid-container').css('height',gridContainerWidth-2*cellSpace);
$('#grid-container').css('padding',cellSpace);
$('#grid-container').css('border-radius',0.02*gridContainerWidth);
$('.grid-cell').css('width',cellSideLength);
$('.grid-cell').css('height',cellSideLength);
$('.grid-cell').css('border-radius',0.02*cellSideLength);
}
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',getTop(i));
gridcell.css('left',getLeft(j));
}
}
for(i=0;i<4;i++){
board[i]=new Array();
hasConflicted[i]=new Array();
for(j=0;j<4;j++){
board[i][j]=0;
hasConflicted[i][j]=false;
}
}
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 numbercell=$("#number-cell-"+i+"-"+j)
if(board[i][j]==0){
numbercell.css("width",'0');
numbercell.css("height",'0');
numbercell.css("top",getTop(i)+cellSideLength/2);
numbercell.css("left",getLeft(j)+cellSideLength/2);
}
else{
numbercell.css("width",cellSideLength);
numbercell.css("height",cellSideLength);
numbercell.css("top",getTop(i));
numbercell.css("left",getLeft(j));
numbercell.css("background-color",getNumberCellBgcolor(board[i][j]));
numbercell.css("color",getNumberCellColor(board[i][j]));
numbercell.text(rank(board[i][j]));
}
hasConflicted[i][j]=false;
}
$('.number-cell').css('line-height',cellSideLength+'px');
$('.number-cell').css('font-size',0.2*cellSideLength+'px');
}
function generateOnenumber(){
//首先判斷有沒有空間可用
if(nospace(board)){
return false;
}
//生成隨機位置
var randomx=parseInt(Math.floor(Math.random()*4));
var randomy=parseInt(Math.floor(Math.random()*4));
var times=0;
while(times<50){
if(board[randomx][randomy]==0)
break;
else{
randomx=parseInt(Math.floor(Math.random()*4));
randomy=parseInt(Math.floor(Math.random()*4));
}
times++;
}
if(times==50){
for(var i=0;i<4;i++)
for(var j=0;j<4;j++){
if(board[i][j]==0){
randomx=i;
randomy=j;
}
}
}
//生成隨機數字
var randomnum=Math.random()<0.5?2:4;
//在隨機位置上顯示隨機數字
board[randomx][randomy]=randomnum;
showNumberwithAnimation(randomx,randomy,randomnum);
return true;
}
$(document).keydown(function(event){
switch(event.keyCode){
case 37:
if(moveLeft()){
setTimeout('generateOnenumber()',210);
setTimeout("isGameOver()",300);
}
break;//左按鍵
case 38:
if(moveUp()){
setTimeout('generateOnenumber()',210);
setTimeout("isGameOver()",300);
}break;//上按鍵
case 39:
if(moveRight()){
setTimeout('generateOnenumber()',210);
setTimeout("isGameOver()",300);
}break;//右按鍵
case 40:
if(moveDown()){
setTimeout('generateOnenumber()',210);
setTimeout("isGameOver()",300);
}break;//下按鍵
}
})
//觸控交互
document.addEventListener('touchstart',function(event){
event.preventDefault();
startx=event.touches[0].pageX;
starty=event.touches[0].pageY;
});
document.addEventListener('touchend',function(event){
event.preventDefault();
endx=event.changedTouches[0].pageX;
endy=event.changedTouches[0].pageY;
var deltax=endx-startx;
var deltay=endy-starty;
//判斷方向
if(Math.abs(deltax)>=Math.abs(deltay)){
if(deltax>0){
//moveRight
if(moveRight()){
setTimeout('generateOnenumber()',210);
setTimeout("isGameOver()",300);
}
}
else{
//moveLeft
if(moveLeft()){
setTimeout('generateOnenumber()',210);
setTimeout("isGameOver()",300);
}
}
}
else{
if(deltay>0){
//moveDown
if(moveDown()){
setTimeout('generateOnenumber()',210);
setTimeout("isGameOver()",300);
}
}
else{
//moveUp
if(moveUp()){
setTimeout('generateOnenumber()',210);
setTimeout("isGameOver()",300);
}
}
}});
function isGameOver(){
if(nospace(board)&&nomove(board)){
alert("GameOver");
newGame();
}
}
function moveLeft(){
if(!canMoveLeft(board))
return false;
//moveleft
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
if(board[i][j]!=0){
for(var k=0;k<j;k++){
if(board[i][k]==0 &&noBlockHorizonta(i,k,j,board)){
//move
showMoveAnimation(i,j,i,k);
board[i][k]=board[i][j];
board[i][j]=0;
continue;
}
else if(board[i][k]==board[i][j]&&noBlockHorizonta(i,k,j,board)&&!hasConflicted[i][k]){
//move
board[i][k]+=board[i][j];
showMoveAnimation(i,j,i,k);
board[i][j]=0;
//add
score+=board[i][k];
updatescore(score);
hasConflicted[i][k]=true;
continue;
}
}
}
}
}
setTimeout('updateboardView()',200);
return true;
}
function moveUp(){
if(!canMoveUp(board))
return false;
//moveup
/*for(var i=1;i<4;i++){
for(var j=0;i<4;j++){
if(board[i][j]!=0){
for(var k=0;k<i;k++){
if(board[k][j]==0 &&noBlockVertical(i,j,k,board)){
//move
showMoveAnimaiton(i,j,k,j);
board[k][j]=board[i][j];
board[i][j]=0;
continue;
}
else if(board[k][j]==board[i][j]&& noBlockVertical(i,j,k,board)){
//move
showMoveAnimaiton(i,j,k,j);
board[k][j]+=board[i][j];
board[i][j]=0;
continue;
}
}
}
}
}
setTimeout('updateboardView()',200);
return true;*/
//moveUp
for( var j = 0 ; j < 4 ; j ++ )
for( var i = 1 ; i < 4 ; i ++ ){
if( board[i][j] != 0 ){
for( var k = 0 ; k < i ; k ++ ){
if( board[k][j] == 0 && noBlockVertical(j,k,i,board)){
//move
showMoveAnimation(i,j,k,j);
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[k][j] == board[i][j] && noBlockVertical(j,k,i,board)&&!hasConflicted[k][j] ){
//move
showMoveAnimation(i,j,k,j);
//add
board[k][j] += board[i][j];
board[i][j] = 0;
score+=board[k][j];
updatescore(score);
hasConflicted[k][j]=true;
continue;
}
}
}
}
setTimeout("updateboardView()",200);
return true;
}
function moveRight(){
if(!canMoveRight(board))
return false;
//moveright
for(var i=0;i<4;i++){
for(var j=2;j>=0;j--){
if(board[i][j]!=0){
for(var k=3;k>j;k--){
if(board[i][k]==0 &&noBlockHorizonta(i,j,k,board)){
//move
showMoveAnimation(i,j,i,k);
board[i][k]=board[i][j];
board[i][j]=0;
continue;
}
else if(board[i][k]==board[i][j]&&noBlockHorizonta(i,j,k,board)&& !hasConflicted[i][k]){
//move
board[i][k]+=board[i][j];
showMoveAnimation(i,j,i,k);
board[i][j]=0;
score+=board[i][k];
updatescore(score);
hasConflicted[i][k]=true;
continue;
}
}
}
}
}
setTimeout('updateboardView()',200);
return true;
}
function moveDown(){
if(!canMoveDown(board))
return false;
//movedown
for(var j=0;j<4;j++){
for(var i=2;i>=0;i--){
if(board[i][j]!=0){
for(var k=3;k>i;k--){
if(board[k][j]==0 &&noBlockVertical(j,i,k,board)){
//move
showMoveAnimation(i,j,k,j);
board[k][j]=board[i][j];
board[i][j]=0;
continue;
}
else if(board[k][j]==board[i][j]&&noBlockVertical(j,i,k,board)&&!hasConflicted[k][j]){
//move
showMoveAnimation(i,j,k,j);
board[k][j]+=board[i][j];
board[i][j]=0;
score+=board[k][j];
updatescore(score);
hasConflicted[k][j]=true;
continue;
}
}
}
}
}
setTimeout('updateboardView()',200);
return true;
}
shownumberAnimation.js
function showNumberwithAnimation(i,j,number){
var numbercell=$("#number-cell-"+i+"-"+j);
numbercell.css("background-color",getNumberCellBgcolor(number));
numbercell.css("color",getNumberCellColor(number));
numbercell.text(rank(number));
numbercell.animate(
{
width:cellSideLength,
height:cellSideLength,
top:getTop(i),
left:getLeft(j)
},300);
}
function showMoveAnimation(fromi,fromj,tox,toy){
var numbercell=$("#number-cell-"+fromi+"-"+fromj);
numbercell.animate(
{
top:getTop(tox),
left:getLeft(toy)
}
,200);
}
function updatescore(score){
$('#score').text(score);
}
support2048.js
documentWidth=window.screen.availWidth;
if(documentWidth>500){
gridContainerWidth=500;
cellSideLength=100;
cellSpace=20;
}else{
gridContainerWidth=0.92*documentWidth;
cellSideLength=0.18*documentWidth;
cellSpace=0.04*documentWidth;}
function getTop(i){
return cellSpace+(cellSideLength+cellSpace)*i;
}
function getLeft(j){
return cellSpace+(cellSideLength+cellSpace)*j;
}
function getNumberCellBgcolor(number){
switch(number){
case 2: return '#EEE9BF';break;
case 4:return '#EEC900';break;
case 8:return '#EEE9BF';break;
case 16:return '#EE3A8C';break;
case 32:return '#EEE9BF';break;
case 64:return '#CDAD00';break;
case 128:return '#EE1289';break;
case 256:return '#AEEEEE';break;
case 512:return '#8B0000';break;
}
return "#EEE9BF";
}
function getNumberCellColor(number){
if(number==4){
return '#EE1289';
}
return 'black';
}
function nospace(borad){
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
if(borad[i][j]==0)
return false;
}
}
return true;
}
function canMoveLeft(board){
for(var i=0;i<4;i++){
for(var j=1;j<=3;j++){
if(board[i][j-1]==0 ||(board[i][j-1]==board[i][j])){
return true;
}
}
}
return false;
}
function canMoveUp(board){
for(var i=1;i<4;i++){
for(var j=0;j<4;j++){
if(board[i-1][j]==0 ||(board[i-1][j] == board[i][j])){
return true;
}
}
}
return false;
}
function canMoveRight(board){
for(var i=0;i<4;i++){
for(var j=0;j<3;j++){
if(board[i][j+1]==0 ||(board[i][j+1]==board[i][j])){
return true;
}
}
}
return false;
}
function canMoveDown(board){
for(var i=0;i<=3;i++){
for(var j=0;j<3;j++){
if(board[j+1][i]==0 ||(board[j+1][i]==board[j][i])){
return true;
}
}
}
return false;
}
function noBlockHorizonta(row,col1,col2,board)
{
for(var i=col1+1;i<col2;i++)
{
if(board[row][i]!=0)
return false;
}
return true;
}
function noBlockVertical(col,row1,row2,board)
{
for(var i=row1+1;i<row2;i++)
{
if(board[i][col]!=0)
return false;
}
return true;
}
function nomove(board){
if(canMoveDown(board)||canMoveLeft(board)||canMoveRight(board)||canMoveUp(board)){
return false;
}
return true;
}
function rank(number){
switch(number){
case 2: return '青銅';break;
case 4:return '白銀';break;
case 8:return '黃金';break;
case 16:return '白金';break;
case 32:return '鑽石';break;
case 64:return '超凡大師';break;
case 128:return '最強王者';break;
}
return "最強王者";
}
其實最重要的是分析→設計→實現這三個步驟想明白了,就迎刃而解了。
本文作者: By:羅堅元 http://blog.csdn.net/sunyuan_software