The objective of the game is to survive as long as possible, beating your record, as every second you survive you will gain a point. If you beat your previous record, the new one will be saved. The player controls the blue square. To move it, press the left mouse button, or the screen if you are on a mobile device or tablet. Upon pressing, the square will move to a position to its right. The goal is to avoid the falling red squares; if they touch you, you lose.
This game was developed using a library called "Phaser," which is used to create games with JavaScript. The code used to develop it is shown below:
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; }