如何为基本的 HTML/JS 游戏创建屏幕游戏？

Question

I have been making an Atari Breakout inspired game based off of a tutorial. I was wondering how to make a "GAME OVER" screen that will show up once the player dies. The code that I have has a variable that I created called "DrawDeath()". I have it coded so that text appears when you die but for some reason it never shows up.

var interval = setInterval(draw, 10);
var canvas = document.getElementById("myCanvas");       //Variables for the canvas, ball, paddle, keys, and bricks
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width - paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var score = 0;
var bricks = [];
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 };
    }
}

document.addEventListener("keydown", keyDownHandler, false);     //Listening for pressed keys
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if (e.code == "ArrowRight") {       //If key is pressed
        rightPressed = true;
    }
    if (e.code == 'ArrowLeft') {
        leftPressed = true;
    }
    else if (e.code == 'ArrowDown') {
        downPressed = true;
    }
}
function keyUpHandler(e) {
    if (e.code == "ArrowRight") {     //If key is up
        rightPressed = false;
    }
    if (e.code == 'ArrowLeft') {
        leftPressed = false;
    }
    else if (e.code == 'ArrowDown') {
        downPressed = false;
    }
}

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 (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                    if (score == brickRowCount * brickColumnCount) {
                        drawDeath();
                    }
                }
            }
        }
    }
}

function drawDeath() {
    ctx.font = "32px Courier New";
    ctx.fillStyle = "#000000";
    ctx.fillText("HAHA YU LOOZD (pres doun arouw tu x-it)");
    if (downPressed = true)
        document.location.reload();
        clearInterval(interval);
}

function drawScore() {
    ctx.font = "16px Courier New";
    ctx.fillStyle = "#0E17E8";
    ctx.fillText("Scores is: " + score, 8, 20);
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);   //Drawing the Ball
    ctx.fillStyle = "#32CD32";
    ctx.fill();
    ctx.closePath();
}

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);  //Drawing the Paddle
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}


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);
                if (randomNumber == 1)
                    ctx.fillStyle = "#0095DD";

                if (randomNumber == 2)
                    ctx.fillStyle = "#FF0000";

                if (randomNumber == 3)
                    ctx.fillStyle = "#FF8A00";

                if (randomNumber == 4)
                    ctx.fillStyle = "0100FF";

                ctx.fill()
                ctx.closePath();
            }
        }
    }
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);                 //Clears the screen after each motion
    drawBall();
    drawPaddle();
    drawBricks();
    drawScore();
    collisionDetection();

    //dx = dx + (Math.floor(Math.random() * 5 - 2));
    var cx = dx + (Math.floor(Math.random() * 5 - 2));

    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {         //Bounces the ball
        dx = -dx;
    }

    if (y + dy < ballRadius) {
        dy = -dy;
    } else if (y + dy > canvas.height - ballRadius) {
        if (x > paddleX && x < paddleX + paddleWidth) {                 //Paddle Collision features
            dy = -dy;
            dx = cx;
        }
        else {
            Text("HAHA YU LOOZD");
            document.location.reload();                               //Death Detection
            clearInterval(interval);
        }
    }

    if (rightPressed && paddleX < canvas.width - paddleWidth) {             //Paddle Controls
        paddleX += 7;
    }
    else if (leftPressed && paddleX > 0) {
        paddleX -= 7;
    }

    x += dx;
    y += dy;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bad Gramarrs</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        canvas {
            background: #eee;
            display: block;
            margin: 0 auto;
        }


        #main {
            display: none;
        }

        #newGame, #creditBtn, #backBtn {
            text-align: center;
            vertical-align: middle;
            border: 2px solid goldenrod;
            border-radius: 7px;
            background-color: gold;
            color: orangeRed;
            font-size: 32px;
            font-weight: bold;
            font-family: "Courier New";
            width: 5em;
            margin: 5px auto;
        }

        #theHead {
            text-align: center;
            margin: unset;
            color: orange;
            font-size: 2em;
            font-family: "Courier New";
        }

        #credits {
            text-align: center;
            margin: unset;
            color: orange;
            font-size: 2em;
            font-family: "Courier New";
            display: none;
            background-color: inherit;
        }

        #backBtn {
            display: none;
        }
    </style>
