I have made a simple game and it's almost done, the only thing I have left is to make the game restart when I press Enter. Now the game starts when I press Enter but it doesn't restart.
Can someone help me please?
this is the code that starts the game
document.onkeydown = function tast (e) {
if (e.keyCode == 39) { // høyre
høyre = 1;
}
if (e.keyCode == 37) { // venstre
venstre = 1;
}
if (e.keyCode == 38) { // opp
opp = 1;
}
if (e.keyCode == 40) { // ned
ned = 1;
}
if(e.keyCode == 32) {
newskudd();
snd.play();
console.log("hit space")
}
if(e.keyCode == 13){
spill();
}
}
to see a demo click the link DEMO
the spill(); function is
function spill() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < kuler.length; i++) {
kuler[i].x += 0;
kuler[i].y += kuler[i].dy;
ctx.fillStyle = kuler[i].f;
ctx.beginPath();
ctx.arc(kuler[i].x, kuler[i].y, kuler[i].r, 2*Math.PI, 0);
ctx.closePath();
ctx.fill();
if (venstre == 1){
kuler[0].x -= 4;
}
if (høyre == 1){
kuler[0].x += 4;;
}
if (opp == 1){
kuler[0].y -= 4;
}
if (ned == 1){
kuler[0].y += 4;
}
if (kuler[0].x >= canvas.width-kuler[0].r) {
kuler[0].x = canvas.width-kuler[0].r
};
if (kuler[0].x <= 0+kuler[0].r) {
kuler[0].x = 0+kuler[0].r
};
if (kuler[0].y >= canvas.height-kuler[0].r) {
kuler[0].y = canvas.height-kuler[0].r
};
if (kuler[0].y <= 0+kuler[0].r) {
kuler[0].y = 0+kuler[0].r
};
for (var j = 0; j < fiender.length; j++) {
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(fiender[j].x, fiender[j].y, fiender[j].r, 2*Math.PI, 0);
ctx.closePath();
ctx.fill();
fiender[j].y += fiender[j].vy;
if (fiender[j].x >= canvas.width -fiender[j].r) {
fiender[j].x =canvas.width - fiender[j].r;
};
if (fiender[j].x <= 0 + fiender[j].r) {
fiender[j].x =0 + fiender[j].r;
};
if (fiender[j].vy >= 2) {
fiender[j].vy = 2;
};
/*if (fiender[j].y + fiender[j].r >= kuler[i].y && fiender[j].x + fiender[j]. == kuler[i].x) { // remove kuler[i] and fiender[j] }
fiender.splice(j, 1);
kuler.splice(i,1);
};*/
var distanceFromCenters = Math.sqrt(Math.pow(Math.abs(fiender[j].x - kuler[i].x),2) + Math.pow(Math.abs(fiender[j].y - kuler[i].y),2 )); // you have a collision
if (distanceFromCenters <= (fiender[j].r + kuler[i].r)) {
fiender.splice(j, 1);
kuler.splice(i,1);
poeng += 1;
} else if (fiender[j].y > canvas.height) {
fiender.splice(j,1)
}
if(j > 1){
fiender.splice(j,1)
}
tekst.innerHTML = ( "Poeng: " + poeng )
}
}
requestAnimationFrame(spill);
}
I think what's happening is each time you press
spill()
you're starting a newrequestAnimationFrame
loop. Therefore, each time you pressspill()
, you're effectively double calling youry coordinate
transformation:fiender[j].y += fiender[j].vy;
Read here on how to properly start/stop a window.requestAnimationFrame