Verwenden Sie HTML5 Canvas, um ein einfaches Masturbationsspiel zu erstellen. HTML5-Tutorial-Fähigkeiten

Ich habe schon einmal in Donnets DEMO ein Masturbationsspiel gesehen und dann die Bilder und den Ton davon heruntergenommen. . . . Ich habe es nur zum Spaß umgeschrieben. Nur zur Unterhaltung. . . . . . Ich verwende kein Framework, ich schreibe alle JS selbst. . . . . . Dies ist also ein einfaches Tutorial, das für diejenigen hilfreich sein kann, die noch keine Erfahrung mit Canvas haben. Bitte verzeihen Sie mir.

Beginnen wir ohne weitere Umschweife mit der DEMO: Airplane Game. Der Originalposter hat dies nur zum Spaß geschrieben und hatte nicht die Absicht, daraus ein ernstes Spiel zu machen.

Kommen wir zum Thema: Die Masturbationsspieldatei enthält die Index.html-Eintragsdatei, die Logikverarbeitungsdatei des Sprites allSprite.js, die Loading.js-Ladeverarbeitungsdatei und data.js (einige initialisierte Daten).

Zunächst einmal erfordern normale Spiele grundsätzlich ein Laden. Die Ladeseite wird zum Vorladen von Daten verwendet, einschließlich Sprite-Sheet-Bildern, Audio usw. Da es sich um ein kleines Spiel handelt, müssen nur einige Audio- und Bilddateien geladen werden. Der darin enthaltene Ladecode dient hauptsächlich der Erstellung von Ladeanimationen. Wenn Sie interessiert sind, schauen Sie sich einfach die Konsole in der DEMO an >

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

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.                                                                     
                           
10.                         dataIndex ;                            if(dataIndex
===datas.length){   
11.                                                         }else {   
                               
12.                             li.call(_this);                            }   
                    }   
                }sonst {   
14.                     preLoadImg(datas[dataIndex] , function(){   
15.                         dataIndex ;   
16.                         if(dataIndex===datas.length){   
17.                                                         } else {                                   
18.                             li.call(_this);   
19.                         }                        })                    }   
20.             }   
21.         },   
22.   
23. //再贴出preLoadImg的方法   
24. function preLoadImg(src , callback){   
25.     var 
img
26.  = 
neu
27.  Image();   
28.     
img.src
29.  = src;        if(img.complete){            callback.call(img);   
30.     }sonst {            
img.onload
31.  = 
function
32. (){   
33.             callback.call(img);   
34.         }        }    }   
  

