266 lines
8 KiB
HTML
266 lines
8 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">
|
||
|
|
<style type="text/css">
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
background-color: #020B2E;
|
||
|
|
}
|
||
|
|
|
||
|
|
canvas {
|
||
|
|
position: absolute;
|
||
|
|
margin: auto;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<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 player;
|
||
|
|
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 });
|
||
|
|
}
|
||
|
|
|
||
|
|
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
|
||
|
|
player = this.physics.add.sprite(100, 450, 'dude');
|
||
|
|
player.setBounce(0.12);
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
// function collectTrophy(player, trophy) {
|
||
|
|
// trophy.disableBody(true, true);
|
||
|
|
// camera.shake(200, 0.01);
|
||
|
|
// this.emitter = this.particles.createEmitter({
|
||
|
|
// speed: 120,
|
||
|
|
// scale: { start: 0.8, end: 0 },
|
||
|
|
// angle: { min: 80, max: 280 },
|
||
|
|
// maxParticles: 20,
|
||
|
|
// blendMode: 'ADD'
|
||
|
|
// });
|
||
|
|
// this.emitter.startFollow(player);
|
||
|
|
// }
|
||
|
|
|
||
|
|
// The player collisions
|
||
|
|
this.physics.add.collider(player, platforms);
|
||
|
|
this.physics.add.overlap(player, coins, collectCoin, null, this);
|
||
|
|
//this.physics.add.overlap(player, coins, collectTrophy, null, this);
|
||
|
|
|
||
|
|
// Input Events
|
||
|
|
cursors = this.input.keyboard.createCursorKeys();
|
||
|
|
|
||
|
|
// Camera
|
||
|
|
camera.startFollow(player);
|
||
|
|
camera.setBounds(0, 0, WORLD_WIDTH, WORLD_HEIGHT);
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
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();
|
||
|
|
|
||
|
|
if (coins.countActive() == 0) {
|
||
|
|
console.log("All done!");
|
||
|
|
}
|
||
|
|
|
||
|
|
if (cursors.left.isDown) {
|
||
|
|
player.setVelocityX(-200);
|
||
|
|
|
||
|
|
player.anims.play('left', true);
|
||
|
|
} else if (cursors.right.isDown) {
|
||
|
|
player.setVelocityX(200);
|
||
|
|
|
||
|
|
player.anims.play('right', true);
|
||
|
|
} else {
|
||
|
|
player.setVelocityX(0);
|
||
|
|
|
||
|
|
player.anims.play('turn');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (cursors.up.isDown && player.body.touching.down) {
|
||
|
|
player.setVelocityY(-330);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|