Articles tagged: 2D

Found 25 documents

• Games/Techniques/2D_collision_detection One of the simpler forms of collision detection is between two rectangles that are axis aligned ...
• Games/Techniques/Crisp_pixel_art_look This article discusses a useful technique for giving your canvas/WebGL games a crisp pixel art ...
• Games/Techniques/Tilemaps Tilemaps are a very popular technique in 2D game development, consisting of building the game ...
• Games/Tutorials/2D_breakout_game_Phaser In this step-by-step tutorial we create a simple mobile MDN Breakout game written in JavaScript, ...
• Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens To make the game look more juicy and alive we can use animations and tweens. This will result in ...
• Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls Now that physics have been introduced, we can start implementing collision detection into the ...
• Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field Building the brick field is a little bit more complicated than adding a single object to the ...
• Games/Tutorials/2D_breakout_game_Phaser/Buttons Instead of starting the game right away we can leave that decision to the player by adding a ...
• Games/Tutorials/2D_breakout_game_Phaser/Collision_detection Now onto the next challenge — the collision detection between the ball and the bricks. Luckily ...
• Games/Tutorials/2D_breakout_game_Phaser/Extra_lives We can make the game enjoyable for longer by adding lives. In this article we'll implement a ...
• Games/Tutorials/2D_breakout_game_Phaser/Game_over To make the game more interesting we can introduce the ability to lose — if you don't hit the ...
• Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework Before we can start writing the game's functionality, we need to create a basic structure to ...
• Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen Our game will feature a ball rolling around the screen, bouncing off a paddle, and destroying ...
• Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball We have our blue ball printed on screen, but it's doing nothing — It would be cool to make it ...
• Games/Tutorials/2D_breakout_game_Phaser/Physics For proper collision detection between objects in our game we will need to have physics; this ...
• Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls We have the ball moving and bouncing off the walls, but it quickly gets boring — there's no ...
• Games/Tutorials/2D_breakout_game_Phaser/Randomizing_gameplay You've finished all the lessons — congratulations! By this point you would have learnt the ...
• Games/Tutorials/2D_breakout_game_Phaser/Scaling Scaling refers to have the game canvas will scale on different screen sizes. We can make the ...
• Games/Tutorials/2D_breakout_game_Phaser/The_score Having a score can also make the game more interesting — you can try to beat your own highscore, ...
• Games/Tutorials/2D_breakout_game_Phaser/Win_the_game Implementing winning in our game is quite easy: if you happen to destroy all the bricks, then ...
• Games/Tutorials/2D_Breakout_game_pure_JavaScript In this step-by-step tutorial we create a simple MDN Breakout game written entirely in pure ...
• Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it Before we can start writing the game's functionality, we need to create a basic structure to ...
• Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball You already know how to draw a ball from working through the previous article, so now let's make ...
• Web/Demos_of_open_web_technologies Mozilla supports a wide variety of exciting open web technologies, and we encourage their use.  ...
• Web/Guide/Graphics Web sites and applications often need to present graphics. These articles provide insight into ...