利用HTML5 Canvas製作簡單的打手槍遊戲_html5教學技巧

以前、Donnet の DEMO でオナニー ゲームを見て、その写真と音声を書き留めました。 。 。 。趣味で書き直しました。娯楽のためだけに。 。 。 。 。 。フレームワークは使用せず、すべての js を自分で書きます。 。 。 。 。 。これは、Canvas を初めてプレイする人にとっては役立つかもしれない簡単なチュートリアルです。ご容赦ください。

早速、デモ: 飛行機ゲームから始めましょう。元の投稿者はこれをただ楽しむために書いたもので、本格的なゲームに書き込むつもりはありませんでした。

本題に入りましょう: オナニー ゲーム ファイルには、index.html エントリ ファイル、allSprite.js スプライトのロジック処理ファイル、loading.js 読み込み処理ファイル、および data.js (一部の初期化データ) が含まれています。

まず、通常のゲームは基本的にロードが必要です。ロード ページは、スプライト シートの画像、オーディオなどを含むデータを事前にロードするために使用されます。これは小規模なゲームであるため、一部のオーディオと画像のみをロードする必要があります。内部の読み込みコードは主に次のとおりです。その他は読み込みアニメーションを作成するためのものです。興味がある場合は、デモのコンソールをご覧ください。 >

XML/HTML コード

コンテンツをクリップボードにコピー

