Ping pong flash game tutorial




















To begin, choose a backdrop in Scratch. By default you will see a blank backdrop. To choose a backdrop, just click the round mountain icon on the right side of the screen. Now that you have a backdrop up, add a line at the bottom of the backdrop.

To draw your line, click on the stage. And then go to the costumes tab to add a line on the backdrop. Use a drawing feature to create a line, place it at the bottom of the screen, and change the color of the line. This line will help to calculate negative points. The round cat icon on the right bottom corner allows you to choose a new sprite.

Go to the variable block and create one variable named score, to save the score of the pong game. Let's start to code! The goal is to get your ball sprite to start from a certain position each time when you hit the green colored flag and to move in a specific direction.

The tricky part is ensuring it bounces back once the ball sprite hits the edge of the backdrop. We will start from the events blocks. Drag a when green flag clicked into the code area.

Now, to make sure that the game is starting from the correct backdrop, drag show, and then switch backdrop to neon tunnel from looks blocks.

Fill in the blanks of x and y with proper values: for us, x is 20 and y is Drag a yellow color forever block from the control blocks to make your sprite move continuously and connect it to the above script. Drag move 10 steps and i f on edge bounce blocks from motion blocks and put it inside the forever block.

To create a paddle sprite, draw it or get it by clicking the choose a sprite icon. Create a code for the paddle sprite. This allows the paddle to follow the mouse pointer. We need to check for the score each and every time, and if the score is less than , the sprite should follow the mouse pointer.

Otherwise, we'll hide the sprite and switch the backdrop to end the game. Start by clicking on the paddle sprite. Pull out the when green flag clicked block from the events blocks , and attach the show block from looks blocks underneath. My own implementation was done using Flash ActionScript 3 that can be downloaded at the end of this tutorial.

Paddles have a position and dimensions. They can only move in two directions, upwards and downwards. Scores are part of the graphical user interface of the game. They are positioned somewhere on the screen, but they do not interact directly with any of the other elements of the game.

Now that we have identified the logical units in the game and defined some classes, we can think about simulations and interactions. We must create a game world that is updated as fast as possible, which allows us to make a fast-paced action game that reacts to the player in near real-time. Below we define a rough sketch of a game loop , the basis of a real-time updating game world with interactions, together with a line-by-line explanation.

Line 1: The while loop represents our game loop. Everyone is familiar with the concept of frames per second in games. At every frame, updates are made to the game and an image is shown to the player.

These updates are done within the game loop. Every line of code from line 1 to line 6 is included in the game loop and will run every frame. When the framerate of the game is fast enough, the game can react to the player in real-time, making the game interactive and fluent. Line 2: At each frame, we have to know if the player has interacted with the game. If the player has moved the mouse for example, his paddle would have to be moved accordingly.

Line 3: The position of the ball needs to be updated, depending on its speed and direction. Line 4: When the ball hits a paddle, or when the ball bumps against the top or bottom of the playing field, the direction of the ball needs to be adjusted. We have structured our game into classes which can be instantiated into objects and made a gameloop.

We now have to add interactions in the gameloop between the objects of the game. The ball has a position and a direction of movement. The length of the direction of movement vector, indicates how many pixels per second the ball has to move. At each frame, we have to update the position of the ball. We can do this by adding the direction vector multiplied by the time since the previous frame to the current position of the ball.

The following function is added to the Ball class. The rackets just need to move up and down. The score labels of the PongGame are kept updated by changing the NumericProperty score , which in turn updates the PongGame child labels text property. This binding occurs because Kivy properties automatically bind to any references in their corresponding kv files.

Here is the code for the PongPaddle class:. This algorithm for ball bouncing is very simple, but will have strange behavior if the ball hits the paddle from the side or bottom…this is something you could try to fix yourself if you like.

Well, the pong game is pretty much complete. If you understood all of the things that are covered in this tutorial, give yourself a pat on the back and think about how you could improve the game. Here are a few ideas of things you could do:. Hint: check out the source property on the graphics instructions like circle or Rectangle , to set an image as the texture.

Make the game end after a certain score. Make it a 4 player Pong Game. Fix the simplistic collision check so hitting the ball with an end of the paddle results in a more realistic bounce. Note Try to resize the application window and notice what happens. This 12 will be called in equal intervals to animate the ball 13 def move self : 14 self. Note At this point everything is hooked up for the ball to bounce around. Setelah di buat temboknya beri script ke duanya dengan script :.

Setelah itu buat layer kembali untuk menu restart apabila bola sudah tidak ada, disini. Setelah dibuat lalu di beri script :. Setelah itu buat layer lagi untuk menstop framenya dan akan berpindah dengan menekan tombol restart tadi. Dan jadilah tampilan dalam gamenya seperti ini.



0コメント

  • 1000 / 1000