游戏结束后重置 javascript 游戏的最佳方法，以及如何
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28744682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The best way to reset your javascript game after gameover, and how
提问by Thomas Pereira
I am a sort of making a game in javascript, but.. I have a problem. When you start the html script you see blue canvas with a white rectangle on it. When you mousemove over the white rect the game starts. But now you will go gameover if you go left and right beyond the road. And you go gameover if you hit another car.
我是在用 javascript 制作游戏，但是.. 我有一个问题。当您启动 html 脚本时，您会看到带有白色矩形的蓝色画布。当您将鼠标移到白色矩形上时，游戏开始。但是现在，如果您在道路之外向左和向右走，您将进入游戏结束。如果你撞到另一辆车，你就会游戏结束。
Sooo.. My problem now. When you go gameover and you mousemove again over the white rectangle everything is still the same.. It is not reset of course. Now I am asking you guys if you know a good way to reset all the variables, or just something to reset the game.
Sooo..我现在的问题。当您进行游戏结束并且您再次将鼠标移动到白色矩形上时，一切仍然相同。当然，它不会重置。现在我问你们是否知道重置所有变量的好方法，或者只是重置游戏的方法。
EDIT: I am specially talking about how to do it, so what commands I should use
编辑：我特别在谈论如何做，所以我应该使用什么命令
Thnx
谢谢
Here is the game (a sort of) online: http://rekenopjetoekomst.nl/temp/javascript14a.html
这是在线游戏（一种）：http: //rekenopjetoekomst.nl/temp/javascript14a.html
This is the javascript part:
这是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();
});
采纳答案by kemicofa ghost
You should create a GameOver function that:
您应该创建一个 GameOver 函数：
- Resets all your global variables
- Removes all your EventListeners ( seeing you have two you don't really have to make a list to loop through all of them )
- Calls the main game function when the player is ready to start again
- 重置所有全局变量
- 删除您所有的 EventListeners（看到您有两个，您实际上不必制作一个列表来遍历所有这些）
- 当玩家准备好重新开始时调用主游戏函数
How to remove your eventListeners? You need to use removeEventListener.
如何删除你的事件监听器？您需要使用 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
}
So now you need to reset all your global variables:
所以现在您需要重置所有全局变量：
//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;
}
Then your game over function will look something like this:
然后你的游戏结束功能看起来像这样：
function GameOver{
ctx.canvas.removeEventListener('mousemove', function(event){
canvasMouseOver(event);
});
ResetGlobalVariables();
}
回答by Baris Akar
Just reload the page with location.reload().
只需重新加载页面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...
reload() 方法的作用与浏览器中的重新加载按钮相同。
默认情况下，reload() 方法从缓存中重新加载页面...
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}}
});
