Haz al minijuego de pou,beach volley's game

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

No:41168

←

Prev Next

→

Haz al minijuego de pou,beach volley
Developer User18058｜Date and time 24/2/6 12:04:24
Build time 21.537 sec｜Game capacity 6.874KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Minijuego de Pou - Beach Volley</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        canvas {
            background-color: #E0F2F1;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Initialize game components and start the game
        function gameStart() {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext("2d");

// Ball
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedX = -5;
            ballSpeedY = 0;

// Player Paddle
            playerPaddleX = 20;
            playerPaddleY = canvas.height / 2 - 50;
            playerPaddleWidth = 10;
            playerPaddleHeight = 100;

// Computer Paddle
            computerPaddleX = canvas.width - 30;
            computerPaddleY = canvas.height / 2 - 50;
            computerPaddleWidth = 10;
            computerPaddleHeight = 100;

// Paddle Speed
            paddleSpeed = 6;

// Scores
            playerScore = 0;
            computerScore = 0;
            winningScore = 5;

showingWinScreen = false;

canvas.addEventListener("mousemove", function (event) {
                var mousePos = calculateMousePos(event);
                playerPaddleY = mousePos.y - playerPaddleHeight / 2;
            });

setInterval(function () {
                moveEverything();
                drawEverything();
            }, 1000 / 60);
        }

// Helper function to calculate mouse position
        function calculateMousePos(event) {
            var rect = canvas.getBoundingClientRect();
            var root = document.documentElement;
            var mouseX = event.clientX - rect.left - root.scrollLeft;
            var mouseY = event.clientY - rect.top - root.scrollTop;
            return {
                x: mouseX,
                y: mouseY
            };
        }

// Move logic for paddles and ball
        function moveEverything() {
            if (showingWinScreen) {
                return;
            }

computerMovement();

ballX += ballSpeedX;
            ballY += ballSpeedY;

// Ball collision with paddles
            if (ballX < playerPaddleX + playerPaddleWidth &&
                ballX > playerPaddleX &&
                ballY + 10 > playerPaddleY &&
                ballY - 10 < playerPaddleY + playerPaddleHeight) {
                ballSpeedX *= -1;

var deltaY = ballY - (playerPaddleY + playerPaddleHeight / 2);
                ballSpeedY = deltaY * 0.35;
            }

if (ballX > computerPaddleX &&
                ballX < computerPaddleX + computerPaddleWidth &&
                ballY + 10 > computerPaddleY &&
                ballY - 10 < computerPaddleY + computerPaddleHeight) {
                ballSpeedX *= -1;

var deltaY = ballY - (computerPaddleY + computerPaddleHeight / 2);
                ballSpeedY = deltaY * 0.35;
            }

// Ball collision with walls
            if (ballY >= canvas.height || ballY <= 0) {
                ballSpeedY *= -1;
            }

// Score update
            if (ballX > canvas.width) {
                playerScore++;
                ballReset();
            } else if (ballX < 0) {
                computerScore++;
                ballReset();
            }
        }

// Computer AI for paddle movement
        function computerMovement() {
            var computerPaddleYCenter = computerPaddleY + computerPaddleHeight / 2;
            if (computerPaddleYCenter < ballY - 35) {
                computerPaddleY += paddleSpeed;
            } else if (computerPaddleYCenter > ballY + 35) {
                computerPaddleY -= paddleSpeed;
            }
        }

// Ball reset position
        function ballReset() {
            if (playerScore >= winningScore || computerScore >= winningScore) {
                showingWinScreen = true;
            }

ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedX *= -1;
            ballSpeedY = 0;
        }

// Draw everything on canvas
        function drawEverything() {
            // Background
            colorRect(0, 0, canvas.width, canvas.height, "#4DB6AC");

if (showingWinScreen) {
                canvasContext.fillStyle = "#01579B";
                canvasContext.fillText("¡Juego Terminado!", canvas.width / 2 - 70, canvas.height / 2);
                canvasContext.fillText("¡Haz click para jugar de nuevo!", canvas.width / 2 - 140, canvas.height / 2 + 30);
                return;
            }

// Player Paddle
            colorRect(playerPaddleX, playerPaddleY, playerPaddleWidth, playerPaddleHeight, "#388E3C");

// Computer Paddle
            colorRect(computerPaddleX, computerPaddleY, computerPaddleWidth, computerPaddleHeight, "#388E3C");

// Ball
            colorCircle(ballX, ballY, 10, "#F50057");

// Scores
            canvasContext.fillText("Tu puntuación: " + playerScore, 20, 20);
            canvasContext.fillText("Puntuación de la computadora: " + computerScore, canvas.width - 250, 20);
        }

// Helper function to draw rectangles easily
        function colorRect(leftX, topY, width, height, color) {
            canvasContext.fillStyle = color;
            canvasContext.fillRect(leftX, topY, width, height);
        }

// Helper function to draw circles easily
        function colorCircle(centerX, centerY, radius, color) {
            canvasContext.fillStyle = color;
            canvasContext.beginPath();
            canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
            canvasContext.fill();
        }

// Event listener for mouse click to restart the game
        window.onload = function () {
            canvas.addEventListener("click", function () {
                if (showingWinScreen) {
                    playerScore = 0;
                    computerScore = 0;
                    showingWinScreen = false;
                }
            });

gameStart();
        };
    </script>
</body>
</html>