36. 
    Ich verwende zuerst ein Array, um die Links zu den Dateien in data.js zu speichern, und bestimme dann, ob es sich bei diesen Links um Bilder oder Audios handelt, um sie mit preLoadImg zu laden ist sehr einfach: Erstellen Sie einfach ein neues Objekt, weisen Sie ihm den Link zu und rufen Sie es nach dem Laden wieder auf. Audio wird geladen, indem ein HTML5-Audio-Dom-Objekt generiert und ihm der Link zugewiesen wird. Wenn der Browser erwartet, dass er die angegebene Audio-/Videowiedergabe fortsetzen kann, ohne ihn zum Puffern anzuhalten, tritt das Ereignis „canplaythrough“ auf , was bedeutet, dass beim Aufruf von canplaythrough das Audio fast geladen wurde und das nächste Audio geladen werden kann. Einfach so: Nachdem alles geladen ist, erfolgt der Rückruf und das Spiel beginnt.

    Das Spiel erfordert viele Objekte, daher habe ich sie in einem Sprite-Objekt zusammengefasst. Die Bewegung jedes Frames zwischen verschiedenen Objekten kann mithilfe des Verhaltens separat geschrieben werden.
    

    XML/HTML-CodeInhalt in die Zwischenablage kopieren

    1. W.Sprite = Funktion(Name , Maler , Verhalten , Argumente){   
    2.     if(name !== undefiniert) this.name = name;   
    3.     if(maler !== undefiniert) this.painter = maler;   
    4.     this.top = 0;   
    5.     this.left = 0;   
    6.     this.width = 0;   
    7.     this.height = 0;   
    8.     this.velocityX = 3;   
    9.     this.velocityY = 2;   
    10.     this.visible = true;   
    11.     this.animating = false;   
    12.     this.behaviors = behaviors;   
    13.     this.rotateAngle = 0;   
    14.     this.blood = 50;   
    15.     this.fullBlood = 50;   
    16.     if(name==="plan"){   
    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(name==="star"){   
    24.         this.width = Math.random()*2;   
    25.         this.speed = 1*this.width/2;   
    26.         this.lightLength = 5;   
    27.         this.cacheCanvas = document.createElement("canvas");   
    28.         thisthis.cacheCtx = this.cacheCanvas.getContext('2d');   
    29.         thisthis.cacheCanvas.width = this.width this.lightLength*2;   
    30.         thisthis.cacheCanvas.height = this.width this.lightLength*2;   
    31.         this.painter.cache(this);   
    32.     }else if(name==="badPlan"){   
    33.         this.badKind = 1;   
    34.         this.speed = 2;   
    35.         this.rotateAngle = Math.PI;   
    36.     }else if(name==="missle"){   
    37.         this.width = missleWidth;   
    38.     }else if(name==="boom"){   
    39.         this.width = boomWidth;   
    40.     }else if(name==="food"){   
    41.         this.width = 40;   
    42.         this.speed = 3;   
    43.         this.kind = "LevelUP"  
    44.     }  
    45.     this.toLeft = false;   
    46.     this.toTop = false;   
    47.     this.toRight = false;   
    48.     this.toBottom = false;   
    49.   
    50.     this.outArcRadius = Math.sqrt((this.width/2*this.width/2 )*2);   
    51.   
    52.     if(args){   
    53.         for(var arg in args){   
    54.             this[arg] = args[arg];   
    55.         }   
    56.     }   
    57. }   
    58. Sprite.prototype = {   
    59.     constructor:Sprite,   
    60.     paint:function(){   
    61.         if(this.name==="badPlan"){this.update();}   
    62.   
    63.         if(this.painter !== undefiniert && this.visible){   
    64.             if(this.name!=="badPlan") {   
    65.                 this.update();   
    66.             }   
    67.             if(this.name==="plan"||this.name===" missle"||this.name==="badPlan"){   
    68.                 ctx.save();   
    69.                 ctx.translate(this.left , this.top);   
    70.                 ctx.rotate(this.rotateAngle);   
    71.                 this.painter.paint(this);   
    72.                 ctx.restore();   
    73.             }else {   
    74.                 this.painter.paint(this);   
    75.             }   
    76.         }   
    77.     },
    78. update:function(time){
    79. if(this.behaviors){
    80. for(var i=0;i<this.behaviors.length;i ){
    81. this.behaviors[i].execute(this,time);
    82.                                                               
                                                                 
    83. }
    84. }

    Nachdem Sie die Elf-Klasse geschrieben haben, können Sie verschiedene Objekte generieren, indem Sie jeden Maler und jedes Verhalten schreiben. Der nächste Schritt besteht darin, Maler zu schreiben. Der eine ist der normale Maler und der andere der Sprite-Sheet-Maler. Da Explosionsanimationen und Flugzeugschießanimationen nicht mit nur einem Bild erstellt werden können, müssen Sie es verwenden zum Spritesheet:

    
    
    

    Um diese zu zeichnen, müssen Sie einen Sprite-Sheet-Maler anpassen. Je nach Komplexität des Spiels kann die Sprite-Sheet-Schreibmethode jedoch entsprechend geändert werden , die Prinzipien sind ähnlich, das heißt nur geringfügige Änderungen:

    

    XML/HTML-Code

    Inhalt in die Zwischenablage kopieren

    1. var SpriteSheetPainter = Funktion(Zellen){   
    2.             this.cells = Zellen || [];   
    3.             this.cellIndex = 0;   
    4.         }   
    5.         SpriteSheetPainter.prototype = {   
    6.             advance:function(){   
    7.                 if(this.cellIndex === this.cells.length-1){   
    8.                                         }                    else this.cellIndex ;   
    9.             },   
    10.             paint:function(sprite){   
    11.                 var 
    cell
    12.  = 
    this
    13. .cells[this.cellIndex];                    context.drawImage(spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left , sprite.top , cell.w , cell.h);                }   
    14.         }   
      
    16. 而普通的绘制器就更简单了,直接写一个painter,把要画的什么东西都写进去就行了. 有了精灵类和精灵表绘制器后, 我们就可以把星星, 飞机, 子弹, 爆炸对象都写出来了:下面是整个allSprite.js的代码:

    JavaScript-Code

    复制内容到剪贴板

    
    

    1. (Funktion(W){   
    2.     "strikt verwenden"  
    3.     var planWidth = 24,   
    4.         planHeight = 24,   
    5.         missleWidth = 70,   
    6.         missleHeight = 70,   
    7.         boomWidth = 60;   
    8.     //精灵类   
    9.     W.Sprite = Funktion(Name , Maler , Verhalten , Argumente){   
    10.         if(name !== undefiniert) this.name = name;   
    11.         if(painter !== undefiniert) this.painter = painter;   
    12.         dieses.top = 0;   
    13.         dieses.left = 0;   
    14.         dieses.width = 0;   
    15.         this.height = 0;   
    16.         dieses.velocityX = 3;   
    17.         this.velocityY = 2;   
    18.         this.visible = true;   
    19.         this.animating = false;   
    20.         dies.behaviors = behaviors;   
    21.         this.rotateAngle = 0;   
    22.         dieses.blood = 50;   
    23.         dieses.fullBlood = 50;   
    24.         if(name==="plan"){   
    25.             dies.rotateSpeed = 0.05;   
    26.             this.rotateLeft = false;   
    27.             this.rotateRight = false;   
    28.             this.fire = false;   
    29.             dieses.firePerFrame = 10;   
    30.             dieses.fireLevel = 1;   
    31.         }else if(name==="star" ){   
    32.             dieses.width = Math.random()*2;   
    33.             this.speed = 1*this.width/2;   
    34.             dieses.lightLength = 5;   
    35.             this.cacheCanvas = document.createElement("canvas");   
    36.             this.cacheCtx = this.cacheCanvas.getContext('2d');   
    37.             this.cacheCanvas.width = this.width this.lightLength*2;   
    38.             this.cacheCanvas.height = this.width this.lightLength*2;   
    39.             this.painter.cache(this);   
    40.         }else if(name==="badPlan" ){   
    41.             dieses.badKind = 1;   
    42.             dieses.speed = 2;   
    43.             this.rotateAngle = Math.PI;   
    44.         }else if(name==="missle" ){   
    45.             dieses.width = missleWidth;   
    46.         }else if(name==="boom" ){   
    47.             dieses.width = boomWidth;   
    48.         }else if(name==="food"){   
    49.             dieses.width = 40;   
    50.             dieses.speed = 3;   
    51.             dies.kind = "LevelUP"  
    52.         }   
    53.         this.toLeft = false;   
    54.         this.toTop = false;   
    55.         this.toRight = false;   
    56.         this.toBottom = false;   
    57.   
    58.         this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);   
    59.   
    60.         if(args){   
    61.             for(var arg in args){
    62.                 dies[arg] = args[arg];   
    63.             }   
    64.         }   
    65.     }   
    66.     Sprite.prototype = {   
    67.         constructor:Sprite,   
    68.         paint:function(){   
    69.             if(this.name==="badPlan" ){this.update();}   
    70.   
    71.             if(this.painter !== undefined && this .sichtbar){   
    72.                 ) {                         this.update();                    }  
    73.                 ||dieses.name==="missle"||dieses .name==="badPlan"){                        ctx.save();                        ctx.translate(this.left , 
    74. this.top);   
    75.                     ctx.rotate(this.rotateAngle);                           
    76.                     ctx.restore();                    }
    77. else {                                            }   
    78.             }   
    79.         },            Update:
    80. Funktion(Zeit){                if(
    81. this.behaviors){   
    82.                 🎜>.behaviors.length;i ){   
    83.                        
    84.                 }                }   
    85.         }        }  
    86.   
    87.     // 精灵表绘制器   
    88.     W.SpriteSheetPainter = fonction(cellules , isloop , endCallback , spritesheet){   
    89.         ce.cells = cells || [] ;   
    90.         ce.cellIndex = 0 ;   
    91.         this.dateCount = null;   
    92.         ce.isloop = isloop;   
    93.         ce.endCallback = endCallback ;   
    94.         this.spritesheet = spritesheet ;   
    95.     }   
    96.     SpriteSheetPainter.prototype = {   
    97.         avance :fonction(){   
    98.             ce.cellIndex = ce.isloop?(ce.cellIndex===ce.cells.length-1?0:ce.cellIndex 1):(ce.cellIndex 1);   
    99.         },   
    100.         peinture :fonction(sprite){   
    101.             if(this.dateCount===null){   
    102.                 this.dateCount = new Date();   
    103.             }autre {   
    104.                 var newd = nouveau Date();   
    105.                 var tc = newd-this.dateCount;   
    106.                 si(tc>40){   
    107.                     ceci.advance();   
    108.                     ce.dateCount = newd;   
    109.                 }   
    110.              }  
    111.             if(this.cellIndex<this. cellules.longueur ||  ce.isloop){   
    112.                 var cell = ceci.cells[ceci .cellIndex];   
    113.                 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);   
    114.             } else si(this.endCallback) {   
    115.                 ceci.endCallback.call(sprite);   
    116.                 ceci.cellIndex = 0 ;   
    117.              }   
    118.         }   
    119.     }   
    120.   
    121.     //特制飞机精灵表绘制器   
    122.     W.controllSpriteSheetPainter = fonction(cellules , spritesheet){   
    123.         ce.cells = cells || [] ;   
    124.         ce.cellIndex = 0 ;   
    125.         this.dateCount = null;   
    126.         this.isActive = false;   
    127.         ce.derection = vrai;   
    128.         this.spritesheet = spritesheet ;   
    129.     }  
    130.     controllSpriteSheetPainter.prototype = {   
    131.         avance :fonction(){   
    132.             si(this.isActive){   
    133.                 ceci.cellIndex ;   
    134.                 si(ce.cellIndex === ce.cells.length){   
    135.                     ce.cellIndex = 0 ;   
    136.                     this.isActive = false;   
    137.                 }   
    138.              }   
    139.         },   
    140.         peinture :fonction(sprite){   
    141.             if(this.dateCount===null){   
    142.                 this.dateCount = new Date();   
    143.             }autre {   
    144.                 var newd = nouveau Date();   
    145.                 var tc = newd-this.dateCount;   
    146.                 if(tc>sprite.firePerFrame){   
    147.                     ceci.advance();   
    148.                     ce.dateCount = newd;   
    149.                 }   
    150.              }   
    151.             var cell = ceci.cells[ceci .cellIndex];   
    152.             ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , -planWidth/2 , -planHeight/ 2 , cellule.w , cellule.h);   
    153.         }  
    154.     }   
    155.   
    156.     W.planBehavior = [   
    157.         {exécuter :fonction(sprite,heure){   
    158.             if(sprite.toTop){   
    159.                 sprite.top = sprite.top
    160.              }   
    161.             if(sprite.toLeft){   
    162.                 sprite.left = sprite.left
    163.              }   
    164.             si(sprite.toRight){   
    165.                 sprite.left = sprite.left>canvas.width-planWidth/2? sprite.left  : sprite.left sprite.velocityX ;   
    166.              }   
    167.             si(sprite.toBottom){   
    168.                 sprite.top = sprite.top>canvas.height-planHeight/2? sprite.top  : sprite.top sprite.velocityY ;   
    169.              }   
    170.             if(sprite.rotateLeft){   
    171.                 sprite.rotateAngle -= sprite.rotateSpeed;   
    172.              }   
    173.             if(sprite.rotateRight){   
    174.                 sprite.rotateAngle  = sprite.rotateSpeed;