game.awkwardrelica.com

I am so excited to do this game with you!

Here is the code, we will work on this next time:

Index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Sam's Phaser Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body { margin: 0; background: #111; }
    canvas { display: block; margin: 0 auto; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
  <script src="./main.js"></script>
</body>
</html>

Paste this into main.js:

// Sam's First Phaser Game (Week 1)

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 450,
  backgroundColor: "#1b1b1b",
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 0 },
      debug: false,
    },
  },
  scene: {
    preload,
    create,
    update,
  },
};

const game = new Phaser.Game(config);

let player;
let cursors;
let walls;

function preload() {
  // No assets yet — we’ll use simple shapes for instant success.
}

function create() {
  // World bounds (bigger than screen so camera follow feels cool)
  this.physics.world.setBounds(0, 0, 2000, 1200);
  this.cameras.main.setBounds(0, 0, 2000, 1200);

  // Player (a square using a built-in rectangle body)
  player = this.add.rectangle(200, 200, 40, 40, 0x4aa3ff);
  this.physics.add.existing(player);

  // Make the player collide and stop at world edges
  player.body.setCollideWorldBounds(true);

  // Simple wall group (static bodies)
  walls = this.physics.add.staticGroup();

  // Add a few walls (x, y, width, height)
  addWall(this, 400, 200, 300, 40);
  addWall(this, 700, 380, 40, 300);
  addWall(this, 300, 500, 500, 40);
  addWall(this, 1100, 300, 500, 40);
  addWall(this, 1400, 700, 40, 500);

  // Collisions: player vs walls
  this.physics.add.collider(player, walls);

  // Camera follows player
  this.cameras.main.startFollow(player, true, 0.08, 0.08);

  // Controls
  cursors = this.input.keyboard.createCursorKeys();

  // On-screen instructions (follows camera)
  const help = this.add.text(16, 16, "Arrow Keys to move\nGoal: explore the world!", {
    fontFamily: "Arial",
    fontSize: "18px",
    color: "#ffffff",
  });
  help.setScrollFactor(0);

  // Fun: click to teleport (instant kid joy)
  this.input.on("pointerdown", (pointer) => {
    player.body.stop();
    player.x = pointer.worldX;
    player.y = pointer.worldY;
  });
}

function update() {
  const speed = 260;

  // Reset velocity each frame
  player.body.setVelocity(0);

  if (cursors.left.isDown) player.body.setVelocityX(-speed);
  else if (cursors.right.isDown) player.body.setVelocityX(speed);

  if (cursors.up.isDown) player.body.setVelocityY(-speed);
  else if (cursors.down.isDown) player.body.setVelocityY(speed);

  // Normalize diagonal movement so it isn't faster
  player.body.velocity.normalize().scale(speed);
}

function addWall(scene, x, y, w, h) {
  const wall = scene.add.rectangle(x, y, w, h, 0x7a7a7a);
  scene.physics.add.existing(wall, true); // true = static
  walls.add(wall);
}

Blog

HI SAM!