如何在 html javascript 飞禽类游戏中添加重启按钮？

Question

The game is done and working but it would be cool to have a restart button instead of refreshing the page every single time.游戏已经完成并且可以运行了，但是如果有一个重启按钮而不是每次都刷新页面会很酷。 I've tried a couple ways but they dont work (or maybe im too dumb xD).我尝试了几种方法，但它们不起作用（或者我可能太笨了 xD）。 Im just starting to learn js so sorry of the code is ugly lol.我刚开始学习 js，很抱歉代码很丑，哈哈。

<!DOCTYPE html>
<html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Fly Block</title>
            <link rel="stylesheet" href="Fly css.css">
        </head>
        <body onload="startGame()">
            <section class="flyblock">
                <div class="hero">
                    <nav>
                        <img src="images/CptFahadTV Games-logos_white.png" class="logo">
                        <ul>
                            <li><a href="index.html">HOME</a></li>
                            <li><a href="Fly Block.html">GAMES</a></li>
                            <li><a href="#">EXPLORE</a></li>
                            <li><a href="#">CONTACT US</a></li>
                        </ul>
                    </nav>
        <script>
        
        var myGamePiece;
        var myObstacles = [];
        var myScore;
        
        function startGame() {
    myGamePiece = new component(30, 30, "crimson", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "white", 280, 40, "text");
    myGameArea.start();
}

        function restartGame() {
    myGamePiece = new component(30, 30, "crimson", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "white", 280, 40, "text");
    myGameArea.start();
        }

        var myGameArea = {
            canvas : document.createElement("canvas"),
            start : function() {
                this.canvas.width = 480;
                this.canvas.height = 270;
                this.context = this.canvas.getContext("2d");
                document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                this.frameNo = 0;
                this.interval = setInterval(updateGameArea, 20);
                },
            clear : function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            }
        }
        
        function component(width, height, color, x, y, type) {
            this.type = type;
            this.score = 0;
            this.width = width;
            this.height = height;
            this.speedX = 0;
            this.speedY = 0;    
            this.x = x;
            this.y = y;
            this.gravity = 0;
            this.gravitySpeed = 0;
            this.update = function() {
                ctx = myGameArea.context;
                if (this.type == "text") {
                    ctx.font = this.width + " " + this.height;
                    ctx.fillStyle = color;
                    ctx.fillText(this.text, this.x, this.y);
                } else {
                    ctx.fillStyle = color;
                    ctx.fillRect(this.x, this.y, this.width, this.height);
                }
            }
            this.newPos = function() {
                this.gravitySpeed += this.gravity;
                this.x += this.speedX;
                this.y += this.speedY + this.gravitySpeed;
                this.hitBottom();
            }
            this.hitBottom = function() {
                var rockbottom = myGameArea.canvas.height - this.height;
                if (this.y > rockbottom) {
                    this.y = rockbottom;
                    this.gravitySpeed = 0;
                }
            }
            this.crashWith = function(otherobj) {
                var myleft = this.x;
                var myright = this.x + (this.width);
                var mytop = this.y;
                var mybottom = this.y + (this.height);
                var otherleft = otherobj.x;
                var otherright = otherobj.x + (otherobj.width);
                var othertop = otherobj.y;
                var otherbottom = otherobj.y + (otherobj.height);
                var crash = true;
                if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
                    crash = false;
                }
                return crash;
            }
        }
        
        function updateGameArea() {
            var x, height, gap, minHeight, maxHeight, minGap, maxGap;
            for (i = 0; i < myObstacles.length; i += 1) {
                if (myGamePiece.crashWith(myObstacles[i])) {
                    return;
                } 
            }
            myGameArea.clear();
            myGameArea.frameNo += 1;
            if (myGameArea.frameNo == 1 || everyinterval(150)) {
                x = myGameArea.canvas.width;
                minHeight = 20;
                maxHeight = 200;
                height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
                minGap = 50;
                maxGap = 200;
                gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
                myObstacles.push(new component(10, height, "green", x, 0));
                myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
            }
            for (i = 0; i < myObstacles.length; i += 1) {
                myObstacles[i].x += -1;
                myObstacles[i].update();
            }
            myScore.text="SCORE: " + myGameArea.frameNo;
            myScore.update();
            myGamePiece.newPos();
            myGamePiece.update();
        }
        
        function everyinterval(n) {
            if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
            return false;
        }
        
        function accelerate(n) {
            myGamePiece.gravity = n;
        }
        </script>
        <br>
        <div class="button">
        <button class="button" onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">JUMP</button>
        </div>
        <div class="button2">
        <button onclick="restartGame()">RESTART</button>
        </div>
        </body>
        </html>

The actual buttons are at the very bottom if it matters.如果重要，实际按钮位于最底部。 Thanks for the help <3.感谢您的帮助<3。

Answer 1

Try to add this:尝试添加这个：

<script>const pagecode = document.documentElement.innerHtml;</script>    
    
<button onclick="document.documentElement.innerHtml = ''; document.documentElement.innerHtml = pagecode; startGame()">Restart</button>

(Nice game! 😀) （好游戏！😀）

如何在 html javascript 飞禽类游戏中添加重启按钮？

问题描述

1 个解决方案

解决方案1
0 2022-07-06 11:01:46

如何在 html javascript 飞禽类游戏中添加重启按钮？

问题描述

1 个解决方案

解决方案1 0 2022-07-06 11:01:46

解决方案1
0 2022-07-06 11:01:46