Utilisez HTML5 Canvas pour créer un tutoriel de masturbation simple game_html5

J'ai déjà vu un jeu de masturbation dans la DEMO de Donnet, puis j'ai retiré ses photos et son audio. . . . Je l'ai réécrit juste pour m'amuser. Juste pour le divertissement. . . . . . Je n'utilise pas de framework, j'écris moi-même tous les js. . . . . . Il s'agit donc d'un didacticiel simple. Il peut être utile à ceux qui débutent sur Canvas. L'auteur ne joue pas à Canvas depuis longtemps et ses compétences ne sont pas très bonnes.

Sans plus tarder, commençons par la DEMO : Airplane Game. L'affiche originale a écrit ceci juste pour le plaisir, et n'avait pas l'intention de l'écrire dans un jeu sérieux.

Entrons dans le vif du sujet : Le fichier du jeu de masturbation comprend le fichier d'entrée index.html, le fichier de traitement logique du sprite allSprite.js, le fichier de traitement de chargement chargement.js et data.js (quelques données initialisées).

Tout d'abord, les jeux normaux nécessitent essentiellement un chargement. La page de chargement est utilisée pour précharger les données, y compris les images des feuilles de sprite, l'audio, etc. Comme il s'agit d'un petit jeu, seuls certains fichiers audio et images doivent être chargés. Le code de chargement à l'intérieur est principalement le suivant. Les autres servent à créer des animations de chargement. Celui-ci est relativement simple, donc je ne le publierai pas. Si vous êtes intéressé, regardez simplement la console dans la DÉMO :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. loadImg:function(datas){   
2.             var _this = this;   
3.             var dataIndex = 0;   
4.             li();   
5.             fonction 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 = fonction(){   
12.                         this.oncanplaythrough = null;   
13.                         dataIndex ;   
14.                         if(dataIndex===datas.length){   
15.                             _this.percent = 100;   
16.                         }autre {   
17.                             _this.percent = parseInt(dataIndex/datas.length*100);   
18.                             li.call(_this);   
19.                         }   
20.                     }   
21.                 }autre {   
22.                     preLoadImg(datas[dataIndex] , function(){   
23.                         dataIndex ;   
24.                         if(dataIndex===datas.length){   
25.                             _this.percent = 100;   
26.                         } else {   
27.                             _this.percent = parseInt(dataIndex/datas.length*100);   
28.                             li.call(_this);   
29.                         }   
30.                     })   
31.                 }   
32.              }   
33.         },   
34.   
35. //再贴出preLoadImg的方法   
36. fonction preLoadImg(src , callback){   
37.     var img = nouveau Image();   
38.     img.src = src;   
39.     if(img.complete){   
40.         callback.call(img);   
41.     }autre {   
42.         img.onload = fonction(){   
43.             callback.call(img);   
44.         }   
45.     }   
46. }     

J'utilise d'abord un tableau pour enregistrer les liens vers les fichiers dans data.js, puis je détermine si ces liens sont des images ou des audios. S'il s'agit d'images, utilisez preLoadImg pour les charger. est très simple, créez simplement une nouvelle image, puis attribuez-lui le lien et rappelez-vous après le chargement. L'audio est chargé en générant un objet dom audio HTML5 et en lui attribuant le lien. L'audio a un événement "canplaythrough". Lorsque le navigateur s'attend à pouvoir continuer la lecture de l'audio/vidéo spécifié sans s'arrêter pour la mise en mémoire tampon, l'événement canplaythrough se produit. , ce qui signifie que lorsque canplaythrough est appelé, l'audio est presque chargé et l'audio suivant peut être chargé. Juste comme ça, une fois que tout est chargé, le rappel est effectué et le jeu démarre.

