Noyeux Zanniversaireuuuh
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

296 lines
8.6 KiB

<!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>