phaser/2.6.2/resources/tutorials/Spanish/02 Creando tu primer juego/part9.html

151 lines
4.1 KiB
HTML
Raw Normal View History

2013-12-10 15:49:01 +00:00
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
2013-12-10 16:31:19 +00:00
<title>Phaser - Creando tu primer juego, parte 9</title>
2013-12-10 15:49:01 +00:00
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var player;
var platforms;
var cursors;
var stars;
var score = 0;
var scoreText;
function create() {
2013-12-10 16:31:19 +00:00
// Un fondo simple para nuestro juego
2013-12-10 15:49:01 +00:00
game.add.sprite(0, 0, 'sky');
2013-12-10 20:41:33 +00:00
// El grupo 'platforms' contiene el suelo y las dos plataformas sobre las que podemos saltar
2013-12-10 15:49:01 +00:00
platforms = game.add.group();
2013-12-10 16:31:19 +00:00
// Aquí creamos el suelo
2013-12-10 15:49:01 +00:00
var ground = platforms.create(0, game.world.height - 64, 'ground');
2013-12-10 16:31:19 +00:00
// Lo escalamos para que se ajuste al ancho del juego (el sprite original es 400x32)
2013-12-10 15:49:01 +00:00
ground.scale.setTo(2, 2);
2013-12-10 16:31:19 +00:00
// Esto hace que el suelo no se caiga cuando saltas en él. Lo hace inmóvil
2013-12-10 15:49:01 +00:00
ground.body.immovable = true;
2013-12-10 20:41:33 +00:00
// Creamos las dos plataformas
2013-12-10 15:49:01 +00:00
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
2013-12-10 16:31:19 +00:00
// El jugador y su configuración
2013-12-10 15:49:01 +00:00
player = game.add.sprite(32, game.world.height - 150, 'dude');
2013-12-10 16:31:19 +00:00
// Las propiedades físicas del jugador. Le damos al chaval un pequeño rebote al caer (bounce)
2013-12-10 15:49:01 +00:00
player.body.bounce.y = 0.2;
2013-12-10 16:31:19 +00:00
player.body.gravity.y = 6; //gravedad
player.body.collideWorldBounds = true; //choque con los bordes del juego
2013-12-10 15:49:01 +00:00
2013-12-10 16:31:19 +00:00
// Las dos animaciones del jugador, andar izquierda y derecha ('left' y 'right', resp.)
2013-12-10 15:49:01 +00:00
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
2013-12-10 16:31:19 +00:00
// Añadimos un grupo para meter las estrellas
2013-12-10 15:49:01 +00:00
stars = game.add.group();
2013-12-10 16:31:19 +00:00
// Creamos 12 estrellas y las esparcimos por el escenario
2013-12-10 15:49:01 +00:00
for (var i = 0; i < 12; i++)
{
2013-12-10 16:31:19 +00:00
// Creamos una estrella dentro del grupo 'stars'
2013-12-10 15:49:01 +00:00
var star = stars.create(i * 70, 0, 'star');
2013-12-10 16:31:19 +00:00
// Le aplicamos gravedad
2013-12-10 15:49:01 +00:00
star.body.gravity.y = 6;
2013-12-10 16:31:19 +00:00
// ..y un cierto valor de rebote
2013-12-10 15:49:01 +00:00
star.body.bounce.y = 0.7 + Math.random() * 0.2;
}
2013-12-10 16:31:19 +00:00
// Añadimos el marcador de la puntuación
2013-12-10 15:49:01 +00:00
scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
2013-12-10 16:31:19 +00:00
// Los controles del jugador con teclado
2013-12-10 15:49:01 +00:00
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
2013-12-10 16:31:19 +00:00
// Hacer que el jugador y las estrellas colisionen con las plataformas
2013-12-10 15:49:01 +00:00
game.physics.collide(player, platforms);
game.physics.collide(stars, platforms);
2013-12-10 16:31:19 +00:00
// Comprobar si el jugador se solapa con alguna estrella. Si es así, llamamos a la función 'collectStar'
2013-12-10 15:49:01 +00:00
game.physics.overlap(player, stars, collectStar, null, this);
2013-12-10 16:31:19 +00:00
// Resetear la velocidad del jugador (movimiento)
2013-12-10 15:49:01 +00:00
player.body.velocity.x = 0;
2013-12-10 16:31:19 +00:00
if (cursors.left.isDown) //si se presiona la tecla izda..
2013-12-10 15:49:01 +00:00
{
2013-12-10 16:31:19 +00:00
// Mover a la izquierda
2013-12-10 15:49:01 +00:00
player.body.velocity.x = -150;
player.animations.play('left');
}
2013-12-10 16:31:19 +00:00
else if (cursors.right.isDown) //si se presiona derecha..
2013-12-10 15:49:01 +00:00
{
2013-12-10 16:31:19 +00:00
// Mover a la derecha
2013-12-10 15:49:01 +00:00
player.body.velocity.x = 150;
player.animations.play('right');
}
else
{
2013-12-10 16:31:19 +00:00
// sino, quedarse quieto
2013-12-10 15:49:01 +00:00
player.animations.stop();
player.frame = 4;
}
2013-12-10 16:31:19 +00:00
// Si se presiona la tecla arriba y el jugador está tocando el suelo, que salte
2013-12-10 15:49:01 +00:00
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}
}
function collectStar (player, star) {
2013-12-10 16:31:19 +00:00
// Elimina la estrella del juego
2013-12-10 15:49:01 +00:00
star.kill();
2013-12-10 20:41:33 +00:00
// E incrementa y actualiza la puntuación
2013-12-10 15:49:01 +00:00
score += 10;
scoreText.content = 'Score: ' + score;
}
</script>
</body>
</html>