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.
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.
EDIT: I am specially talking about how to do it, so what mands I should use
Thnx
Here is the game (a sort of) online: .html
This is the javascript part:
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();
});
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.
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.
EDIT: I am specially talking about how to do it, so what mands I should use
Thnx
Here is the game (a sort of) online: http://rekenopjetoekomst.nl/temp/javascript14a.html
This is the javascript part:
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();
});
2 Answers
Reset to default 1You should create a GameOver function that:
- 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
How to remove your eventListeners? You need to use 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();
}
Just reload the page with 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}}
});