游戏结束后重置 javascript 游戏的最佳方法，以及如何

Question

我正在 javascript 制作游戏，但是..我有一个问题。当您启动 html 脚本时，您会看到带有白色矩形的蓝色 canvas。当您将鼠标移到白色矩形上时，游戏开始。但是现在，如果您向左或向右超出道路，您将游戏结束。如果你撞到另一辆车，你就结束游戏。

Sooo..我现在的问题。当你 gameover 并再次将鼠标移动到白色矩形上时，一切仍然相同。当然它不会被重置。现在我问你们是否知道重置所有变量的好方法，或者只是重置游戏的方法。

编辑：我特地讲一下怎么做，那么我应该用什么命令

谢谢

这是在线游戏（一种）：http://rekenopjetoekomst.nl/temp/javascript14a.html

这是 javascript 部分：

var autoafb1 = new Image();
var autoafb2 = new Image();
var autoafb3 = new Image();
var autoafb4 = new Image();
var bg = new Image();   
autoafb1.src = "auto2.png";
autoafb2.src = "auto3.png";
autoafb3.src = "auto4.png";
autoafb4.src = "auto5.png";
bg.src = "snelweg.png";

function Canvas(){
    var ctx = document.getElementById('my_canvas').getContext('2d');
    var snelheid = 1

    //var autos = [{"src":autoafb1, "w":100, "h":175, "y":0+175, "x":Math.floor(Math.random()*450-100)+1, "plusafst":0},
        //       {"src":autoafb2, "w":100, "h":175, "y":0+175, "x":Math.floor(Math.random()*450-100)+1, "plusafst":0.5},
            //   {"src":autoafb3, "w":100, "h":175, "y":0+175, "x":Math.floor(Math.random()*450-100)+1, "plusafst":1},
                // {"src":autoafb4, "w":100, "h":175, "y":0+175, "x":Math.floor(Math.random()*450-100)+1, "plusafst":1.5}]

    function Menu() {
        this.x=0, this.y=0, this.w=ctx.canvas.width, this.h=ctx.canvas.height, this.color="blue", this.count=1, this.value="on";
        this.stattX,this.stattY,this.blokx=(ctx.canvas.width*0.5)-(100*0.5), this.bloky=(ctx.canvas.height*0.5)-(100*0.5), this.blokw=100, this.blokh=100;
        this.draw = function(){

            ctx.fillStyle = this.color;
            ctx.fillRect(this.x,this.y,this.w,this.h);
            ctx.fillStyle = "white";
            ctx.fillRect(this.blokx,this.bloky,this.blokw,this.blokh);

            if(this.stattX>this.blokx && this.stattX<this.blokx+this.blokw && this.stattY>this.bloky && this.stattY<this.bloky+this.blokh){this.value="off"}

            //this.count = this.count+1;
            //if(this.count>200){this.value="off"}
        }
    }

    function auto() {
        this.h = 175, this.w = 100, this.x = (ctx.canvas.width*0.5)-(this.w*0.5), this.y = (ctx.canvas.height-this.h)-(this.h*0.5), this.color = "Blue", this.afst = 10, this.gameover=0;
        this.draw = function() {
            //ctx.fillStyle = this.color;
            //ctx.fillRect(this.x,this.y,this.w,this.h);
            ctx.drawImage(autoafb1,this.x,this.y,this.w,this.h);
        }
        this.gameover = function() {
            if(this.x<0){Menu.value="on"}
            if(this.x>ctx.canvas.width-this.w){Menu.value="on"}
            if(this.y<0){this.y=0}
            if(this.y>ctx.canvas.height-this.h){this.y=ctx.canvas.height-this.h}
            for(var i=0; i < tegenauto.autos.length; i++){
                var b = this
                var c = tegenauto.autos[i]
                if(b.x>c.x && b.x<c.x+c.w && b.y>=c.y && b.y<=c.y+c.h){Menu.value="on"}
                if(b.x+b.w>c.x && b.x+b.w<c.x+c.w && b.y>c.y && b.y<c.y+c.h)(Menu.value="on")
                if(b.x>c.x && b.x<c.x+c.w && b.y+b.h>c.y && b.y+b.h<c.y+c.h)(Menu.value="on")
                if(b.x+b.w>c.x && b.x+b.w<c.x+c.w && b.y+b.h>c.y && b.y+b.h<c.y+c.h)(Menu.value="on")
            }
        }
    }

    function background() {
        this.w = ctx.canvas.width, this.h = 1162, this.x = 0, this.y = (this.h*-1)+ctx.canvas.height, this.sec = 1;
        this.draw = function() {
            this.sec = this.sec+1;
            this.afst = 0.001*(this.sec^0.5)
            this.y = this.y+this.afst;
            if(this.y>0){this.y = -1124+ctx.canvas.height};
            ctx.drawImage(bg,this.x,this.y,this.w,this.h);
            document.getElementById("afst").innerHTML = this.afst;
            //document.getElementById("sec").innerHTML = this.sec;
        }
    }

    function tegenauto() {
        this.h = 175, this.w = 100, this.x = 100, this.y = 0-this.h, this.color = "red", this.random=0, this.afst = background.afst, this.sec=1, this.autos = [];
        this.draw = function() {
            //bepalen of een auto
            this.random = Math.floor(Math.random()*8-1)+2
            if(this.random==1){
                //bepalen welke auto
                this.random = Math.floor(Math.random() * 100) + 1;
                if(this.random==1){this.autos.push({"src":autoafb1, "w":100, "h":175, "y":0-175, "x":Math.floor(Math.random()*450-100)+1, "plusafst":0})}
                if(this.random==2){this.autos.push({"src":autoafb2, "w":100, "h":175, "y":0-175, "x":Math.floor(Math.random()*450-100)+1, "plusafst":0.5})}
                if(this.random==3){this.autos.push({"src":autoafb3, "w":100, "h":175, "y":0-175, "x":Math.floor(Math.random()*350-100)+1, "plusafst":1})}
                if(this.random==4){this.autos.push({"src":autoafb4, "w":100, "h":175, "y":0-175, "x":Math.floor(Math.random()*450-100)+1, "plusafst":1.5})}
            }

            //maken van autos
            for(var i=0; i < this.autos.length; i++){
            var n = this.autos[i];
            n.y=n.y+2+n.plusafst
            ctx.drawImage(n.src,n.x,n.y,n.w,n.h);
            if(n.y > 1000) {this.autos.splice(i,1)}
            }

            //verzet positie


            this.sec = this.sec+1;
            //this.afst = 0.001*(this.sec^0.5)+0.4
            //this.y=this.y+this.afst
            //teken de auto
            //ctx.fillStyle = this.color;
            //ctx.fillRect(this.x,this.y,this.w,this.h);
            //ctx.drawImage(autoafb1,this.x,this.y,this.w,this.h);
        }
    }

    function gameover() {
        this.draw = function(){
            ctx.font = "60px Arial"
            ctx.fillStyle = "Black"
            ctx.fillText("GAMEOVER!!!",20,100)
            clearInterval(animateInterval);
        }
    }

    var Menu = new Menu();
    var auto = new auto();
    var background = new background();
    var tegenauto = new tegenauto();
    var gameover = new gameover();

    function draw() {
        ctx.save();
        ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
        //draw

        if(Menu.value=="on"){Menu.draw();}

        if(Menu.value=="off"){
            background.draw();
            auto.draw();
            tegenauto.draw();
            auto.gameover();
        }
        if(auto.gameover==1){gameover.draw();}
        ctx.restore();
    }

    var animateInterval = setInterval(draw,snelheid);

    ctx.canvas.addEventListener('mousemove', function(event){
        auto.x = event.clientX-(auto.w*0.5)
        auto.y = event.clientY-(auto.h*0.5)
        Menu.stattX = event.clientX
        Menu.stattY = event.clientY

    });

    document.addEventListener('keydown', function(event) {
        var key_press = String.fromCharCode(event.keyCode);
        //alert(event.keyCode+" | "+key_press);
        if(event.keyCode == 37) { auto.x -= auto.afst}
        if(event.keyCode == 39) { auto.x += auto.afst}
        if(event.keyCode == 38) { if(auto.y+(auto.h*0.65)>ctx.canvas.height*0.2){auto.y -= auto.afst}}
        if(event.keyCode == 40) { if(auto.y+(auto.h*0.65)<ctx.canvas.height*0.9){auto.y += auto.afst}}
    });
}

