Creating a Pong Clone in Phaser.JS (Part 1)

Choosing an engine

Getting Started with Phaser.JS and Mintbean CLI

Making Your First Modification

import ball from “../assets/ball.png”;import paddle1 from “../assets/paddle1.png”;import paddle2 from “../assets/paddle2.png”;
let paddleP1;
preload: function preload() {this.load.image(“background”, background);this.load.image(“paddle1”, paddle1);this.load.spritesheet(“tiles”, tiles, {frameWidth: 32,frameHeight: 32,});this.load.image(“star”, star);},
import bg from “../assets/bg.jpg”;
this.load.image(“bg”, bg);
this.add.image(400, 300, “bg”);this code: paddleP1 = this.physics.add.image(700, 300, “paddle1”);
this.physics.add.collider(stars, paddleP1, processCollision, null, this);paddleP1.setBounce(1, 1);paddleP1.setCollideWorldBounds(true);},update: function () {const { velocity } = paddleP1.body;
if ( {const x = decelerate(velocity.x);const y = decelerate(velocity.y);paddleP1.setVelocity(x, y);}
if (cursors.up.isDown) paddleP1.setVelocityY(accelerate(velocity.y, -1));if (cursors.right.isDown) paddleP1.setVelocityX(accelerate(velocity.x, 1));if (cursors.down.isDown) paddleP1.setVelocityY(accelerate(velocity.y, 1));if (cursors.left.isDown) paddleP1.setVelocityX(accelerate(velocity.x, -1));
create: function create() {this.add.image(400, 300, “bg”);this.add.image(“paddle1”, paddle1);


About the Author

  • HTML5
  • JavaScript
  • JQuery
  • CSS3
  • MySQL/PostgreSQL
  • Bootstrap
  • MaterialUI
  • React
  • Redux



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store