Games-Phaser-3-HTML5 / index.html
awacke1's picture
Update index.html
058cce2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Phaser Game</title>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.60.1/dist/phaser.min.js"></script>
</head>
<body>
<script>
// initialize the Phaser game
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
// preload assets
function preload() {
this.load.image('sky', 'sky.png');
this.load.image('ground', 'platform.png');
this.load.image('star', 'star.png');
this.load.image('bomb', 'bomb.png');
this.load.spritesheet('dude', 'dude.png', { frameWidth: 32, frameHeight: 48 });
}
// create game objects
function create() {
this.add.image(400, 300, 'sky');
this.platforms = this.physics.add.staticGroup();
this.platforms.create(400, 568, 'ground').setScale(2).refreshBody();
this.platforms.create(600, 400, 'ground');
this.platforms.create(50, 250, 'ground');
this.platforms.create(750, 220, 'ground');
this.player = this.physics.add.sprite(100, 450, 'dude');
this.player.setBounce(0.2);
this.player.setCollideWorldBounds(true);
this.physics.add.collider(this.player, this.platforms);
this.cursors = this.input.keyboard.createCursorKeys();
}
// game loop
function update() {
if (this.cursors.left.isDown) {
this.player.setVelocityX(-160);
this.player.anims.play('left', true);
} else if (this.cursors.right.isDown) {
this.player.setVelocityX(160);
this.player.anims.play('right', true);
} else {
this.player.setVelocityX(0);
this.player.anims.play('turn');
}
if (this.cursors.up.isDown && this.player.body.touching.down) {
this.player.setVelocityY(-330);
}
}
</script>
</body>
</html>