Voir le résultat Retour à la page du projet
Afficher/Masquer les commentaires
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<title>Casse-briques</title>On appelle le framework phaser.
<script type="text/javascript" src="phaser.min.js"></script>
On appelle le fichier main.js où se trouve le code javascript de notre TP.
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<p>Utilse les flêches de déplacement pour jouer</p>C'est dans cette div appelée gameDiv, que se trouvera le sprite animé.
<div id="gameDiv"></div>
</body>
</html>
Afficher/Masquer les commentaires
var main = {
preload: function() {On charge les ressources pour notre jeu, ici 3 images.
game.load.image('paddle', 'assets/paddle.png');
game.load.image('ball', 'assets/ball.png');
game.load.image('brik', 'assets/brick.png');
},
create: function() {
game.physics.startSystem(Phaser.Physics.ARCADE);
this.cursor = game.input.keyboard.createCursorKeys()
Création de la raquette.
this.paddle = game.add.sprite(200, 400, 'paddle');
game.physics.arcade.enable(this.paddle);
this.paddle.body.collideWorldBounds = true;
this.paddle.body.immovable = true;
Création de la balle.
this.ball = game.add.sprite(200, 300, 'ball');
game.physics.arcade.enable(this.ball);
game.physics.arcade.checkCollision.down = false;
this.ball.body.collideWorldBounds = true;
this.ball.body.velocity.x = 200; this.ball.body.velocity.y = 200;
this.ball.body.bounce.x = 1; this.ball.body.bounce.y = 1;
Création des briques.
this.bricks = game.add.group();
this.bricks.enableBody = true;
for (var i = 0; i < 5; i++)
for (var j = 0; j < 5; j++)
game.add.sprite(55+i*60, 55+j*35, 'brik', 0, this.bricks);
this.bricks.setAll('body.immovable', true);
},
update: function() {
Gestion des collisions.
game.physics.arcade.collide(this.paddle, this.ball);
game.physics.arcade.collide(this.ball, this.bricks, this.hit, null, this);
Le déplacement de la raquette.
if (this.cursor.right.isDown)
this.paddle.body.velocity.x = 350;
else if (this.cursor.left.isDown)
this.paddle.body.velocity.x = -350;
else
this.paddle.body.velocity.x = 0;
La condition de la fin du jeu
if (this.ball.y>450)
{introText = game.add.text(100, 2, 'Game Over!', { font: "40px Arial", fill: "#ffffff"});};
},
La fonction appellée pour la collision entre la balle et les briques
hit: function(ball, brik) {
brik.kill();
}
};
var game = new Phaser.Game(400, 450, Phaser.AUTO, 'gameDiv');
game.state.add('main', main);
game.state.start('main');