1. loadImg:function(datas){
2. var _this = this;   
3. var dataIndex = 0;   
4. li();   
5. function li(){
6. if(datas[dataIndex].indexOf("mp3")>=0){
7. var audio = document.createElement("audio");   
8. document.body.appendChild(audio);   
9. audio.preload = "auto";   
10. audio.src = datas[dataIndex];   
11. audio.oncanplaythrough = function(){
12. this.oncanplaythrough = null;   
13. dataIndex ;   
14. if(dataIndex===datas.length){
15. _this.percent = 100;   
16. }else {
17. _this.percent = parseInt(dataIndex/datas.length*100);   
18. li.call(_this);   
19. }
20. }
21. }其他 {  
22.                     preLoadImg(datas[dataIndex] , function(){  
                        dataIndex ;   
           地
24.                             ;   
                        } 其他 {   
25.                             (dataIndex/datas.length*100);                                   
26.                         }   
27.                     })                    }                }   
28.         },   
29.   
30. //再貼出preLoadImg的方法   
31. 函數 preLoadImg(src, 回調){   
32.     var img
33.  = new
34.  Image();   
35.     img.src
36.  = src;   
37.     if(img.complete){            callback.call(img);        }其他 {   
38.         img.onload = 函數
            callback.call(img);   
39.         }   
40.     }   
41. }     

    
    まず、配列を使用してファイルへのリンクを data.js に保存し、次にこれらのリンクが画像であるかオーディオであるかを判断します。画像の場合は、preLoadImg を使用して画像をロードします。非常に簡単で、新しい画像を作成し、それにリンクを割り当て、ロード後にコールバックするだけです。オーディオは、HTML5 オーディオ dom オブジェクトを生成し、それにリンクを割り当てることによってロードされます。オーディオには「canplaythrough」イベントがあり、ブラウザーがバッファリングのために停止せずに指定されたオーディオ/ビデオの再生を継続できると予想される場合、canplaythrough イベントが発生します。これは、canplaythrough が呼び出された時点でオーディオがほぼロードされており、次のオーディオをロードできることを意味します。このように、すべてがロードされた後、コールバックが行われ、ゲームが開始されます。

    ゲームが始まりました。ゲームには多くのオブジェクトが必要になるため、異なるオブジェクト間の各フレームの動きをビヘイビアーを使用して個別に記述することができます。
    

    XML/HTML コードコンテンツをクリップボードにコピー

    1. W.Sprite = 関数(name , painter , behaviors , args){
    2. if(名前 !== 未定義) this.name = 名前;   
    3. if(ペインター !== 未定義) this.painter = ペインター;   
    4. this.top = 0;   
    5. this.left = 0;   
    6. this.width = 0;   
    7. この高さ = 0;   
    8. this.velocityX = 3;   
    9. this.velocityY = 2;   
    10. this.visible = true;   
    11. this.animating = false;   
    12. this.behaviors = 動作;   
    13. this.rotateAngle = 0;   
    14. this.blood = 50;   
    15. this.fullBlood = 50;   
    16. if(名前==="計画"){
    17. this.rotateSpeed = 0.05;   
    18. this.rotateLeft = false;   
    19. this.rotateRight = false;   
    20. this.fire = false;   
    21. this.firePerFrame = 10;   
    22. this.fireLevel = 1;   
    23. }else if(名稱==="星星"){   
    24.         this.width = 數學
    數學
    25. 2;            this.speed = 
    1
    26. this1this         
    this.lightLength
    27.  = 5;            
    28. this.cacheCanvas = 文件
    29.         這this.cacheCtx = this.cachevasCtx = this.cachevas.getContext'2005);   
    30.         這個this.cacheCanvas.width = this.width 2.Lengength*;   
    31.         
    32. 這個this.cacheCanvas.height =this.width this.width this.Length*width   
    33.         this.painter.cache(this);        }else if(名稱==="badPlan"){   
    34.         this.badKind = 1;   
    35.         this.speed = 2;   
    36.         this.rotateAngle = 
    數學
    37.     }else if(名稱==="missle"){            
    38. this.width = missleWidth;   
    39.     }else if(名稱==="boom"){            
    40. this.width = boomWidth = 
    boomWidth
    41.  = boomWidth = boomWidth = boomWidth;   
    42.     }else if(名稱==="食物"){            
    43. this.width = 40 = 40
    40
    44. ;            this.speed = 3;            this.kind = 「升級」 = 「升級」 = 「升級」    }  
    45.     this.toLeft = false;   
    46.     this.toTop = false;   
    47.     this.toRight = false;   
    48.     this.toBottom = false;   
    49.   
    50.     this.outArcRadius = 數學.s
    *
    51. .s
    *
    52. .s.s
    53.   
    54.     if(args){   
    55.         for(var arg in args){   
    56.             這[arg] = args[arg];   
    57.         }   
    58.     }    }   
    60. Sprite.prototype = {   
    61.     建構子:Sprite,        paint:function(){   
    62.         if(
    63. this.name==="badPlan"){this.update();} 
    64.   
    65.         if(this.painter !== 未定義 && this.visible){   
    66.             if(this.name!=="badPlan") {   
    67.                 this.update();                }                if(this.name==="計劃"||this.name
    ==="計劃"||
    68. this.name==="計劃"||
    this.name==="badPlan"){   
                    ctx.save();   
                    ctx.translate(this.left, this.top);   
                    ctx.rotate(this.rotateAngle);   
                    this.painter.paint(this);   
                    ctx.restore();   
                }其他 {   
                    this.painter.paint(this);   
    76.             }            }        },   
    77.     update:function(time){   
    78.         if(this.behaviors){   
    79.             for(var i=0;ithis.behaviors.length;i ){   
    80.                 this.behaviors[i].execute(this,time);   
    81.             }   
    82.         }   
    83.     }   
    84. }   

    
    寫出精靈類別後，就可以透過寫每個的painter以及behavior來產生不同的物件了。接下來就是寫painter了，painter分成兩種，一種是普通的painter，一種就是精靈表painter，因為像爆炸動畫，飛機開槍動畫，都不是一張圖片就能搞定的，所以就需要用到精靈表了：
    

    

    而繪製這些就要為他們定制一個精靈表繪製器，下面這個是最簡單的精靈表繪製器，針對遊戲的複雜性可以相對的修改精靈表寫法，直到合適，不過原理都大同小異，就是小修小改而已：

    XML/HTML Code複製內容到剪貼簿

    1. var SpriteSheetPainter = 函數（單元函數
    2. （單元 >             this.cells
    3.  = 細胞             this.cellIndex =         }   
    4.         
    SpriteSheetPainter.prototype
    5.  = {  =              提前:function(){   
    6.                 if(
    7. this.cellIndex === .                     this.cellIndex
    8.                 }                    其他 this.cellIndex ;                },   
    9.             繪畫：函數（精靈）{   
    10.                 var 
    11. cell 🎜>
    12.                 context.drawImage(spritesheet , cell.x , cell.y ,spcell.p . .h);   
    13.             }            }     
    14. 而普通的器就更簡單了，直接寫一個畫家，把要畫的東西都寫進去就行了。
    有了精靈類和精靈表較差器後，我們就可以把星星，飛機，子彈，爆炸對像都寫出來了：下面是整個allSprite.js的代碼：
    16. JavaScript 程式碼 將內容複製到剪切板
        1. (函數(W){   
        2.     「使用嚴格」  
        3.     var planWidth = 24,   
        4.         計畫高度= 24,   
        5.         missleWidth = 70,   
        6.         missleHeight = 70,   
        7.         boomWidth = 60;   
        8.     //精靈類別  
        9.     W.Sprite = 函數（姓名、畫家、行為、參數）{   
        10.         if(name !== 未定義) 這個這個         
        11. if(畫家！==未定義) 畫家>         這
        .top = 0;   
        12.         這
        .left = 0;   
        13.         這
        .width = 0;   
        14.         這
        .height = 0;   
        15.         這個
        .velocityX = 3;   
        16.         這
        .velocityY = 2;   
        17.         這個
        .visible = 
        18. true;         這個.animating = 
        19.         這個.behaviors = 行為；            這
        20. .rotateAngle = 0;            這
        21. .blood = 50;            這
        22. .fullBlood = 50;            if
        23. (name==="計畫"             
        24. 這.rotateSpeed = 0.05;   .rotateSpeed = 0.05;                這個
        25. .rotateLeft = .rotateLeft =             
        這個
        26. .rotateRight = .rotateRight =             這個.fire = 
        27. .fire = 
        28.             這.firePerFrame = 10;   
        .firePerFrame = 10;   
        29.             這
        30. .fireLevel = 1;   .fireLevel = 1;            }否則 if
         
        31. if(nameif
        (name
        32. if(name>if ){                
        33. 這.width = Math.random              這
        34. .speed = 1*這.speed = 1*這.speed = 1*這這樣
                    
        35. 這.lightLength = 5;   .lightLength = 5;                這.cacheCanvas = .T.createElement(" >
        36.             這.cacheCtx = 這個>這個>這個>這個>這個>這個> ）；                這.cacheCanvas.width = 
        37. 這樣🎜>.lightLength*2;                這.cacheCanvas.height = 這.lightLength*2;   
                    
        38. 這.painter.cache(        }否則 
        if
        39.  if(nameif(nameif(name
        if
        40. (nameif(name
        if
        41. (name(name ){   
        42.             這.badKind = 1;   
        .badKind = 1;   
        43.             這.speed = 2;   .speed = 2;   
        44.             這.rotateAngle = Math 
                }否則 if if(name
    if
    17. (nameif ){   
    18.             這.width = missleWidth;           }否則 if if(nameif(name ){                這.width = boomWidth; 🎜         }其他 if(name==="食物"){ >
    19.             這.width = 40;   .width = 40;   
    20.             這
    21. .speed = 3;   .speed = 3;                這個
    22. .kind = 「升級」
    .kind = 
    23. 「升級」        }            這個
    24. .toLeft =          這個.toTop = 
            
    25. 這個.toRight =          這個
    .toBottom = 
    26.            這個.outArcRadius = Math.sqrt((
    這
    27. .width/2)*2);   
    28.            if(args){                
    for
    29. (
    var
    30. (var(
    var
    31. (var                 這[arg]  
    32.             }            }   
    33.     }   
    34.     Sprite.prototype = {   
    35.         建構子:Sprite,   
    36.         繪製：函數
    37. (){   
    38.             如果(這個
    39. (這個(這個(這個.> > ){這個.update();}   
    40.   
    41.             if( .可見）{                    if
    42. (if(if(if(這個計畫
    43. ) {                        
    這
    44. update();這個 update();                 }  
    45.                 如果(如果(如果(如果這個計劃這個>||這個.name===“導彈”||
    46. 這個 .name===
    47. "壞計畫"){                        ctx.save();                        ctx.translate(
    48. 這.                      ctx.rotate(
    這個
    49.                     這                     ctx.restore();   
    50.                 }
    其他
    51.  {                      這
                    }                }            },   
    52.         更新：
    53. 函數（時間）{   
    54.             
    55. 如果(               
    對於
    56. (對(對(
    var
    57. 這個(var這.behaviors.length;i ){                        這個.beofo[ 
    58.                 }                }            }   
    59.     }  
    61. // 精灵表绘制器
    62. W.SpriteSheetPainter = 関数(cells , isloop , endCallback , spritesheet){
    63. この.cells = cells || [];   
    64. この.cellIndex = 0;   
    65. this.dateCount = null;   
    66. この.isloop = isloop;   
    67. これ.endCallback = endCallback;   
    68. この.spritesheet = スプライトシート;   
    69. }
    70. SpriteSheetPainter.prototype = {
    71. advance:関数(){
    72. this.cellIndex = this.isloop?(this.cellIndex===この.cells.length-1?0:この.cellIndex 1):(この.cellIndex 1);   
    73. }、
    74. paint:関数(スプライト){
    75. if(this.dateCount===null){
    76. this.dateCount = new Date();   
    77. }else {
    78. var newd = new Date();   
    79. var tc = newd-this.dateCount;   
    80. if(tc>40){
    81. this.advance();   
    82. this.dateCount = newd;   
    83. }
    84. }  
    85. if(this.cellIndex<this。セル.長さ || この.isloop){
    86. var cell = this.cells[this .cellIndex];   
    87. ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left-sprite.width/ 2、sprite.top-sprite.width/2、cell.w、cell.h）;   
    88. } else if(this.endCallback) {
    89. この.endCallback.call(sprite);   
    90. この.cellIndex = 0;   
    91. }
    92. }
    93. }
    95. //特制飞机精灵表绘制器
    96. W.controllSpriteSheetPainter = 関数(セル, スプライトシート){
    97. この.cells = cells || [];   
    98. この.cellIndex = 0;   
    99. this.dateCount = null;   
    100. this.isActive = false;   
    101. this.derection = true;   
    102. この.spritesheet = スプライトシート;   
    103. }  
    104. controllSpriteSheetPainter.prototype = {
    105. advance:関数(){
    106. if(this.isActive){
    107. この.cellIndex ;   
    108. if(this.cellIndex === this.cells.length){
    109. この.cellIndex = 0;   
    110. this.isActive = false;   
    111. }
    112. }
    113. }、
    114. paint:関数(スプライト){
    115. if(this.dateCount===null){
    116. this.dateCount = new Date();   
    117. }else {
    118. var newd = new Date();   
    119. var tc = newd-this.dateCount;   
    120. if(tc>sprite.firePerFrame){
    121. this.advance();   
    122. this.dateCount = newd;   
    123. }
    124. }
    125. var cell = this.cells[this .cellIndex];   
    126. ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , -planWidth/2 , -planHeight/ 2、セル.w、セル.h）;   
    127. }  
    128. }
    130. W.planBehavior = [
    131. {実行:関数(スプライト,時間){
    132. if(sprite.toTop){
    133. sprite.top = sprite.top
    134. }
    135. if(sprite.toLeft){
    136. sprite.left = sprite.left
    137. }
    138. if(sprite.toRight){
    139. sprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left sprite.velocityX;   
    140. }
    141. if(sprite.toBottom){
    142. sprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top sprite.velocityY;   
    143. }
    144. if(sprite.rotateLeft){
    145. sprite.rotateAngle -= sprite.rotateSpeed;   
    146. }
    147. if(sprite.rotateRight){
    148. sprite.rotateAngle = sprite.rotateSpeed;   スパン