window.addEventListener('load', function(event) {
    Canvas();
});

Answer 1

只需使用 location.reload() 重新加载页面即可。

The reload() method does the same as the reload button in your browser.

By default, the reload() method reloads the page from the cache...

function gameover() {
    this.draw = function(){
        ctx.font = "60px Arial"
        ctx.fillStyle = "Black"
        ctx.fillText("GAMEOVER!!! Press Enter to retry!",20,100)
        clearInterval(animateInterval);
    }

    isGameOver = true;

}

ctx.canvas.addEventListener('mousemove', function(event){

    if(isGameOver !== true) {

        auto.x = event.clientX-(auto.w*0.5)
        auto.y = event.clientY-(auto.h*0.5)
        Menu.stattX = event.clientX
        Menu.stattY = event.clientY
    }
});

document.addEventListener('keydown', function(event) {
    var key_press = String.fromCharCode(event.keyCode);
    //alert(event.keyCode+" | "+key_press);

    if(event.keyCode == 13) { location.reload(); }

    if(event.keyCode == 37) { auto.x -= auto.afst}
    if(event.keyCode == 39) { auto.x += auto.afst}
    if(event.keyCode == 38) { if(auto.y+(auto.h*0.65)>ctx.canvas.height*0.2){auto.y -= auto.afst}}
    if(event.keyCode == 40) { if(auto.y+(auto.h*0.65)<ctx.canvas.height*0.9){auto.y += auto.afst}}
});

Answer 2

您应该创建一个 GameOver 函数：

重置所有全局变量
删除您所有的 EventListener（看到您有两个，您实际上不必制作一个列表来遍历所有 EventListener）
当玩家准备好再次开始时调用主游戏函数

如何删除您的事件监听器？您需要使用 removeEventListener。

ctx.canvas.addEventListener('mousemove', function(event){
    canvasMouseOver(event);
});
ctx.canvas.removeEventListener('mousemove', function(event){
    canvasMouseOver(event);
});
function canvasMouseover(event){
    auto.x = event.clientX-(auto.w*0.5)
    auto.y = event.clientY-(auto.h*0.5)
    Menu.stattX = event.clientX
    Menu.stattY = event.clientY
}

所以现在您需要重置所有全局变量：

//Do this initially and call the ResetGlobalVariables at the start to set them properly
//initialize all variables here. Don't set anything to them.
var example1, example2, example3;
ResetGlobalVariables();

function ResetGlobalVariables(){
   //list of all the variables with original attributes here
   example1 = 1;
   example2 = 2;
   example3 = 3;
}

然后你的 game over 函数看起来像这样：

function GameOver{
    ctx.canvas.removeEventListener('mousemove', function(event){
        canvasMouseOver(event);
    });
    ResetGlobalVariables();
}

游戏结束后重置 javascript 游戏的最佳方法，以及如何

The best way to reset your javascript game after gameover, and how

javascript

canvas

reset