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);
}
Leave a Reply