296 lines
No EOL
8.6 KiB
HTML
296 lines
No EOL
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<script src="phaser-arcade-physics.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="css/colors.css">
|
|
<title>À la gloire des jeux vidéo</title>
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0;
|
|
background-color: #020B2E;
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
margin: auto;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Troika';
|
|
src: url('./assets/fonts/troika.otf');
|
|
}
|
|
|
|
h1 {
|
|
color: #E57FD2;
|
|
font-family: 'Troika', sans-serif;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1 id="title">Il faudra bien ramasser ces pièces</h1>
|
|
<script>
|
|
const WINDOW_WIDTH = 800;
|
|
const WINDOW_HEIGHT = 600;
|
|
const WORLD_WIDTH = 3 * WINDOW_WIDTH;
|
|
const WORLD_HEIGHT = 600;
|
|
var config = {
|
|
type: Phaser.AUTO,
|
|
width: WINDOW_WIDTH,
|
|
height: WINDOW_HEIGHT,
|
|
physics: {
|
|
default: 'arcade',
|
|
arcade: {
|
|
gravity: { y: 540 },
|
|
debug: false,
|
|
width: WORLD_WIDTH,
|
|
height: WORLD_HEIGHT,
|
|
}
|
|
},
|
|
scene: {
|
|
preload: preload,
|
|
create: create,
|
|
update: update
|
|
}
|
|
};
|
|
|
|
var platforms;
|
|
var sol;
|
|
var cursors;
|
|
var coins;
|
|
|
|
var game = new Phaser.Game(config);
|
|
|
|
function preload() {
|
|
this.load.image('le-sol', 'assets/le-sol-192x128.png');
|
|
|
|
this.load.image('sky-deep-space', 'assets/skies/deep-space.jpg');
|
|
this.load.image('sky-deepblue', 'assets/skies/deepblue.png');
|
|
this.load.image('mountain-tile', 'assets/skies/mountains-tile.png');
|
|
|
|
this.load.image('platform-cathy', 'assets/platforms/cathy-48.png');
|
|
this.load.image('platform-cest', 'assets/platforms/cest-48.png');
|
|
this.load.image('platform-la', 'assets/platforms/la-48.png');
|
|
this.load.image('platform-meilleure', 'assets/platforms/meilleure-48.png');
|
|
this.load.image('platform-des', 'assets/platforms/des-48.png');
|
|
this.load.image('platform-mamans', 'assets/platforms/mamans-64.png');
|
|
|
|
this.load.image('yellow-particle', 'assets/yellow.png');
|
|
|
|
this.load.spritesheet('dude', 'assets/dude-cropped.png', { frameWidth: 32, frameHeight: 42 });
|
|
this.load.spritesheet('coin', 'assets/coin-16x16x4.png', { frameWidth: 16, frameHeight: 16 });
|
|
this.load.spritesheet('trophy', 'assets/trophy-cropped.png', { frameWidth: 20, frameHeight: 29 });
|
|
|
|
this.load.audio('got', 'assets/audio/got.mp3');
|
|
this.load.audio('anniv', 'assets/audio/bonnanniv.mp3');
|
|
}
|
|
|
|
function create() {
|
|
const camera = this.cameras.main;
|
|
|
|
//You shouldn't ever create a TileSprite any larger than your actual canvas size. If you want to create a large repeating background that scrolls across the whole map of your game, then you create a TileSprite that fits the canvas size and then use the tilePosition property to scroll the texture as the player moves.
|
|
this.spriteSky = this.add.tileSprite(0, 0, game.config.width,
|
|
game.config.height, 'sky-deep-space');
|
|
this.spriteSky.setOrigin(0, 0);
|
|
this.spriteSky.setScrollFactor(0);
|
|
this.spriteMountain = this.add.tileSprite(0, WINDOW_HEIGHT, game.config.width,
|
|
307, 'mountain-tile');
|
|
this.spriteMountain.setOrigin(0, 1);
|
|
this.spriteMountain.setScrollFactor(0);
|
|
|
|
|
|
// TODO:
|
|
// var particles = this.add.particles('red');
|
|
|
|
// The platforms staticGroup
|
|
platforms = this.physics.add.staticGroup();
|
|
|
|
// Le sol
|
|
const leSolX = 192;
|
|
const leSolY = 128;
|
|
// this.spriteLeSol = this.physics.add.staticSprite(400, 536, 'le-sol');
|
|
//this.spriteLeSol = this.add.tileSprite(400, 536, game.config.width, 128, 'le-sol');
|
|
// this.spriteLeSol = this.add.tileSprite(0, 472, WORLD_WIDTH, 128, 'le-sol');
|
|
// this.spriteLeSol.setOrigin(0, 0);
|
|
// this.spriteLeSol.setScrollFactor(1);
|
|
// // Physics keep considering original locations
|
|
//this.physics.add.existing(this.spriteLeSol, true);
|
|
// same
|
|
// platforms.add(this.spriteLeSol);
|
|
|
|
this.leSolArray = platforms.createMultiple({
|
|
key: 'le-sol',
|
|
repeat: Math.floor(WORLD_WIDTH / leSolX),
|
|
setXY: { x: 96, y: 536, stepX: leSolX }
|
|
})
|
|
|
|
// Now let's create some ledges
|
|
platforms.create(500, 400, 'platform-cathy');
|
|
platforms.create(750, 320, 'platform-cest');
|
|
platforms.create(900, 365, 'platform-la');
|
|
platforms.create(1200, 300, 'platform-meilleure');
|
|
platforms.create(1550, 280, 'platform-des');
|
|
platforms.create(1900, 230, 'platform-mamans');
|
|
|
|
// Coins
|
|
coins = this.physics.add.staticGroup();
|
|
coins.create(250, 440, 'coin');
|
|
coins.create(500, 350, 'coin'); // cathy
|
|
coins.create(610, 320 - 50, 'coin');
|
|
coins.create(750, 320 - 50, 'coin'); // c'est
|
|
coins.create(900, 365 - 50, 'coin'); // la
|
|
coins.create(1000, 300 - 80, 'coin');
|
|
coins.create(1200, 300 - 50, 'coin'); // meilleure
|
|
coins.create(1400, 280 - 120, 'coin');
|
|
coins.create(1550, 280 - 50, 'coin'); // des
|
|
coins.create(1700, 230 - 80, 'coin');
|
|
coins.create(1900, 230 - 60, 'coin'); // mamans
|
|
coins.create(1900, 230 - 90, 'coin'); // mamans
|
|
coins.create(1900, 230 - 120, 'coin'); // mamans
|
|
coins.create(1900, 230 - 150, 'coin'); // mamans
|
|
this.anims.create({
|
|
key: 'coin-rotate',
|
|
frames: this.anims.generateFrameNumbers('coin', { start: 0, end: 3 }),
|
|
frameRate: 10,
|
|
repeat: -1
|
|
});
|
|
coins.playAnimation('coin-rotate');
|
|
|
|
// trophy= this.physics.add.staticGroup();
|
|
// trophy.create(1900, 230 - 60, 'trophy');
|
|
// this.anims.create({
|
|
// key: 'trophy-rotate',
|
|
// frames: this.anims.generateFrameNumbers('trophy', { start: 0, end: 10 }),
|
|
// frameRate: 10,
|
|
// repeat: -1
|
|
// });
|
|
// trophy.playAnimation('trophy-rotate');
|
|
|
|
// PARTICLES
|
|
this.particles = this.add.particles('yellow-particle');
|
|
|
|
|
|
// The player and its settings
|
|
this.player = this.physics.add.sprite(100, 450, 'dude');
|
|
this.player.setBounce(0.12);
|
|
this.player.setCollideWorldBounds(true);
|
|
|
|
// Our player animations, turning, walking left and walking right.
|
|
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
|
|
});
|
|
|
|
// Callback when player collects coins
|
|
function collectCoin(player, coin) {
|
|
coin.disableBody(true, true);
|
|
camera.shake(100, 0.01);
|
|
this.emitter = this.particles.createEmitter({
|
|
speed: 100,
|
|
scale: { start: 0.5, end: 0 },
|
|
angle: { min: 80, max: 280 },
|
|
maxParticles: 20,
|
|
blendMode: 'ADD'
|
|
});
|
|
this.emitter.startFollow(player);
|
|
}
|
|
|
|
// The player collisions
|
|
this.physics.add.collider(this.player, platforms);
|
|
this.physics.add.overlap(this.player, coins, collectCoin, null, this);
|
|
//this.physics.add.overlap(player, coins, collectTrophy, null, this);
|
|
|
|
// Input Events
|
|
cursors = this.input.keyboard.createCursorKeys();
|
|
|
|
// Camera
|
|
camera.startFollow(this.player);
|
|
camera.setBounds(0, 0, WORLD_WIDTH, WORLD_HEIGHT);
|
|
|
|
|
|
// Audio
|
|
this.musicGoT = this.sound.add('got', {
|
|
mute: false,
|
|
volume: 0.8,
|
|
rate: 1,
|
|
detune: 0,
|
|
seek: 0,
|
|
loop: true,
|
|
delay: 5000
|
|
});
|
|
this.musicAnniv = this.sound.add('anniv', {
|
|
mute: false,
|
|
volume: 0.8,
|
|
rate: 1,
|
|
detune: 0,
|
|
seek: 0,
|
|
loop: false,
|
|
delay: 2000
|
|
});
|
|
|
|
this.musicGoT.play();
|
|
this.musicAnniv.play();
|
|
this.musicAnniv.pause();
|
|
}
|
|
|
|
function update() {
|
|
const camera = this.cameras.main;
|
|
this.spriteMountain.setTilePosition(camera.scrollX / 2, 0);
|
|
// this.spriteMountain.setPosition(
|
|
// camera.scrollX / 2,
|
|
// WINDOW_HEIGHT);
|
|
//this.spriteLeSol.setOriginFromFrame();
|
|
|
|
// VICTORY
|
|
if (coins.countActive() == 0) {
|
|
this.musicGoT.stop();
|
|
this.musicAnniv.resume();
|
|
this.physics.shutdown();
|
|
document.getElementById("title").innerHTML = "Bon anniversaire !!!";
|
|
}
|
|
|
|
// Keyboard
|
|
if (cursors.left.isDown) {
|
|
this.player.setVelocityX(-200);
|
|
|
|
this.player.anims.play('left', true);
|
|
} else if (cursors.right.isDown) {
|
|
this.player.setVelocityX(200);
|
|
|
|
this.player.anims.play('right', true);
|
|
} else {
|
|
this.player.setVelocityX(0);
|
|
|
|
this.player.anims.play('turn');
|
|
}
|
|
|
|
if (cursors.up.isDown && this.player.body.touching.down) {
|
|
this.player.setVelocityY(-330);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |