Share a JavaScript (similar to WeChat) instance code for airplane hitting games

This article describes in detail the code of JavaScript anti-aircraft games, which has some reference value, if you are interested, please refer to this article for details about the code of JavaScript anti-aircraft games, which has some reference value. If you are interested, please refer to it.

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:

Html & css