Use HTML5 canvas to make a simple airplane game

Time:2021-12-27

Before, I saw a game of playing airplanes in dannette’s demo, and then I picked up his pictures and audio…. I wrote a new one with the mood of playing. For entertainment only…… I didn’t use the framework. All JS were written by myself…… So you can be a simple tutorial. It may be helpful for those who have just played canvas. The landlord hasn’t played canvas for a long time, and the technology is not very good. Please forgive me.

Without much gossip, I went to demo first. The landlord wrote that this man was pure entertainment. He didn’t want to write a more formal game.

Step into the theme: playing the plane game file has index HTML entry file, allsprite JS wizard logic processing file, loading JS load processing file and data JS (some initialized data).

First of all, normal games basically need a loading page. The loading page is used to preload data, including wizard table, pictures, audio, etc. because this is a small game, only some audio and pictures need to be loaded. The loading code is mainly the following. Others are for making loading animation. It is relatively simple and will not be posted. If you are interested, just look at the console in Demo:

XML/HTML CodeCopy contents to clipboard
  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.                 }else {   
  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. //Then paste the method of preloadimg
  36. function preLoadImg(src , callback){   
  37.     var img = new Image();   
  38.     img.src = src;   
  39.     if(img.complete){   
  40.         callback.call(img);   
  41.     }else {   
  42.         img.onload = function(){   
  43.             callback.call(img);   
  44.         }   
  45.     }   
  46. }     

I’ll start with data JS uses an array to save file links, and then determines whether these links are pictures or audio. If they are pictures, they are loaded with preloadimg. The code for preloading pictures is very simple, that is, new a picture object, and then assign the link to it, and then call back after loading. The audio is loaded by generating an HTML5 audio DOM object and assigning the link to it. The audio has an event “canplaythrough”. The browser expects that the canplaythrough event will occur when the specified audio / video can be played continuously without stopping to buffer, that is, when canplaythrough is called, the audio will be loaded almost, You can load the next audio. In this way, when everything is loaded, it will call back and start the game.

 

The game started. A game will need many objects, so I unified it into a spirit object. The motion of each frame between different objects can be written directly with behavior.

XML/HTML CodeCopy contents to clipboard
  1. W.Sprite = function(name , painter , behaviors , args){   
  2.     if(name !== undefined) this.name = name;   
  3.     if(painter !== undefined) this.painter = painter;   
  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 !== 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.             }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.     }   
  85. }   

After writing the sprite class, you can generate different objects by writing each painter and behavior. The next step is to write painter. There are two types of painter. One is an ordinary painter and the other is an elf table painter. For example, explosion animation and aircraft shooting animation can not be done with one picture, so we need to use the elf table:
2015511181456172.png (168×24)

2015511181533636.png (896×64)

To draw these, we need to customize a sprite table plotter for them. The following is the simplest sprite table plotter. According to the complexity of the game, we can relatively modify the sprite table writing method until it is appropriate, but the principles are similar, that is, minor modifications:

XML/HTML CodeCopy contents to clipboard
  1. var SpriteSheetPainter = function(cells){   
  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.         }     

The ordinary plotter is even simpler. Just write a painter and write everything you want to draw.

With the sprite class and Sprite table plotter, we can write out the stars, planes, bullets and explosive objects: the following is the whole allsprite JS code:

