歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

利用HTML5 <canvas>實現2048小游戲

利用HTML5 <canvas>實現2048小游戲

//僅供學習用,請勿用於其他用途

嗯,花一天寫了一下,當做練手,後來發現其實用CSS3來做會比較輕松而且好看點...有機會就補上

肯定沒有原版的好看好操作,而且貌似封裝得也不太行,將就著看看吧

本文的2048小游戲演示地址:http://www.linuxidc.com/files/2014/12/2048/index.html

最後成品圖:

index.html:

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>2048</title> 
    </head> 
    <body> 
        <div id = "content"> 
            <canvas id = "drawing"> 
                your browser doesn't support canvas! 
            </canvas> 
        </div> 
        <script type="text/javascript" src="js/jquery-2.0.3.js"></script> 
        <script type="text/javascript" src="js/chesspieces.js"></script> 
        <script type="text/javascript" src="js/drawing.js"></script> 
        <script type="text/javascript" src="js/game.js"></script> 
    </body> 
</html> 

chesspieces.js:

var Cp = { 
     
    up : function(map){ 
        var i , j , t , k , flag; 
        flag = 0; 
        for ( i = 0; i < map.length; i++ ){ 
            for( j = 0; j < map[i].length ; j++){ 
                if(map[i][j] > 0){ 
                    t = map[i][j]; 
                    //從上至下遍歷,坐標(i,j)的值上邊一個是否有值, 
                    //有,判斷是否相等,相等,合並,不相等,不移動, 
                    //無,往上移動,直至到頭 
                    for( k = i-1; k >= 0; k--){ 
                        if(map[k][j] > 0){ 
                            if(map[k][j] == t){ 
                                map[i][j]=0; 
                                map[k][j]+=t; 
                                flag = 1; 
                            }else{ 
                                map[i][j]=0; 
                                map[k+1][j]=t; 
                                if(i != k+1){ 
                                    flag = 1; 
                                } 
                            } 
                            break; 
                        } 
                        if(k==0){                           
                            map[i][j]=0; 
                            map[k][j]=t; 
                            if(i != k+1){ 
                                flag = 1; 
                            } 
                        } 
                    } 
                } 
                 
            }           
        }; 
        return flag; 
    }, 
    down : function(map){ 
        var i , j , t , k , flag; 
        flag = 0; 
        for ( i = map.length - 1; i >= 0 ; i-- ){ 
            for( j = 0 ; j < map[i].length ; j++){ 
                if(map[i][j] > 0){ 
                    t = map[i][j]; 
                    for( k = i+1; k < map.length; k ++){ 
                        if(map[k][j] > 0){ 
                            if(map[k][j] == t){ 
                                map[i][j]=0; 
                                map[k][j]+=t; 
                                flag = 1; 
                            }else{ 
                                map[i][j]=0; 
                                map[k-1][j]=t; 
                                if(i != k-1){ 
                                    flag = 1; 
                                } 
                            } 
                            break; 
                        } 
                        if(k==map.length-1){                             
                            map[i][j]=0; 
                            map[k][j]=t; 
                            if(i != k+1){ 
                                flag = 1; 
                            } 
                        } 
                    } 
                } 
                 
            }           
        }; 
        return flag; 
    }, 
    left : function(map){ 
        var i , j , t , k , flag; 
        flag = 0; 
        for ( i = 0; i < map.length; i++ ){ 
            for( j = 0; j < map.length ; j++){ 
                if(map[i][j] > 0){ 
                    t = map[i][j]; 
                    for( k = j-1; k >= 0; k --){ 
                        if(map[i][k] > 0){ 
                            if(map[i][k] == t){ 
                                map[i][j]=0; 
                                map[i][k]+=t; 
                                flag = 1; 
                            }else{ 
                                map[i][j]=0; 
                                map[i][k+1]=t; 
                                if(j != k+1){ 
                                    flag = 1; 
                                } 
                            } 
                            break; 
                        } 
                        if(k==0){                           
                            map[i][j]=0; 
                            map[i][k]=t; 
                            flag = 1; 
                        } 
                    } 
                } 
                 
            }           
        }; 
        return flag; 
    }, 
    right : function(map){ 
        var i , j , t , k , flag; 
        flag = 0; 
        for ( i = 0; i < map.length; i++ ){ 
            for( j = map[i].length-1; j >= 0 ; j--){ 
                if(map[i][j] > 0){ 
                    t = map[i][j]; 
                    for( k = j+1; k < map[i].length; k ++){ 
                        if(map[i][k] > 0){ 
                            if(map[i][k] == t){ 
                                map[i][j]=0; 
                                map[i][k]+=t; 
                                flag = 1; 
                            }else{ 
                                map[i][j]=0; 
                                map[i][k-1]=t; 
                                if(j != k-1){ 
                                    flag = 1; 
                                } 
                            } 
                            break; 
                        } 
                        if(k==map[i].length-1){                         
                            map[i][j]=0; 
                            map[i][k]=t; 
                            flag = 1; 
                        } 
                    } 
                } 
                 
            }           
        }; 
        return flag; 
    } 
}; 

