Breakout with title screen's game

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

No:19607

←

Prev Next

→

Breakout with title screen
Developer User8620｜Date and time 23/10/5 2:00:23
Build time 45.085 sec｜Game capacity 8.021KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Breakout</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #f2f2f2;
            display: block;
            margin: 0 auto;
            cursor: none;
        }
    </style>
</head>
<body>
    <script>
        // Ressources graphiques
        var paddleImg = new Image();
        paddleImg.src = "https://www.example.com/paddle.png";
        var ballImg = new Image();
        ballImg.src = "https://www.example.com/ball.png";

// Variables du jeu
        var canvas;
        var ctx;
        var paddle;
        var ball;
        var bricks = [];
        var score = 0;
        var lives = 3;
        var gameOver = false;
        var gameStarted = false;
        var interval;

// Dimensions et positions initiales
        var paddleWidth = 80;
        var paddleHeight = 10;
        var paddleX;
        var ballRadius = 8;
        var ballX;
        var ballY;
        var ballDX;
        var ballDY;
        var brickRowCount = 3;
        var brickColumnCount = 5;
        var brickWidth = 75;
        var brickHeight = 20;
        var brickPadding = 10;
        var brickOffsetTop = 30;
        var brickOffsetLeft = 30;

// Gestion des touches
        var rightPressed = false;
        var leftPressed = false;

// Initialisation du jeu
        function init() {
            canvas = document.createElement("canvas");
            canvas.width = 320;
            canvas.height = 480;
            ctx = canvas.getContext("2d");
            document.body.appendChild(canvas);

paddleX = (canvas.width - paddleWidth) / 2;
            ballX = canvas.width / 2;
            ballY = canvas.height - 30;
            ballDX = 2;
            ballDY = -2;

// Création des briques
            for (var c = 0; c < brickColumnCount; c++) {
                bricks[c] = [];
                for (var r = 0; r < brickRowCount; r++) {
                    bricks[c][r] = { x: 0, y: 0, status: 1 };
                }
            }

// Gestion des actions du joueur
            document.addEventListener("keydown", keyDownHandler, false);
            document.addEventListener("keyup", keyUpHandler, false);

// Animation du jeu
            interval = setInterval(draw, 10);
        }

// Dessin du paddle
        function drawPaddle() {
            ctx.drawImage(paddleImg, paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        }

// Dessin de la balle
        function drawBall() {
            ctx.drawImage(ballImg, ballX - ballRadius, ballY - ballRadius, ballRadius * 2, ballRadius * 2);
        }

// Dessin des briques
        function drawBricks() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].status == 1) {
                        var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
                        var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
                        bricks[c][r].x = brickX;
                        bricks[c][r].y = brickY;
                        ctx.beginPath();
                        ctx.rect(brickX, brickY, brickWidth, brickHeight);
                        ctx.fillStyle = "#0095DD";
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
        }

// Gestion des touches pressées et relâchées
        function keyDownHandler(e) {
            if (e.key == "Right" || e.key == "ArrowRight") {
                rightPressed = true;
            }
            else if (e.key == "Left" || e.key == "ArrowLeft") {
                leftPressed = true;
            }
        }

function keyUpHandler(e) {
            if (e.key == "Right" || e.key == "ArrowRight") {
                rightPressed = false;
            }
            else if (e.key == "Left" || e.key == "ArrowLeft") {
                leftPressed = false;
            }
        }

// Collision entre la balle et les briques
        function collisionDetection() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    var b = bricks[c][r];
                    if (b.status == 1) {
                        if (ballX >= b.x && ballX <= b.x + brickWidth && ballY >= b.y && ballY <= b.y + brickHeight) {
                            ballDY = -ballDY;
                            b.status = 0;
                            score++;
                            if (score == brickRowCount * brickColumnCount) {
                                gameOver = true;
                                clearInterval(interval);
                                alert("Vous avez gagné !");
                            }
                        }
                    }
                }
            }
        }

// Dessin du score et du nombre de vies
        function drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Score: " + score, 8, 20);
        }

function drawLives() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Vies: " + lives, canvas.width - 65, 20);
        }

// Dessin principal
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            drawScore();
            drawLives();
            collisionDetection();
            
            // Mouvement du paddle
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7;
            }
            else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }

// Mouvement de la balle
            ballX += ballDX;
            ballY += ballDY;

// Rebond sur les bords horizontaux
            if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
                ballDX = -ballDX;
            }
            // Rebond sur le bord supérieur
            if (ballY + ballDY < ballRadius) {
                ballDY = -ballDY;
            }
            // Rebond sur le paddle
            else if (ballY + ballDY > canvas.height - ballRadius - paddleHeight) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    ballDY = -ballDY;
                }
                else {
                    lives--;
                    if (!lives) {
                        gameOver = true;
                        clearInterval(interval);
                        alert("Game Over");
                    }
                    else {
                        ballX = canvas.width / 2;
                        ballY = canvas.height - 30;
                        ballDX = 2;
                        ballDY = -2;
                        paddleX = (canvas.width - paddleWidth) / 2;
                    }
                }
            }

// Redessiner le canvas à chaque frame
            if (!gameOver) {
                requestAnimationFrame(draw);
            }
        }

// Lancer le jeu au chargement de la page
        window.onload = function() {
            var startButton = document.createElement("button");
            startButton.innerHTML = "Start";
            startButton.style.position = "absolute";
            startButton.style.top = "50%";
            startButton.style.left = "50%";
            startButton.style.transform = "translate(-50%, -50%)";
            startButton.onclick = function() {
                document.body.removeChild(startButton);
                gameStarted = true;
                init();
            };
            document.body.appendChild(startButton);
        };
    </script>
</body>
</html>