Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens


+ add another resource


Add External Scripts/Pens


+ add another resource

Use npm Packages


⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?


Auto-Updating Preview


HTML Settings


// a list of our game elements put at the beginning so preload, create and update can access them. 
var player; 
var coins;
var walls;
var enemies;
var splat;
var reload;
var cursor;

// the following javascript object called playState contains all the active code for this simple game, you can add other states like, win, lose, start etc

var playState = {  

    init: function() {  
        // Here reset score when play state starts
     score = 0;
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
    preload: function() {  
      // Here we preload the image assets - make more here
      game.load.crossOrigin = 'anonymous';
      game.load.image('player', '');
      game.load.image('wall', '');
      game.load.image('coin', '');
      game.load.image('enemy', '');
          // Here we preload the audio assets - make more here'win', '');'splat', '');

    create: function() {  
        // Here we create the game
      game.stage.backgroundColor = '#5699ab';
      // These two lines add physics to the game world
      game.physics.startSystem(Phaser.Physics.ARCADE); = true;
      // set up cursor keys to allow user input (the options are set in update)
      cursor = game.input.keyboard.createCursorKeys();
      // add the main player to the game 70 pixels to the left and 100 pixels down from the top
      player = game.add.sprite(70, 100, 'player');

      // increase the size of the player by 50%

      //add gravity to the player so that it falls down
      player.body.gravity.y = 500;
      // don't let the player leave the screen area

      // add audio to two variable ready to play later in other functions
      splat ='splat');
      win ='win');

      //create groups for the walls, coins and enemies - what ever happens to the group happens
      // to all the members of the group 
      walls =;
      coins =;
      enemies =;

var level = [
    '!         !          x',
    '!                 o  x',
    '!         o          x',
    '!                    x',
    '!     o   !    x     x',

// Create the level by going through the array

          var wall = game.add.sprite(30+30*j, 30+30*i, 'wall');
          wall.body.immovable = true; 

            var coin = game.add.sprite(30+30*j, 30+30*i, 'coin');

            var enemy = game.add.sprite(30+30*j, 30+30*i, 'enemy');


    update: function() {  
        // Here we update the game 60 times per second - all code here is run all the time

        // stop the player if no key is pressed 
        player.body.velocity.x = 0;
        // Make the player and the walls collide , so player can't move through them
        game.physics.arcade.collide(player, walls);

        game.physics.arcade.overlap(player, coins, this.takeCoin, null, this);

        // Call the 'lose' function when the player touches the enemy
        game.physics.arcade.overlap(player, enemies, this.lose, null, this);

        // add the controls for the cursor keys
        if (cursor.left.isDown) 
            player.body.velocity.x = -200;
        else if (cursor.right.isDown) 
            player.body.velocity.x = 200;
            player.body.velocity.x = 0;
              // Make the player jump if he is touching the ground
        if (cursor.up.isDown && player.body.touching.down) 
            player.body.velocity.y = -250;
    // Function to kill/disappear a coin if player touches it
    takeCoin: function(player, coin) {
        //increase the score by one if a coin is taken
        score = score +1;
        // restart the game dependent on score count of coin              
        if (score == 3)

      // Function to restart the game when a player touches an enemy
    lose: function() {;
    // Function to restart the game if there are no coins left
    win: function() {;

// Initialize the game at a certain size 
var game = new Phaser.Game(750, 300, Phaser.AUTO, "", "main", false, false);  

//Add and start our play state 
game.state.add('main', playState);  