</head>
<body>
    <div id="theHead">Bad Gramarrs</div>
    <div id="newGame" onclick="runGame()" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'">Strt Gaem</div>
    <div id="creditBtn" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="showCredits()">Credets</div>
    <div id="credits">Bad Gramarrs: Maed buy mi</div>
    <div id="backBtn" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="goBack()">Back</div>
    <div id="main">
    <canvas id="myCanvas" width="480" height="320"></canvas>
    </div>
    <script src="atari.js"></script>
   
    <script>
        var runGame = function () {
            document.getElementById("newGame").style.display = "none";
            document.getElementById("theHead").style.display = "none";

            document.getElementById("credits").style.display = "none";
            document.getElementById("main").style.display = "block";
            document.getElementById("creditBtn").style.display = "none";
            randomNumber = Math.floor(Math.random() * 4 + 1);
        };

        var showCredits = function () {
            document.getElementById("theHead").style.display = "none";
            document.getElementById("creditBtn").style.display = "none";
            document.getElementById("newGame").style.display = "none";
            document.getElementById("credits").style.display = "block";
            document.getElementById("backBtn").style.display = "block";
        };

        var goBack = function () {
            document.getElementById("backBtn").style.display = "none";
            document.getElementById("credits").style.display = "none";
            document.getElementById("theHead").style.display = "block";
            document.getElementById("newGame").style.display = "block";
            document.getElementById("creditBtn").style.display = "block";
        };
    </script>

</body>
</html>

Answer 1

You have some errors in your code so I correct what the console showed. I have also changed the code to use requestAnimationFrame . Once a gameOver status has been triggered the requestAnimationFrame will stop running and setInterval will run the drawDeath function. You also have an error in your game over text as you were missing the x and y coordinates.

