El objetivo del juego es sobrevivir el mayor tiempo posible, superando tu record, ya que por cada segundo que sobrevivas conseguirás un punto y, en caso de superar tu record anterior, el nuevo se guardará. El jugador controla al cuadrado azul. Para moverlo, hay que presionar el botón izquierdo del mouse, o la pantalla si estás en celular o tablet. Al presionarla, el cuadrado se moverá a una posición a su derecha. El objetivo es evitar los cuadrados rojos que caen, ya que si te tocan perderás.
Este juego fue desarrollado mediante una librería llamada "phaser", utilizada para crear juegos con javascript. El codigo utilizado para desarrollarlo se encuentra a continuación:
const ancho = window.innerWidth; const config = { type: Phaser.AUTO, width: 800, height: 600, parent: 'game', physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; if(ancho < 600){ config.height = 150; config.width = ancho - ancho*0.1; } var positions = [100, 250, 400, 550, 700]; // Posiciones en X para la bola if(ancho >600 && ancho < 800){ var anchoUsado = ancho - ancho*0.1; config.width = anchoUsado; config.height = anchoUsado*0.5; positions = [anchoUsado*0.125,anchoUsado*0.3125,anchoUsado *0.5,anchoUsado*0.6875, anchoUsado*0.875]; } var ball; var currentPosition = 0; var bars; var score = 0; var scoreText; var gameOver = false; var highScore = localStorage.getItem('highScore') || 0; var highScoreText; var restartButton; const game = new Phaser.Game(config); function preload() { console.log("preload funciona"); this.load.image('bar', 'link'); // Bola this.load.image('ball', 'link'); // Barra this.load.image('fondo','link'); console.log("preload funciona"); } function create() { var bg = this.add.image(0,0,"fondo").setOrigin(0,0); bg.setScale(3.3); //puntaje maximo highScoreText = this.add.text(16, 48, 'Record: ' + highScore, { fontSize: '32px', fill: '#fff' }); // Crear la bola ball = this.physics.add.sprite(positions[currentPosition], 600, 'ball'); ball.setScale(0.2); ball.setCollideWorldBounds(true); // Crear las barras bars = this.physics.add.group({ key: 'bar', repeat: 3, setXY: { x: 0, y: 600} }); bars.children.iterate(function (bar) { bar.setScale(0.2); if(ancho > 900) bar.setVelocityY(450); else bar.setVelocityY(300); }); // Detectar colisión entre bola y barras this.physics.add.collider(ball, bars, hitBar, null, this); // Contador de puntaje scoreText = this.add.text(16, 16, 'Puntaje: 0', { fontSize: '32px', fill: '#fff' }); // Mover la bola al hacer clic this.input.on('pointerdown', moveBall, this); // Contador de tiempo this.time.addEvent({ delay: 1000, // Cada segundo callback: updateScore, callbackScope: this, loop: true }); // Crear el botón de reinicio (oculto al principio) restartButton = this.add.text(config.width/2, config.height/2, 'Reiniciar', { fontSize: '32px', fill: '#fff' }) .setOrigin(0.5) .setInteractive() .setVisible(false) .on('pointerdown', restartGame, this); restartButton.setStroke('#000', 4); } function update() { if (!gameOver) { bars.children.iterate(function (bar) { if (bar.y > 600) { bar.y = 0; bar.x = positions[Phaser.Math.Between(0, 4)]; } }); } if(ancho < 600){ gameOver = true; highScoreText.setText("requerida(+600px)"); scoreText.setText("Pantalla ancha"); } } function moveBall() { if (!gameOver) { currentPosition = (currentPosition + 1) % 5; // Mover a la derecha, volver al inicio si está en la posición 5 ball.setX(positions[currentPosition]); } } function updateScore() { if (!gameOver) { score += 1; scoreText.setText('Puntaje: ' + score); } } function hitBar() { this.physics.pause(); ball.setTint(0xff0000); gameOver = true; // Actualizar puntaje máximo si el puntaje actual es mayor if (score > highScore) { highScore = score; localStorage.setItem('highScore', highScore); } scoreText.setText('GameOver. Puntaje obtenido: ' + score); highScoreText.setText('Record: ' + highScore); // Actualizar en pantalla // Mostrar el botón de reinicio restartButton.setVisible(true); } function restartGame() { // Reiniciar variables y ocultar el botón de reinicio score = 0; gameOver = false; restartButton.setVisible(false); ball.clearTint(); // Reiniciar la posición de la bola ball.setPosition(positions[currentPosition], 500); ball.body.setGravityY(0); // Asegurar que la bola tenga gravedad en 0 // Destruir el grupo de barras y recrearlo bars.clear(true, true); // Elimina las barras existentes // Crear un nuevo grupo de barras bars = this.physics.add.group({ key: 'bar', repeat: 3, setXY: { x: 0, y: 600 } }); bars.children.iterate(function (bar) { bar.setScale(0.2); if(ancho > 900) bar.setVelocityY(450); else bar.setVelocityY(300); bar.body.setGravityY(0); }); this.physics.add.collider(ball, bars, hitBar, null, this); // Reanudar la física para terminar el gameover this.physics.resume(); this.physics.world.gravity.y = 0; }