Un juego que se trata de lo mismo que rave dj's game

Click here for free DL of the app version that can save data.

No:40375

←

Prev Next

→

Un juego que se trata de lo mismo que rave dj
Developer User18058｜Date and time 24/2/2 10:00:21
Build time 15.182 sec｜Game capacity 4.061KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Juego de Rave DJ</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    
    <script>
        // Inicializando variables
        var canvas;
        var canvasContext;
        var ballX = 200;
        var ballY = 300;
        var ballSpeedY = -5;
        var ballRadius = 10;
        var paddleX = 175;
        var paddleWidth = 50;
        var paddleHeight = 10;
        var paddleMoveSpeed = 10;
        var leftKeyPress = false;
        var rightKeyPress = false;
        var score = 0;
        var gameStarted = false;

// Función para manejar la pulsación de teclas
        function keyPressed(keyCode, isDown) {
            if (keyCode === 37) { // Tecla izquierda
                leftKeyPress = isDown;
            } else if (keyCode === 39) { // Tecla derecha
                rightKeyPress = isDown;
            }
        }

// Función para mover la paleta
        function movePaddle() {
            if (leftKeyPress && paddleX > 0) {
                paddleX -= paddleMoveSpeed;
            }
            if (rightKeyPress && paddleX + paddleWidth < canvas.width) {
                paddleX += paddleMoveSpeed;
            }
        }

// Función para iniciar el juego
        function startGame() {
            gameStarted = true;
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext("2d");

// Event listeners para el movimiento de la paleta
            document.addEventListener("keydown", function(event) {
                keyPressed(event.keyCode, true);
            });
            document.addEventListener("keyup", function(event) {
                keyPressed(event.keyCode, false);
            });

// Bucle del juego
            setInterval(function() {
                movePaddle();
                drawEverything();
                moveBall();
            }, 1000 / 30); // 30 FPS
        }

// Función para mover la pelota
        function moveBall() {
            // Rebotar en los bordes horizontales
            if (ballY + ballSpeedY < ballRadius) {
                ballSpeedY = -ballSpeedY;
            } else if (ballY + ballRadius > canvas.height - paddleHeight) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    // Rebotar en la paleta
                    ballSpeedY = -ballSpeedY;
                    score++;
                } else {
                    // Pelota perdida, se reinicia el juego
                    gameStarted = false;
                    alert("¡Has perdido! Puntuación: " + score);
                    score = 0;
                    ballX = 200;
                    ballY = 300;
                }
            }

// Rebotar en los bordes horizontales
            if (ballX < ballRadius || ballX + ballRadius > canvas.width) {
                ballSpeedX = -ballSpeedX;
            }

ballX += ballSpeedX;
            ballY += ballSpeedY;
        }

// Función para dibujar los elementos en el lienzo
        function drawEverything() {
            // Dibujar fondo y paleta
            canvasContext.fillStyle = "black";
            canvasContext.fillRect(0, 0, canvas.width, canvas.height);
            canvasContext.fillStyle = "white";
            canvasContext.fillRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);

// Dibujar pelota
            canvasContext.beginPath();
            canvasContext.arc(ballX, ballY, ballRadius, 0, Math.PI * 2, false);
            canvasContext.fillStyle = "red";
            canvasContext.fill();
            canvasContext.closePath();

// Dibujar puntuación
            canvasContext.font = "20px Arial";
            canvasContext.fillStyle = "white";
            canvasContext.fillText("Puntuación: " + score, 10, 30);
        }
    </script>