JavaScript is similar to WeChat and javascript is similar to airplane.

JavaScript imitation airplane games and javascript imitation airplane games

First, we can implement a CAPTCHA human bypass game. First, we can use canvas graphics to generate ourselves and our enemies.

1. Generate yourself and move left and right by using the left and right keys.

// Generate your own function, and you can move the plane left and right // function to control the right of the plane moveRight (event) {context. clearRect (alweigh, 260, 47); // prevent the plane from removing the background if (alweigh <) {var img = new Image (); img. src = ".. /images/self.png "; img. onload = function () {context. drawImage (img, alweigh, 100);} alweigh + = 10;} // when the plane is about to be removed from the background, stop it at the rightmost side if (alweigh = 260) {var img = new Image (); img. src = ".. /images/self.png "; img. onload = function () {context. drawImage (img, 260,100) ;}}// function used to control the plane's movement to the left: moveLeft (event) {context. clearRect (aligh, 100,47, 47); // prevent the plane from moving out of the leftmost boundary if (alweigh> 0) {var img = new Image (); img. src = ".. /images/self.png "; img. onload = function () {context. drawImage (img, alweigh, 100);} alweigh-= 10;} // set it to the leftmost if (alweigh = 0) {var img = new Image (); img. src = ".. /images/self.png "; img. onload = function () {context. drawImage (img, 0,100) ;}}// determine which key is pressed, and then control the plane to move the document around. onkeydown = function (event) {if (event. keyCode = 37) {moveLeft ();} if (event. keyCode = 39) {moveRight ();}}

2. Generate enemy planes. An attacker randomly generates images on the background. Drops the image from the top every second.

Var createId = setInterval (function () {var top = 0 + 'px '; var enemy = document. createElement ("img"); enemy. src = ".. /images/enemy.png "; // generate random positions var randomleft = Math. floor (Math. random () * 300); // If the generated position appears outside the background, take 260 left = randomleft> 260? 260 + 'px ': randomleft + 'px'; leftArr. push (left); // Save the distance between each enemy and the left to facilitate the calculation of arrPic for collision detection. push (enemy); // Save the images of each enemy in the array to facilitate Collision Detection and remove main. appendChild (enemy); enemy. style. paddingLeft = left; enemy. style. paddingTop = top; var spandom = $ ("# main> img: last-child"); // use jquery to find the last img and run the last img. It is equivalent to binding an animation spandom to each img. animate ({"paddingTop": 420}, 6000, function () {// remove this element when it falls to the bottom. remove (); arrPic. splice (0, 1); // remove the leftArr from the array. splice (); // remove the distance from the array to fallCount ++; // check the number of dropped planes. If more than 10 planes are not hit, the game will end }); // if more than 10 dropped planes are not hit, the game ends if (fallCount> 10) {clearInterval (createId); clearInterval (crashId); alert ("Current score: "+ count +", unfortunately, the game is over! ")}, 1000 );

3. Now it is mainly collision detection. The detection is performed once every 2.2 seconds. If the detection platform frequently performs this operation, you can directly press the left-to-right key to eliminate it. It makes no sense.

Function checkCrash () {crashId = setInterval (function () {// Since each freely dropped airplane is removed from the above function. Therefore, the left distance array of the aircraft on the current page is saved in the leftArr array. For (var I = 0; I <leftArr. length; I ++) {// first convert both types to int type for comparison var tempL = parseInt (leftArr [I]); var tempA = parseInt (aligh ); // indicates the left-side distance from the current user. // when the left-side distance from the current user's center is within the range of the left and right sides of the enemy's plane, the user is hit if (tempL <= (tempA + 20) & (tempA + 20) <= (tempL + 40) {arrPic [I]. remove (); // collision detection, removing the arrPic of the enemy's machine. splice (I, 1); // remove the image leftArr from the Image array. splice (I, 1); // The distance from the left-side distance array of the recorded enemy's machine count ++; score. innerHTML = "Current score" + count; break; // jump out of the loop after detection, and perform collision detection for the next 2.2 seconds }}, 2200);} checkCrash ();

This game is not complete yet and no bullets are generated. Most functions have been implemented.

4. as follows:

The source code is attached:

Html & css

<! DOCTYPE html> 
JavaScript
Var main = document. getElementById ('main'); var my = document. getElementById ('my'); var score = document. getElementById ("score"); var context = my. getContext ('2d '); var crashId; var fallCount = 0; // record the number of planes that are not hit. If the number exceeds 10, the game stops var alweigh = 0; var count = 0; // record the number of planes in the fight, that is, the current score var leftArr = []; var arrPic = []; var left; var img = new Image (); img. src = ".. /images/self.png "; img. onload = function () {contex T. drawImage (img, aligh, 100);} // you can generate yourself and move the function move (event) {event = EventUtil. getEvent (event); context. clearRect (aligh, 47); if (event. keyCode = 39 & aligh <260) {var img = new Image (); img. src = ".. /images/self.png "; img. onload = function () {context. drawImage (img, alweigh, 100);} alweigh + = 10;} if (alweigh = 260) {var img = new Image (); img. src = ".. /images/self.png "; img. onload = f Unction () {context. drawImage (img, 260,100) ;}} document. onkeypress = move; // randomly generate an enemy (function () {var createId = setInterval (function () {var top = 0 + 'px '; var enemy = document. createElement ("img"); enemy. src = ".. /images/enemy.png "; var randomleft = Math. floor (Math. random () * 300); left = randomleft> 260? 260 + 'px ': randomleft + 'px'; leftArr. push (left); // Save the distance between each enemy and the left to facilitate the calculation of arrPic for collision detection. push (enemy); // Save the images of each enemy in the array to facilitate Collision Detection and remove main. appendChild (enemy); enemy. style. paddingLeft = left; enemy. style. paddingTop = top; var spandom = $ ("# main> img: last-child"); // locate the last span spandom. animate ({"paddingTop": 420}, 6000, function () {// remove the element this. remove (); arrPic. splice (); // remove the image leftArr. splice (); // remove the distance from the array LlCount ++;}); // if more than 10 dropped planes are not hit, the game ends if (fallCount> = 10) {clearInterval (createId ); clearInterval (crashId); alert ("Current score:" + count + ", sorry, the game is over! ") }}, 1000) ;}) (); // Collision Detection function checkCrash () {crashId = setInterval (function () {for (var I = 0; I <leftArr. length; I ++) {var tempL = parseInt (leftArr [I]); var tempA = parseInt (aligh); if (tempL <= (tempA + 20) & (tempA + 20) <= (tempL + 40) {arrPic [I]. remove (); // collision detection, remove the enemy's picture count ++; score. innerHTML = "Current score" + count; continue ;}} console. log (count) ;}, 2200) ;}checkcrash ();}
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.