This little game is very simple and consists of 3 parts. One plane (pitch), one sphere (football) and one cube (goal).

The last picture gives you a feeling of simple painting style (the maximum upload of gold nuggets 5M pictures, the original pictures are too large after compression is not clear)

When the space bar is pressed, the game can start. Once the game starts, the camera will switch to the front of the goal, and the goal will start moving left and right. All you do is kick the football into a moving goal. J key is the shooting key, press the J key does not loosen, the right side of the football will appear a telescopic yellow bar… This mimics the amount of force used to control shots in other games, where longer shots mean more power. Only press J is the middle low flat ball shot, W+J is the middle high ball shot, A+J left flat shot, A+W+J left high ball shot, right D key the same. Here’s a quick rundown of how the game works.

Power bar control

First, the keyDown event listens for the key. Let’s set a variable strong to represent strength, starting at 0. And then let’s think about it, the progress bar can’t get infinitely bigger, so we have to set a maximum let’s say 15. We’re going to start with the control of progress bar scaling, which is to make strong go from 0 to 15 and then from 15 to 0 and then loop. Add a long() method and a short() method. Of course, there are other operations in the method, so I’m going to skip them

        function long(){
            setTimeout(function(){
                strong += 1
            },100)
        }
         function short(){
            setTimeout(function(){
                strong -= 1
            },100)
        }
Copy the code

At first I thought it would be OK to press the J key first to execute long() and then short when strong is greater than or equal to 15. Like this

        switch(e.keyCode){
            case 74:
                if(strong>=15){
                    short()
                }
                else{
                    long()
                }
            break;
        } 
Copy the code

If strong = 15, short() is executed. If strong = 14, long() is executed. If strong = 15, long() is executed. So HERE I add a lock state that starts with false.

     switch(e.keyCode){
            case 74:
                if(strong>=15){
                    lock = true
                    short()
                }
                else{
                    lock ? short() : long()
                }
            break;
        } 
Copy the code

Change lock to true when strong is greater than or equal to 15, add short to change lock to false when strong is 0.

Then we display the change of strong on the page, set the z-axis of the cube to strong/100 and dynamically change the height of the cube.

Goal and ball movement

The goal is moved at a fixed speed by changing the position of the X,Y and Z axis of the goal. When the position of the Y axis of the goal is greater than a certain value, the goal is moved to the right. It moves to the left when the y-position is less than a certain value. The movement principle of the ball is the same as the goal, but I added the influence of strength on the speed of the ball and the rotation of the ball. The ball is easy to rotate by changing the rotation. The effect of force on the ball and I’m just doing a little bit here, the bigger the force, the faster the ball, the farther it travels. Add a setInterval method that declares a variable times to determine how many times the setInterval is executed.

Let shootBall = setInterval(function(){time = time + 0.5 if(time == strong){clearInterval(shootBall)} sphere.rotation.x += 1; sphere.position.x += strong/100; }, 100).Copy the code

As you can see, the greater the force, the more times the method is executed and the longer the flight distance. The greater the force, the greater the distance the ball will travel each time, so the speed will be faster. Of course, the effect of force on the football can not be as simple as I designed, for example, the process of the football from acceleration to deceleration is very complicated, I will directly ignore here. Those of you who are interested can think about how to do that.

Shooting mode and collision detection

The direction and height of the shot is controlled by the combination of buttons, which is also achieved by adding keyStatus, which I did not mention in my previous introduction. Declare a variable shootType, then each shootType has its own shootType, listens for the shot key in the keyup time, and judges the shootType to control the shot when the J key is released.

Collision detection is determined by the goal and the ball’s X,Y and Z axis positions. During the flight of the ball, a goal is scored if a collision is detected.

Attached is the download address github.com/leslie233/3…