drawing.js:

var mapdata =<SPAN >    </SPAN>[[0,0,0,0], 
    <SPAN > </SPAN>[0,0,0,0], 
        [0,0,0,0], 
        [0,0,0,0]]; 
var Map = { 
    isFull : function(map){ 
        var i , j; 
    }, 
    draw : function(map,ctx){ 
        var i , j , c ; 
        //TODO c = eee4da ; 
        // alert(map); 
        for(i = 0; i < map.length; i++ ){//i為Y軸,j為X軸 
            for(j = 0; j < map[i].length; j++){ 
                if(map[i][j]==0){ 
                    ctx.fillStyle='#eee4da'; 
                    } 
                else{ 
                    ctx.fillStyle='#ede0c8'; 
                } 
                ctx.fillRect(j*100+10,i*100+10,80,80); 
                if(map[i][j]>0){ 
                    ctx.fillStyle='#000000'; 
                    ctx.font = 'bold 48px Arial'; 
                    ctx.textAlign = 'center'; 
                    ctx.textBaseline = 'middle'; 
                    ctx.fillText(''+map[i][j],j*100+50,i*100+50); 
                } 
            } 
        } 
    }, 
         
    randomchesspieces : function(map){ 
        var x , y , z , i ; 
        while(true){ 
            x = Math.floor(Math.random()*4); 
            y = Math.floor(Math.random()*4); 
            z = 2; 
            if(Math.floor(Math.random()*10) > 7){ 
                z = 4; 
            } 
            if(map[x][y] == 0){ 
                map[x][y] = z; 
                break; 
            } 
        } 
    }, 
     
}; 

game.js:

var Game = { 
    drawing : $('canvas'), 
         
    context : drawing.getContext('2d'), 
     
    initDrawing : function(){ 
        drawing.setAttribute('width',400); 
        drawing.setAttribute('height',400); 
        this.context.fillStyle = "#bbada0"; 
        this.context.fillRect(0,0,drawing.width,drawing.height); 
        Map.randomchesspieces(mapdata); 
        Map.randomchesspieces(mapdata); 
        Map.draw(mapdata,this.context); 
    }, 
     
    initGame : function(){ 
        this.initDrawing(); 
        this.Move(this.context); 
    }, 
     
    Move : function(ctx){ 
        var k; 
        var m = function(e){ 
            var maptest = JSON.parse(JSON.stringify(mapdata));//檢驗是否還有下一步,無則彈出over 
            var flag =Cp.left(maptest)||Cp.down(maptest)||Cp.right(maptest)||Cp.up(maptest); 
            if(!flag) 
                alert("Game Over!"); 
            switch (e.keyCode) { 
                case 37: 
                    if(Cp.left(mapdata)){ 
                    Map.randomchesspieces(mapdata); 
                    Map.draw(mapdata,ctx); 
                    } 
                    break;   
                case 38: 
                    if(Cp.up(mapdata)){ 
                        Map.randomchesspieces(mapdata); 
                        Map.draw(mapdata,ctx); 
                        console.log("add,up"); 
                    } 
                    break; 
                case 39: 
                    if(Cp.right(mapdata)){ 
                    Map.randomchesspieces(mapdata); 
                    Map.draw(mapdata,ctx); 
                    } 
                    break; 
                case 40: 
                    if(Cp.down(mapdata)){ 
                        Map.randomchesspieces(mapdata); 
                        Map.draw(mapdata,ctx); 
                        console.log("add,down"); 
                    } 
                    break; 
            } 
        }; 
        $(document).on("keyup",m); 
    } 
}; 
 
Game.initGame(); 

本文源碼下載:

------------------------------------------分割線------------------------------------------

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2014年資料/12月/26日/利用HTML5 Canvas實現2048小游戲/

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

--------------------------------------分割線 --------------------------------------

HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm

HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm

HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm

HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm

HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm

《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm

關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm

HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm

--------------------------------------分割線 --------------------------------------

Copyright © Linux教程網 All Rights Reserved