我是用javascript制作游戏的，但是......我有一个问题。 当您启动html脚本时，您会看到蓝色画布上有一个白色矩形。当你鼠标移动到白色矩形时，游戏开始。但是现在如果你左右走出公路，你就会玩游戏。如果你碰到另一辆车，你会去游戏。
Sooo ..我现在的问题。当你去游戏时，你再次在白色矩形上移动鼠标时，一切都是一样的......当然不会重置。现在我问你们，如果你知道重置所有变量的好方法，或者只是重置游戏的东西。
编辑：我特别谈论如何做，所以我应该使用什么命令
日Thnx
这是在线游戏（某种）：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();
});
答案 0 :(得分：1)
你应该创建一个GameOver函数：
如何删除eventListeners？您需要使用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;
}
然后你的游戏功能将会是这样的：
function GameOver{
ctx.canvas.removeEventListener('mousemove', function(event){
canvasMouseOver(event);
});
ResetGlobalVariables();
}
答案 1 :(得分：0)
只需使用location.reload()重新加载页面。
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}}
});