JavaScript CodeCopy contents to clipboard
  1. (function(W){   
  2.     “use strict”  
  3.     var planWidth = 24,   
  4.         planHeight = 24,   
  5.         missleWidth = 70,   
  6.         missleHeight = 70,   
  7.         boomWidth = 60;   
  8.     //Elf class  
  9.     W.Sprite = function(name , painter , behaviors , args){   
  10.         if(name !== undefined) this.name = name;   
  11.         if(painter !== undefined) this.painter = painter;   
  12.         this.top = 0;   
  13.         this.left = 0;   
  14.         this.width = 0;   
  15.         this.height = 0;   
  16.         this.velocityX = 3;   
  17.         this.velocityY = 2;   
  18.         this.visible = true;   
  19.         this.animating = false;   
  20.         this.behaviors = behaviors;   
  21.         this.rotateAngle = 0;   
  22.         this.blood = 50;   
  23.         this.fullBlood = 50;   
  24.         if(name===“plan”){   
  25.             this.rotateSpeed = 0.05;   
  26.             this.rotateLeft = false;   
  27.             this.rotateRight = false;   
  28.             this.fire = false;   
  29.             this.firePerFrame = 10;   
  30.             this.fireLevel = 1;   
  31.         }else if(name===“star”){   
  32.             this.width = Math.random()*2;   
  33.             this.speed = 1*this.width/2;   
  34.             this.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.             this.badKind = 1;   
  42.             this.speed = 2;   
  43.             this.rotateAngle = Math.PI;   
  44.         }else if(name===“missle”){   
  45.             this.width = missleWidth;   
  46.         }else if(name===“boom”){   
  47.             this.width = boomWidth;   
  48.         }else if(name===“food”){   
  49.             this.width = 40;   
  50.             this.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.         this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);   
  59.   
  60.         if(args){   
  61.             for(var arg in args){   
  62.                 this[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.visible){   
  72.                 if(this.name!==“badPlan”) {   
  73.                     this.update();   
  74.                 }   
  75.                 if(this.name===“plan”||this.name===“missle”||this.name===“badPlan”){   
  76.                     ctx.save();   
  77.                     ctx.translate(this.left , this.top);   
  78.                     ctx.rotate(this.rotateAngle);   
  79.                     this.painter.paint(this);   
  80.                     ctx.restore();   
  81.                 }else {   
  82.                     this.painter.paint(this);   
  83.                 }   
  84.             }   
  85.         },   
  86.         update:function(time){   
  87.             if(this.behaviors){   
  88.                 for(var i=0;i<this.behaviors.length;i++){   
  89.                     this.behaviors[i].execute(this,time);   
  90.                 }   
  91.             }   
  92.         }   
  93.     }   
  94.   
  95.     //Sprite table plotter  
  96.     W.SpriteSheetPainter = function(cells , isloop , endCallback , spritesheet){   
  97.         this.cells = cells || [];   
  98.         this.cellIndex = 0;   
  99.         this.dateCount = null;   
  100.         this.isloop = isloop;   
  101.         this.endCallback = endCallback;   
  102.         this.spritesheet = spritesheet;   
  103.     }   
  104.     SpriteSheetPainter.prototype = {   
  105.         advance:function(){   
  106.             this.cellIndex = this.isloop?(this.cellIndex===this.cells.length-1?0:this.cellIndex+1):(this.cellIndex+1);   
  107.         },   
  108.         paint:function(sprite){   
  109.             if(this.dateCount===null){   
  110.                 this.dateCount = new Date();   
  111.             }else {   
  112.                 var newd = new Date();   
  113.                 var tc = newd-this.dateCount;   
  114.                 if(tc>40){   
  115.                     this.advance();   
  116.                     this.dateCount = newd;   
  117.                 }   
  118.             }   
  119.             if(this.cellIndex<this.cells.length || this.isloop){   
  120.                 var cell = this.cells[this.cellIndex];   
  121.                 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);   
  122.             } else if(this.endCallback){   
  123.                 this.endCallback.call(sprite);   
  124.                 this.cellIndex = 0;   
  125.             }   
  126.         }   
  127.     }   
  128.   
  129.     //Special aircraft wizard table plotter  
  130.     W.controllSpriteSheetPainter = function(cells , spritesheet){   
  131.         this.cells = cells || [];   
  132.         this.cellIndex = 0;   
  133.         this.dateCount = null;   
  134.         this.isActive = false;   
  135.         this.derection = true;   
  136.         this.spritesheet = spritesheet;   
  137.     }   
  138.     controllSpriteSheetPainter.prototype = {   
  139.         advance:function(){   
  140.             if(this.isActive){   
  141.                 this.cellIndex++;   
  142.                 if(this.cellIndex === this.cells.length){   
  143.                     this.cellIndex = 0;   
  144.                     this.isActive = false;   
  145.                 }   
  146.             }   
  147.         },   
  148.         paint:function(sprite){   
  149.             if(this.dateCount===null){   
  150.                 this.dateCount = new Date();   
  151.             }else {   
  152.                 var newd = new Date();   
  153.                 var tc = newd-this.dateCount;   
  154.                 if(tc>sprite.firePerFrame){   
  155.                     this.advance();   
  156.                     this.dateCount = newd;   
  157.                 }   
  158.             }   
  159.             var cell = this.cells[this.cellIndex];   
  160.             ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , -planWidth/2 , -planHeight/2 , cell.w , cell.h);   
  161.         }   
  162.     }   
  163.   
  164.     W.planBehavior = [   
  165.         {execute:function(sprite,time){   
  166.             if(sprite.toTop){   
  167.                 sprite.top = sprite.top<planHeight/2? sprite.top : sprite.top-sprite.velocityY;   
  168.             }   
  169.             if(sprite.toLeft){   
  170.                 sprite.left = sprite.left<planWidth/2? sprite.left : sprite.left-sprite.velocityX;   
  171.             }   
  172.             if(sprite.toRight){   
  173.                 sprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;   
  174.             }   
  175.             if(sprite.toBottom){   
  176.                 sprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;   
  177.             }   
  178.             if(sprite.rotateLeft){   
  179.                 sprite.rotateAngle -= sprite.rotateSpeed;   
  180.             }   
  181.             if(sprite.rotateRight){   
  182.                 sprite.rotateAngle += sprite.rotateSpeed;   
  183.             }   
  184.             if(sprite.fire&&!sprite.painter.isActive){   
  185.                 sprite.painter.isActive = true;   
  186.                 this.shot(sprite);   
  187.   
  188.             }   
  189.         },   
  190.         shot:function(sprite){   
  191.             this.addMissle(sprite , sprite.rotateAngle);   
  192.             var missleAngle = 0.1   
  193.             for(var i=1;i<sprite.fireLevel;i++){   
  194.                 this.addMissle(sprite , sprite.rotateAngle-i*missleAngle);   
  195.                 this.addMissle(sprite , sprite.rotateAngle+i*missleAngle);   
  196.             }   
  197.   
  198.             var audio = document.getElementsByTagName(“audio”);   
  199.             for(var i=0;i<audio.length;i++){   
  200.                 console.log(audio[i].paused)   
  201.                 if(audio[i].src.indexOf(“shot”)>=0&&audio[i].paused){   
  202.                     audio[i].play();   
  203.                     break;   
  204.                 }   
  205.             }   
  206.         },   
  207.         addMissle:function(sprite , angle){   
  208.                 for(var j=0;j<missles.length;j++){   
  209.                     if(!missles[j].visible){   
  210.                         missles[j].left = sprite.left;   
  211.                         missles[j].top = sprite.top;   
  212.                         missles[j].rotateAngle = angle;   
  213.                         var missleSpeed = 20;   
  214.                         missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle);   
  215.                         missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle);   
  216.                         missles[j].visible = true;   
  217.                         break;   
  218.                     }   
  219.                 }   
  220.             }   
  221.         }   
  222.     ]   
  223.   
  224.     W.starBehavior = [   
  225.         {execute:function(sprite,time){   
  226.             if(sprite.top > canvas.height){   
  227.                 sprite.left = Math.random()*canvas.width;   
  228.                 sprite.top = Math.random()*canvas.height – canvas.height;   
  229.             }   
  230.             sprite.top += sprite.speed;   
  231.         }}   
  232.     ]   
  233.   
  234.     W.starPainter = {   
  235.         paint:function(sprite){   
  236.             ctx.drawImage(sprite.cacheCanvas , sprite.left-sprite.width/2-sprite.lightLength , sprite.top-sprite.width/2-sprite.lightLength)   
  237.         },   
  238.   
  239.         cache:function(sprite){   
  240.             sprite.cacheCtx.save();   
  241.             var opacity = 0.5,addopa = 1/sprite.lightLength;   
  242.             sprite.cacheCtx.fillStyle = “rgba(255,255,255,0.8)”;   
  243.             sprite.cacheCtx.beginPath();   
  244.             sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2 , 0 , 2*Math.PI);   
  245.             sprite.cacheCtx.fill();   
  246.             for(var i=1;i<=sprite.lightLength;i+=2){   
  247.                 opacity-=addopa;   
  248.                 sprite.cacheCtx.fillStyle = “rgba(255,255,255,”+opacity+“)”;   
  249.                 sprite.cacheCtx.beginPath();   
  250.                 sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2+i , 0 , 2*Math.PI);   
  251.                 sprite.cacheCtx.fill();   
  252.             }   
  253.         }   
  254.     }   
  255.   
  256.     W.foodBehavior = [   
  257.         {execute:function(sprite,time){   
  258.             sprite.top += sprite.speed;   
  259.             if(sprite.top > canvas.height+sprite.width){   
  260.                 sprite.visible = false;   
  261.             }   
  262.         }}   
  263.     ]   
  264.   
  265.     W.foodPainter = {   
  266.         paint:function(sprite){   
  267.             ctx.fillStyle = “rgba(“+parseInt(Math.random()*255)+“,”+parseInt(Math.random()*255)+“,”+parseInt(Math.random()*255)+“,1)”  
  268.             ctx.font=“15px# Microsoft YaHei”  
  269.             ctx.textAlign = “center”;   
  270.             ctx.textBaseline = “middle”;   
  271.             ctx.fillText(sprite.kind , sprite.left , sprite.top);   
  272.         }   
  273.     }   
  274.   
  275.   
  276.   
  277.     W.missleBehavior = [{   
  278.         execute:function(sprite,time){   
  279.             sprite.left -= sprite.velocityX;   
  280.             sprite.top -= sprite.velocityY;   
  281.             if(sprite.left<-missleWidth/2||sprite.top<-missleHeight/2||sprite.left>canvas.width+missleWidth/2||sprite.top<-missleHeight/2){   
  282.                 sprite.visible = false;   
  283.             }   
  284.         }   
  285.     }];   
  286.   
  287.     W.misslePainter = {   
  288.         paint:function(sprite){   
  289.             var img = new Image();   
  290.             img.src=“../planGame/image/plasma.png”  
  291.             ctx.drawImage(img , -missleWidth/2+1 , -missleHeight/2+1 , missleWidth , missleHeight);   
  292.         }   
  293.     }   
  294.   
  295.     W.badPlanBehavior = [{   
  296.         execute:function(sprite,time){   
  297.             if(sprite.top > canvas.height || !sprite.visible){   
  298.                 var random = Math.random();   
  299.   
  300.                 if(point>=200&&point<400){   
  301.                     sprite.fullBlood = 150;   
  302.                     if(random<0.1){   
  303.                         sprite.badKind = 2;   
  304.                         sprite.fullBlood = 250;   
  305.                     }   
  306.                 }else if(point>=400&&point<600){   
  307.                     sprite.fullBlood = 250;   
  308.                     if(random<0.2){   
  309.                         sprite.badKind = 2;   
  310.                         sprite.fullBlood = 400;   
  311.                     }   
  312.                     if(random<0.1){   
  313.                         sprite.badKind = 3;   
  314.                         sprite.fullBlood = 600;   
  315.                     }   
  316.                 }else if(point>=600){   
  317.                     sprite.fullBlood = 500;   
  318.                     if(random<0.4){   
  319.                         sprite.badKind = 2;   
  320.                         sprite.fullBlood = 700;   
  321.                     }   
  322.                     if(random<0.2){   
  323.                         sprite.badKind = 3;   
  324.                         sprite.fullBlood = 1000;   
  325.                     }   
  326.                 }   
  327.   
  328.                 sprite.visible = true;   
  329.                 sprite.blood = sprite.fullBlood;   
  330.                 sprite.left = Math.random()*(canvas.width-2*planWidth)+planWidth;   
  331.                 sprite.top = Math.random()*canvas.height – canvas.height;   
  332.             }   
  333.             sprite.top += sprite.speed;   
  334.         },   
  335.         shot:function(sprite){   
  336.             this.addMissle(sprite , sprite.rotateAngle);   
  337.             var missleAngle = 0.1   
  338.             for(var i=1;i<sprite.fireLevel;i++){   
  339.                 this.addMissle(sprite , sprite.rotateAngle-i*missleAngle);   
  340.                 this.addMissle(sprite , sprite.rotateAngle+i*missleAngle);   
  341.             }   
  342.         },   
  343.         addMissle:function(sprite , angle){   
  344.             for(var j=0;j<missles.length;j++){   
  345.                 if(!missles[j].visible){   
  346.                     missles[j].left = sprite.left;   
  347.                     missles[j].top = sprite.top;   
  348.                     missles[j].rotateAngle = angle;   
  349.                     var missleSpeed = 20;   
  350.                     missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle);   
  351.                     missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle);   
  352.                     missles[j].visible = true;   
  353.                     break;   
  354.                 }   
  355.             }   
  356.         }   
  357.     }];   
  358.   
  359.     W.badPlanPainter = {   
  360.         paint:function(sprite){   
  361.             var img = new Image();   
  362.             img.src=“../planGame/image/ship.png”  
  363.             switch(sprite.badKind){   
  364.                 case 1:ctx.drawImage(img , 96 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);   
  365.                 break;   
  366.   
  367.                 case 2:ctx.drawImage(img , 120 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);   
  368.                 break;   
  369.   
  370.                 case 3:ctx.drawImage(img , 144 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);   
  371.                 break;   
  372.             }   
  373.   
  374.             ctx.strokeStyle = “#FFF”;   
  375.             ctx.fillStyle = “#F00”;   
  376.             var bloodHeight = 1;   
  377.             ctx.strokeRect(-planWidth/2-1 , planHeight+bloodHeight+3 , planWidth+2 , bloodHeight+2);   
  378.             ctx.fillRect(planWidth/2-planWidth*sprite.blood/sprite.fullBlood , planHeight+bloodHeight+3 , planWidth*sprite.blood/sprite.fullBlood , bloodHeight);   
  379.         }   
  380.     }   
  381.   
  382.     W.planSize = function(){   
  383.         return {   
  384.             w:planWidth,   
  385.             h:planHeight   
  386.         }       
  387.     }   
  388. })(window);   