Le jeu a commencé. Un jeu nécessitera de nombreux objets, je les ai donc unifiés en un seul objet sprite. Le mouvement de chaque image entre différents objets peut être écrit séparément en utilisant le comportement.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. W.Sprite = fonction(nom , peintre , comportements , arguments){   
2.     if(nom !== non défini) this.name = nom ;   
3.     if(painter !== undefined) this.painter = peintre;   
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 = vrai;   
11.     this.animating = false;   
12.     this.behaviors = comportements ;   
13.     this.rotateAngle = 0;   
14.     ce.sang = 50;   
15.     this.fullBlood = 50;   
16.     if(nom==="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(nom==="étoile"){   
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(nom==="badPlan"){   
33.         this.badKind = 1;   
34.         this.speed = 2;   
35.         this.rotateAngle = Mathématiques.PI;   
36.     }else if(nom==="missle"){   
37.         this.width = missleWidth;   
38.     }else if(nom==="boom"){   
39.         this.width = boomWidth;   
40.     }else if(nom==="nourriture"){   
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.         pour(var arg in args){   
54.             this[arg] = args[arg];   
55.         }   
56.     }   
57. }   
58. Sprite.prototype = {   
59.     constructeur : Sprite,   
60.     paint:function(){   
61.         if(this.name==="badPlan"){this.update();}   
62.   
63.         if(this.painter !== undefined && 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.              }autre {   
74.                 this.painter.paint(this);   
75.              }   
76.         }   
77.     },
78. mise à jour :fonction (heure){
79. if(this.behaviors){
80. pour(var i=0;i<this.behaviors.length;i ){
81. this.behaviors[i].execute(this,time);
82.                                                                 
                                                             
83. }
84. }

Après avoir écrit la classe elfe, vous pouvez générer différents objets en écrivant chaque peintre et chaque comportement. L'étape suivante consiste à écrire des peintres. Les peintres sont divisés en deux types, l'un est un peintre ordinaire et l'autre est un peintre de feuilles de sprites, car les animations d'explosion et les animations de prise de vue d'avion ne peuvent pas être réalisées avec une seule image, vous devez donc utiliser It's time. à la feuille de sprite :

Pour les dessiner, vous devez personnaliser un peintre de feuille de sprite. Ce qui suit est le peintre de feuille de sprite le plus simple. Selon la complexité du jeu, la méthode d'écriture de la feuille de sprite peut être modifiée en conséquence jusqu'à ce qu'elle soit adaptée. , les principes sont similaires, c'est-à-dire juste des modifications mineures :

Code XML/HTML

Copier le contenu dans le presse-papiers

1. var SpriteSheetPainter = fonction(cellules){   
2.             this.cells = cells || [] ;   
3.             this.cellIndex = 0;   
4.         }   
5.         SpriteSheetPainter.prototype = {   
6.             advance:function(){   
7.                 if(this.cellIndex === this.cells.length-1){   
8.                     this.cellIndex = 0;   
9.                 }   
10.                 else this.cellIndex ;   
11.              },   
12.             paint:function(sprite){   
13.                 var cell = this.cells[this.cellIndex];   
14.                 context.drawImage(spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left , sprite.top , cell.w , cell.h);   
15.              }   
16.         }     

而普通的绘制器就更简单了，直接写一个peintre，把要画的什么东西都写进去就行了。

有了精灵类和精灵表绘制器后，我们就可以把星星，飞机，子弹，爆炸对象都写出来了：下面是整个allSprite.js的代码：

Code JavaScript复制内容到剪贴板

1. (fonction(W){   
2.     "utiliser strict"  
3.     var planWidth = 24,   
4.         planHeight = 24,   
5.         missleWidth = 70,   
6.         missleHeight = 70,   
7.         boomWidth = 60 ;   
8.     //精灵类   
9.     W.Sprite = fonction(nom , peintre , comportements , arguments){   
10.         if(nom !== non défini) this.name = nom;   
11.         if(peintre !== non défini) this.painter = peintre;   
12.         ce.top = 0 ;   
13.         ce.left = 0 ;   
14.         ce.width = 0;   
15.         ce.hauteur = 0 ;   
16.         ce.velocityX = 3 ;   
17.         ce.velocityY = 2 ;   
18.         ce.visible = vrai;   
19.         this.animating = false;   
20.         ce.behaviors = comportements ;   
21.         ce.rotateAngle = 0 ;   
22.         ce.sang = 50 ;   
23.         ce.fullBlood = 50 ;   
24.         si(name==="plan"){   
25.             ce.rotateSpeed = 0,05 ;   
26.             this.rotateLeft = false;   
27.             this.rotateRight = false;   
28.             this.fire = false;   
29.             ceci.firePerFrame = 10 ;   
30.             ce.fireLevel = 1 ;   
31.         }else si(name==="étoile" ){   
32.             this.width = Math.random()*2;   
33.             ce.speed = 1*ce.width/2;   
34.             ceci.lightLength = 5 ;   
35.             this.cacheCanvas = document.createElement("canvas");   
36.             ceci.cacheCtx = ceci.cacheCanvas.getContext('2d');   
37.             ce.cacheCanvas.width = ce.width ce.lightLength*2;   
38.             ce.cacheCanvas.height = ce.width ce.lightLength*2;   
39.             ceci.painter.cache(ceci);   
40.         }else si(name==="badPlan" ){   
41.             ceci.badKind = 1 ;   
42.             ce.speed = 2 ;   
43.             ceci.rotateAngle = Math.PI;   
44.         }else si(name==="missle" ){   
45.             this.width = missleWidth;   
46.         }else si(name==="boom" ){   
47.             ce.width = boomWidth ;   
48.         }else si(name==="nourriture"){   
49.             ce.width = 40 ;   
50.             ce.speed = 3 ;   
51.             this.kind = "LevelUP"  
52.         }   
53.         this.toLeft = false;   
54.         this.toTop = false;   
55.         this.toRight = false;   
56.         this.toBottom = false;   
57.   
58.         ce.outArcRadius = Math.sqrt((ce.width/2*ce.width/2)*2);   
59.   
60.         if(args){   
61.             pour(var arg in args){
62.                 ceci[arg] = args[arg];   
63.              }   
64.         }   
65.     }   
66.     Sprite.prototype = {   
67.         constructeur : Sprite,   
68.         peinture :fonction(){   
69.             si(ce.name==="badPlan" ){ce.update();}   
70.   
71.             si(ce.painter !== undefined && ce .visible){   
72.                 si(ce.name!=="badPlan" ) {   
73.                     ce.update();   
74.                 }  
75.                 si(ce.name==="plan" ||ce.name==="missle"||ce .name==="badPlan"){   
76.                     ctx.save();   
77.                     ctx.translate(ce.left , ce.top);   
78.                     ctx.rotate(this.rotateAngle);   
79.                     ce.painter.paint(ce);   
80.                     ctx.restore();   
81.                 }autre {   
82.                     ce.painter.paint(ce);   
83.                 }   
84.              }   
85.         },   
86.         mise à jour :fonction(heure){   
87.             si(ce.comportements){   
88.                 pour(var i=0;i<ce.behaviors.length;i ){   
89.                     ce.behaviors[i].execute(ce,heure);   
90.                 }   
91.              }   
92.         }   
93.     }  
94.   
95.     // 精靈表關聯器  
96.     W.SpriteSheetPainter = 函數(cells , isloop , endCallback , sprite
        
97. 這個.cells = cells || []；   
        
98. 這個.cellIndex = 0;   
        
99. 這個.dateCount = null        這
100. .isloop = isloop;            這
101. .endCallback = endCallback;            
這
102. .spritesheet = spritesheet;        }   
103.     SpriteSheetPainter.prototype = {   
104.         前進：
函數
105. (){                
這
106. .cellIndex = 這個.cellIndex = 這這個.cellIndex===這個.cells.length-1?0:這個.cellIndex 1):(這個.cellIndex 1);            },   
107.         繪製：函數
108. （精靈）{                if
109. (這(這(){                    
這
110. .dateCount = 這.dateCount = 這 🎜>             }
其他
111.  {    {   
112.                 var 🎜>                 var tc 🎜>
113.                 若(tc>40){                     這 advance(>
這個
114. .advance();                     這
dateCount 
115.                 }                }  
116.             if(這(這(這這樣cells.length || 
這
117. .isloop){                    var cell  🎜> .cellIndex];                    ctx.drawImage(
118. 這             } 
else
119.  if(這個.endCallback) {                    
這
120. .endCallback.call(sprite);對此.endCallback.call(sprite);                 
這
121. .Index              }   
        }   
    }   
  
    
125. //特製飛機資源表關聯器
  
126.     W.controllSpriteSheetPainter = 函數
（單元格， spritesheet）{   
127.         這個
128. .cells = cells || []；            這個
129. .cellIndex = 0;            這個
130. .dateCount = null        這個.isActive = 
false
131. false         這個
132. .derection = true        這.spritesheet = spritesheet;   
133.     }  
134.     controllSpriteSheetPainter.prototype = {   
135.         前進：函數(){   
136.             if(此(
此
137. (此(
此
138. .                 這.cellIndex ;                   if
(
139. if(if
(
140. if[ 🎜>.cells.length){                        這個
.cellIndex >
141. 這個.cellIndex >
                    
142. 這個
143.                 }   
144.             }            },   
145.         繪製：函數（精靈）{                if(
這
146. (這(){                    
147. 這.dateCount = 這.dateCount = 這
148. 🎜>             }其他 {    {   
149.                 var 🎜>                 var
 tc 🎜>
150.                 if(tc>sprite.firePerFrame){   
                    
151. 這 advance(>這個.advance();
152.                     這dateCount                  }   
153.             }   
154.             
155. var cell =  .cellIndex];                ctx.drawImage(這.sprite , -planHeight/ 2、細胞.w、細胞.h)；   
156.         }  
157.     }   
158.   
159.     W.planBehavior = [   
160.         {執行：函數（精靈，時間）{   
161.             if(sprite.toTop){   
(sprite.toTop){   
163.                 sprite.top = sprite.top
164.             }                if
165. (sprite.toLeft){   (sprite.toLeft){   
                sprite.left = sprite.left             }                
167. if
(sprite.toRight){   
168. (sprite.toRight){   
169.                 sprite.left = sprite.left>canvas.width-planWidth/2？             }   
170.             if
171. (sprite.toBottom){   (sprite.toBottom){   
172.                 sprite.top = sprite.top>canvas.height-planHeight/2？             }   
173.             
if
174. (sprite.rotateLeft){   
(sprite.rotateLeft){   
175.                 sprite.rotateAngle -= sprite.rotateSpeed;   
176.             }                if(sprite.rotateRight){   (sprite.rotateRight){                    sprite.rotateAngle = sprite.rotateSpeed;   跨度