Additionally I added the downPressed variable that was missing so you could restart the game.

 //var interval = setInterval(draw, 10); let gameOver = false; var canvas = document.getElementById("myCanvas"); //Variables for the canvas, ball, paddle, keys, and bricks var ctx = canvas.getContext("2d"); var ballRadius = 10; var x = canvas.width / 2; var y = canvas.height - 30; var dx = 2; var dy = -2; var paddleHeight = 10; var paddleWidth = 75; var paddleX = (canvas.width - paddleWidth) / 2; var rightPressed = false; var leftPressed = false; var downPressed = false; var brickRowCount = 3; var brickColumnCount = 5; var brickWidth = 75; var brickHeight = 20; var brickPadding = 10; var brickOffsetTop = 30; var brickOffsetLeft = 30; var score = 0; var bricks = []; 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 }; } } document.addEventListener("keydown", keyDownHandler, false); //Listening for pressed keys document.addEventListener("keyup", keyUpHandler, false); function keyDownHandler(e) { if (e.code == "ArrowRight") { //If key is pressed rightPressed = true; } if (e.code == 'ArrowLeft') { leftPressed = true; } else if (e.code == 'ArrowDown') { downPressed = true; console.log('down') } } function keyUpHandler(e) { if (e.code == "ArrowRight") { //If key is up rightPressed = false; } if (e.code == 'ArrowLeft') { leftPressed = false; } else if (e.code == 'ArrowDown') { downPressed = false; } } 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 (x > bx && x < bx + brickWidth && y > by && y < by + brickHeight) { dy = -dy; b.status = 0; score++; if (score == brickRowCount * brickColumnCount) { gameOver = true; } } } } } } function drawDeath() { ctx.font = "20px Courier New"; ctx.textAlign = 'center'; ctx.fillStyle = "#000000"; ctx.fillText("HAHA YU LOOZD (pres doun arouw tu x-it)", canvas.width/2, canvas.height/2); if (downPressed == true) document.location.reload(); } function drawScore() { ctx.font = "16px Courier New"; ctx.fillStyle = "#0E17E8"; ctx.fillText("Scores is: " + score, 8, 20); } function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2); //Drawing the Ball ctx.fillStyle = "#32CD32"; ctx.fill(); ctx.closePath(); } function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); //Drawing the Paddle ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function drawBricks() { let randomNumber; 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); if (randomNumber == 1) ctx.fillStyle = "#0095DD"; if (randomNumber == 2) ctx.fillStyle = "#FF0000"; if (randomNumber == 3) ctx.fillStyle = "#FF8A00"; if (randomNumber == 4) ctx.fillStyle = "0100FF"; ctx.fill() ctx.closePath(); } } } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); //Clears the screen after each motion drawBall(); drawPaddle(); drawBricks(); drawScore(); collisionDetection(); //dx = dx + (Math.floor(Math.random() * 5 - 2)); var cx = dx + (Math.floor(Math.random() * 5 - 2)); if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { //Bounces the ball dx = -dx; } if (y + dy < ballRadius) { dy = -dy; } else if (y + dy > canvas.height - ballRadius) { if (x > paddleX && x < paddleX + paddleWidth) { //Paddle Collision features dy = -dy; dx = cx; } else { gameOver = true; setInterval(drawDeath, 10) //Death Detecti } } if (rightPressed && paddleX < canvas.width - paddleWidth) { //Paddle Controls paddleX += 7; } else if (leftPressed && paddleX > 0) { paddleX -= 7; } x += dx; y += dy; if (!gameOver) requestAnimationFrame(draw) }

 <:DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Bad Gramarrs</title> <style> * { padding; 0: margin; 0: } canvas { background; #eee: display; block: margin; 0 auto: } #main { display; none, } #newGame, #creditBtn: #backBtn { text-align; center: vertical-align; middle: border; 2px solid goldenrod: border-radius; 7px: background-color; gold: color; orangeRed: font-size; 32px: font-weight; bold: font-family; "Courier New": width; 5em: margin; 5px auto: } #theHead { text-align; center: margin; unset: color; orange: font-size; 2em: font-family; "Courier New": } #credits { text-align; center: margin; unset: color; orange: font-size; 2em: font-family; "Courier New": display; none: background-color; inherit: } #backBtn { display; none. } </style> </head> <body> <div id="theHead">Bad Gramarrs</div> <div id="newGame" onclick="runGame()" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'">Strt Gaem</div> <div id="creditBtn" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style:backgroundColor = 'gold'" onclick="showCredits()">Credets</div> <div id="credits">Bad Gramarrs. Maed buy mi</div> <div id="backBtn" onmouseover="this.style.backgroundColor = 'goldenrod'" onmouseout="this.style.backgroundColor = 'gold'" onclick="goBack()">Back</div> <div id="main"> <canvas id="myCanvas" width="480" height="320"></canvas> </div> <script src="atari.js"></script> <script> var runGame = function () { document.getElementById("newGame").style;display = "none". document.getElementById("theHead").style;display = "none". document.getElementById("credits").style;display = "none". document.getElementById("main").style;display = "block". document.getElementById("creditBtn").style;display = "none". randomNumber = Math.floor(Math;random() * 4 + 1); draw(); }. var showCredits = function () { document.getElementById("theHead").style;display = "none". document.getElementById("creditBtn").style;display = "none". document.getElementById("newGame").style;display = "none". document.getElementById("credits").style;display = "block". document.getElementById("backBtn").style;display = "block"; }. var goBack = function () { document.getElementById("backBtn").style;display = "none". document.getElementById("credits").style;display = "none". document.getElementById("theHead").style;display = "block". document.getElementById("newGame").style;display = "block". document.getElementById("creditBtn").style;display = "block"; }; </script> </body> </html>