These drawing methods are relatively simple.

Mainly about the movement of the aircraft and the control of the number of objects. How does the aircraft move? There is no doubt that by controlling its movement through the keyboard, many people may think of using the Keydown method to judge the keycode to keep the aircraft moving. However, there is a problem. The Keydown event does not support multi key pressing, that is, when you press the X key, the keycode is 88. At the same time, when you press the direction key, the keycode will instantly become 37. That is, if you simply want to control the movement of the aircraft by Keydown, the aircraft can only do one thing, either move in a certain direction or shoot.

Therefore, we want to realize the movement of the aircraft through Keydown and Keyup. The principle is easy to understand: when we press the left direction key, we give the aircraft a left state, that is, let the toleft attribute of the aircraft be true. In the animation cycle, judge the state of the aircraft. If toleft is true, the x value of the aircraft will keep decreasing and the aircraft will keep moving to the left, Then, when we raise our finger and trigger the Keyup event, we will release the aircraft to the left in the Keyup event. The plane stopped moving to the left. The principle of other states is the same. If it is written in this way, the aircraft can be in multiple states for a lifetime. You can shoot at the same time and run around at the same time.

The implementation code is as follows:

XML/HTML CodeCopy contents to clipboard
  1. //Binding of Keydown / Keyup events
  2.   window.onkeydown = function(event){   
  3.             switch(event.keyCode){   
  4.                 case 88:myplan.fire = true;   
  5.                 break;   
  6.                 case 90:myplan.rotateLeft=true;   
  7.                 break;   
  8.                 case 67:myplan.rotateRight=true;   
  9.                 break;   
  10.                 case 37:myplan.toLeft = true;   
  11.                 break;   
  12.                 case 38:myplan.toTop = true;   
  13.                 break;   
  14.                 case 39:myplan.toRight = true;   
  15.                 break;   
  16.                 case 40:myplan.toBottom = true;   
  17.                 break;   
  18.             }   
  19.         }   
  20.   
  21.         window.onkeyup = function(event){   
  22.             switch(event.keyCode){   
  23.                 case 88:myplan.fire = false;   
  24.                 break;   
  25.                 case 90:myplan.rotateLeft=false;   
  26.                 break;   
  27.                 case 67:myplan.rotateRight=false;   
  28.                 break;   
  29.                 case 37:myplan.toLeft = false;   
  30.                 break;   
  31.                 case 38:myplan.toTop = false;   
  32.                 break;   
  33.                 case 39:myplan.toRight = false;   
  34.                 break;   
  35.                 case 40:myplan.toBottom = false;   
  36.                 break;   
  37.             }   
  38.         }       
  39.   
  40.   
  41. //Status update processing code of each frame of the aircraft
  42. execute:function(sprite,time){   
  43.             if(sprite.toTop){   
  44.                 spritesprite.top = sprite.top<planHeight/2? sprite.top : sprite.top-sprite.velocityY;   
  45.             }   
  46.             if(sprite.toLeft){   
  47.                 spritesprite.left = sprite.left<planWidth/2? sprite.left : sprite.left-sprite.velocityX;   
  48.             }   
  49.             if(sprite.toRight){   
  50.                 spritesprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;   
  51.             }   
  52.             if(sprite.toBottom){   
  53.                 spritesprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;   
  54.             }   
  55.             if(sprite.rotateLeft){   
  56.                 sprite.rotateAngle sprite.rotateSpeed;   
  57.             }   
  58.             if(sprite.rotateRight){   
  59.                 sprite.rotateAngle += sprite.rotateSpeed;   
  60.             }   
  61.             if(sprite.fire&&!sprite.painter.isActive){   
  62.                 sprite.painter.isActive = true;   
  63.                 this.shot(sprite);   
  64.   
  65.             }     

It’s that simple.

Then say object control. Playing the aircraft game will launch a large number of bullets and produce a large number of objects, including explosions, aircraft, bullets, etc. if you keep generating and destroying objects, the load of the browser will become very large, and it will get stuck after running for a period of time. Therefore, we should use objects that can be recycled to solve this problem. Instead of destroying objects, we should save and recycle all objects.

My approach is to directly generate a certain number of objects and store them in the array when the game is initialized. When we need an object, we take it from it. When we use it up, we put it back into the array. All objects in the array have a property, visible, which represents whether the object is currently available.

For example, when my plane launches a shell, I need a shell, so I traverse the shell array. If the traversed shell visible is true, it means that the object is in use and cannot be used. Therefore, continue to traverse until the shell object with visible is false, indicating that the object is temporarily unavailable. Then you can take it, reset the properties and put it into use. When the shell hits the enemy or hits outside the canvas, set the visible of the shell to false, and it becomes an unused shell, which is stored in the array for the next call.

Therefore, we should budget how many objects will be used on the page, and then prepare the objects in advance. In this way, no objects will be generated and destroyed during the game, which will improve the performance of the game.

  

Finally, let’s talk about audio. In order to ensure the uninterrupted sound effect, we need to use multiple identical audio in the game:
Copy code

XML/HTML CodeCopy contents to clipboard
  1. var audio = document.getElementsByTagName(“audio”);   
  2.                                             for(var i=0;i<audio.length;i++){   
  3.                                                 console.log(audio[i].paused)   
  4.                                                 if(audio[i].src.indexOf(“boom”)>=0&&audio[i].paused){   
  5.                                                     audio[i].play();   
  6.                                                     break;   
  7.                                                 }   
  8.                                             }  

 

Well, that’s basically it. The technology may not be good enough. Keep a record. If the code is wrong, you are welcome to point it out and learn together.

Source address:https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/planGame