Some Notes
This is the code below you will have to put a code embed and paste it. In this code you will have to replace the images for the following:
- Logo
- Menu background
- Road background
- Player car
- Enemy Car
- Coin (Three variations that are randomly selected)
Also have this game in a div with the id: game-container
Make it relative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
/* Optional styling can be added here */
</style>
</head>
<body>
<!-- Container for the Phaser game -->
<div id="game-container" style="position: relative;"></div>
<!-- Include Phaser 3 from CDN -->
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
<!-- Phaser Game Code -->
<script>
// -------------------------
// MENU SCENE: Displays a logo, background, instructions, and a "Click to Start" button.
// -------------------------
class MenuScene extends Phaser.Scene {
constructor() {
super({ key: 'MenuScene' });
}
preload() {
// Load the logo and menu background images.
// Replace the placeholder text with your own image URLs.
this.load.image('logo', 'YOUR_LOGO_IMAGE_URL_HERE');
this.load.image('menuBg', 'YOUR_MENU_BACKGROUND_IMAGE_URL_HERE');
}
create() {
// Set a fallback white background and add the menu background.
this.cameras.main.setBackgroundColor('#fff');
this.add.image(400, 300, 'menuBg').setDisplaySize(800, 600);
// Add the logo near the top-center.
this.add.image(400, 100, 'logo').setScale(0.5);
// Create a clickable rectangle as the "Click to Start" button.
let button = this.add.rectangle(400, 400, 300, 80, 0x0000ff)
.setInteractive({ useHandCursor: true });
// Add the button text.
let buttonText = this.add.text(400, 400, 'Click to Start', {
fontSize: '32px',
fill: '#fff'
}).setOrigin(0.5);
// Add gameplay instructions below the button.
let instructions = this.add.text(400, 500,
'On desktop, use your up and down keys; on mobile, tap vertically where you want the car to move', {
fontSize: '24px',
fill: '#000',
align: 'center',
wordWrap: { width: 750 }
}).setOrigin(0.5);
// Start the main game when the button is clicked.
button.on('pointerdown', () => {
this.scene.start('MainScene');
});
}
}
// -------------------------
// MAIN SCENE: Contains the actual gameplay.
// -------------------------
class MainScene extends Phaser.Scene {
constructor() {
super({ key: 'MainScene' });
this.gameOver = false;
}
preload() {
// Load game images.
// Replace the placeholder text with your own image URLs.
this.load.image('background', 'YOUR_ROAD_IMAGE_URL_HERE');
this.load.image('enemyCar', 'YOUR_ENEMY_CAR_IMAGE_URL_HERE');
this.load.image('playerCar', 'YOUR_PLAYER_CAR_IMAGE_URL_HERE');
this.load.image('coin1', 'YOUR_COIN_IMAGE_URL_1_HERE');
this.load.image('coin2', 'YOUR_COIN_IMAGE_URL_2_HERE');
this.load.image('coin3', 'YOUR_COIN_IMAGE_URL_3_HERE');
}
create() {
// Define vertical boundaries for gameplay.
this.physics.world.setBounds(0, 154, 800, 292);
// Create a scrolling road background.
this.background = this.add.tileSprite(400, 300, 800, 600, 'background');
// Create the player's car and keep it within bounds.
this.playerCar = this.physics.add.sprite(400, 300, 'playerCar');
this.playerCar.setCollideWorldBounds(true);
this.playerCar.setDepth(2);
// Set up keyboard controls.
this.cursors = this.input.keyboard.createCursorKeys();
// Display the coin score.
this.coinScore = 0;
this.coinScoreText = this.add.text(10, 10, 'Score: 0', { fontSize: '24px', fill: '#fff' });
// Create groups for enemy cars and coins.
this.enemies = this.physics.add.group();
this.coins = this.physics.add.group();
// Enemy spawning setup.
this.enemySpawnAccumulator = 0;
this.enemySpawnDelay = 1500; // in milliseconds
this.enemyDifficultyTimer = 0;
this.maxEnemies = 6;
// Start coin spawning.
this.coinSpawnTimer = this.time.addEvent({
delay: 3000,
callback: this.spawnCoin,
callbackScope: this,
loop: true
});
// Set up collision detection.
this.physics.add.overlap(this.playerCar, this.enemies, this.handleCollision, null, this);
this.physics.add.overlap(this.playerCar, this.coins, this.collectCoin, null, this);
}
update(time, delta) {
if (!this.gameOver) {
// Scroll the road background.
this.background.tilePositionX += 2;
// Handle player input.
if (this.input.pointer1.isDown) {
let pointerY = this.input.pointer1.y;
this.playerCar.y = Phaser.Math.Clamp(pointerY, 154, 446);
} else {
if (this.cursors.up.isDown) {
this.playerCar.setVelocityY(-300);
} else if (this.cursors.down.isDown) {
this.playerCar.setVelocityY(300);
} else {
this.playerCar.setVelocityY(0);
}
}
// Keep the player's car horizontally centered.
this.playerCar.x = 400;
// Spawn enemy cars periodically.
this.enemySpawnAccumulator += delta;
if (this.enemySpawnAccumulator >= this.enemySpawnDelay && this.enemies.getChildren().length < this.maxEnemies) {
this.spawnEnemy();
this.enemySpawnAccumulator = 0;
}
// Increase difficulty gradually.
this.enemyDifficultyTimer += delta;
if (this.enemyDifficultyTimer >= 1000) {
this.enemySpawnDelay = Math.max(500, this.enemySpawnDelay - 10);
this.enemyDifficultyTimer = 0;
}
}
// Remove off-screen enemy cars.
this.enemies.getChildren().forEach(enemy => {
enemy.y = Phaser.Math.Clamp(enemy.y, 154, 446);
if (enemy.x > 850) enemy.destroy();
});
// Remove off-screen coins.
this.coins.getChildren().forEach(coin => {
coin.y = Phaser.Math.Clamp(coin.y, 154, 446);
if (coin.x > 850) coin.destroy();
});
}
spawnEnemy() {
const yPosition = Phaser.Math.Between(154, 446);
const enemy = this.enemies.create(-50, yPosition, 'enemyCar');
enemy.body.allowGravity = false;
enemy.setVelocityX(200);
enemy.setVelocityY(Phaser.Math.Between(-100, 100));
enemy.setDepth(2);
}
spawnCoin() {
// Randomly choose one of the coin images.
const coinKeys = ['coin1', 'coin2', 'coin3'];
const randomKey = coinKeys[Phaser.Math.Between(0, coinKeys.length - 1)];
const xPosition = Phaser.Math.Between(50, 350);
const yPosition = Phaser.Math.Between(154, 446);
const coin = this.coins.create(xPosition, yPosition, randomKey);
coin.body.allowGravity = false;
coin.setDisplaySize(35, 35);
coin.setVelocityX(50);
// Ensure coins appear behind the cars.
coin.setDepth(1);
// Remove coin after 10 seconds if uncollected.
this.time.addEvent({
delay: 10000,
callback: () => { if (coin.active) coin.destroy(); },
callbackScope: this
});
}
collectCoin(player, coin) {
coin.destroy();
this.coinScore += 1;
this.coinScoreText.setText('Score: ' + this.coinScore);
}
handleCollision(player, enemy) {
if (!this.gameOver) {
this.gameOver = true;
this.physics.pause();
// Stop coin spawning.
if (this.coinSpawnTimer) {
this.coinSpawnTimer.remove();
}
this.enemySpawnAccumulator = 0;
// Flicker the player's car before showing the game over screen.
this.tweens.add({
targets: this.playerCar,
alpha: 0,
duration: 100,
ease: 'Linear',
yoyo: true,
repeat: 9,
onComplete: () => {
// Display a semi-transparent overlay.
this.add.rectangle(400, 300, 800, 600, 0x000000, 0.7).setDepth(10);
// Show "Game Over" text.
this.add.text(400, 250, 'Game Over', { fontSize: '48px', fill: '#fff' })
.setOrigin(0.5)
.setDepth(11);
// No restart prompt is provided.
}
});
}
}
}
// -------------------------
// Phaser Game Configuration
// -------------------------
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'game-container',
backgroundColor: '#000',
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 600
},
physics: {
default: 'arcade',
arcade: { gravity: { y: 0 }, debug: false }
},
scene: [MenuScene, MainScene]
};
const game = new Phaser.Game(config);
</script>
</body>
</html>
Game Summary
This game is an arcade-style driving challenge built using Phaser 3. It begins on a menu screen that displays a customizable logo, background image, and instructions along with a “Click to Start” button. When the game starts, the player controls a car that stays horizontally centered while moving vertically—using either keyboard arrow keys or touch input—to dodge enemy cars and collect coins.
The road scrolls continuously, and enemy cars spawn at increasing frequencies, adding to the challenge. Upon colliding with an enemy car, the game pauses, the player’s car flickers, and a game-over screen appears. No option to restart is provided after a collision, so a page refresh is required to play again.
I hope that helps!
Leave a Reply
You must be logged in to post a comment.