Ancient Brain

Worlds Minds Users Uploads JS code Search

Intro

Introduction Features

---

Definitions Principles The AI model

---

Teaching Register a class

Learn

Getting started P5 tutorial Three.js tutorial

---

Coding course Coding course II Coding for kids WebGL course AI exercises

Browse

Starter Worlds

---

Editor's Choice Showcase Worlds Multi-user Worlds Random Worlds

---

Advanced search

Docs

Docs API docs

Register

Register Forgot password

   Login

// port of the start of this tutorial:
// https://medium.com/@joseph.a.guzzardo/intro-to-phaser-for-javascript-6bf4b5a09085

// code basically unchanged - just put inside a getScript 

// did up as far as creation of player and physics
// next step would be to add the stars



// assets from:
// https://phaser.io/tutorials/making-your-first-phaser-3-game/phaser3-tutorial-src.zip
// missing - got them from Internet Archive 

// https://github.com/photonstorm/phaser

  
 

$.getScript ( "https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js", function() 
{
  
  
  

  
var config = 
{
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    
    preserveDrawingBuffer: true,        // ----- CODE CHANGE ----- needed for screenshots 
    
    scene: 
    {
        preload: preload,
        create: create,
        update: update,
    },
    
    physics: 
    {
        default: "arcade",
        arcade: 
        {
            gravity: { y: 300 },  
            debug: false,
        },
    },
};

    
var game = new Phaser.Game(config);
var platforms, player, cursors;

   
function preload() 
{
    this.load.image ( "sky",        "/uploads/humphrys/sky.png"       );
    this.load.image ( "ground",     "/uploads/humphrys/platform.png"  );
    this.load.image ( "star",       "/uploads/humphrys/star.png"      );
    this.load.image ( "bomb",       "/uploads/humphrys/bomb.png"      );

    this.load.spritesheet ( "dude", "/uploads/humphrys/dude.png", 
        {
         frameWidth: 32,
         frameHeight: 48,
        }); 
}



function create() 
{
  this.add.image(400, 300, "sky");
  
  platforms = this.physics.add.staticGroup();
  platforms.create(400, 568, "ground").setScale(2).refreshBody();
  platforms.create(600, 400, "ground");
  platforms.create(50, 250, "ground");
  platforms.create(750, 220, "ground");
  
  player = this.physics.add.sprite(100, 450, 'dude');
  player.setBounce(0.2);
  player.setCollideWorldBounds(true);
  
  this.physics.add.collider(player, platforms);
  
  this.anims.create ({
      key: "left",
      frames: this.anims.generateFrameNumbers("dude", { start: 0, end: 3 }),
      frameRate: 10,
      repeat: -1,
    });
    
  this.anims.create({
    key: "turn",
    frames: [{ key: "dude", frame: 4 }],
      frameRate: 20,
    });
    
  this.anims.create({
    key: "right",
      frames: this.anims.generateFrameNumbers("dude", { start: 5, end: 8 }),
      frameRate: 10,
      repeat: -1,
    });
    
    cursors = this.input.keyboard.createCursorKeys();
    
    AB.msg ("Move player with left-right and up keys.");
}
 


function update() 
{   
    if (cursors.left.isDown)                // left 
    {
        player.setVelocityX(-160);
        player.anims.play('left', true);
    }
    else if (cursors.right.isDown)          // right
    {
        player.setVelocityX(160);
        player.anims.play('right', true);
    }
    else
    {
        player.setVelocityX(0);
        player.anims.play('turn');
    }
    
    if (cursors.up.isDown && player.body.touching.down)     // up 
    {
        player.setVelocityY(-330);
    }
}

    
        
        
    

});