How can I restart my function?

问题

I have made a simple game but when its game over the game is just over, I want it to restart when I press ENTER. Can someone help me with this? I do not want to reload the site but only the function.

When I press enter now the speed increases.

You can se the the game by clicking the link DEMO press ENTER to start the game

Code:

var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var tileldig = Math.floor((Math.random() * 300) + 1);
var tekst = document.getElementById("tekst")

var kuler = [{
    r: 10,
    x: canvas.width / 2,
    y: canvas.height - 100,
    f: "red",
    dy: 0
}, ]

var fiender = [{
    r: 20,
    x: tileldig,
    y: -20,
    vx: 0,
    vy: 1,
}, ]

var snd = new Audio("Skudd.m4a");

var poeng = 0;
var høyre = 0;
var venstre = 0;
var opp = 0;
var ned = 0;

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();
    }
}
document.onkeyup = function tast2(e) {
    if (e.keyCode == 39) { // høyre
        høyre = 0;
    }
    if (e.keyCode == 37) { // venstre
        venstre = 0;
    }
    if (e.keyCode == 38) { // opp 
        opp = 0;
    }
    if (e.keyCode == 40) { // ned
        ned = 0;
    }
}

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 (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();


            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;
            };

            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)
        }
    }



    for (var j = 0; j < fiender.length; j++) {
        fiender[j].y += fiender[j].vy;
    }

    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;
    }

    requestAnimationFrame(spill);
    return;
}

function newskudd() {
    var nyttskudd = {
        x: kuler[0].x,
        y: kuler[0].y,
        r: 5,
        dy: -5,
        f: "white"
    };
    kuler.push(nyttskudd);
};

setInterval(function() {
    fiender.push({
        r: 20,
        x: Math.floor((Math.random() * 300) + 1),
        y: -20,
        vx: 0,
        vy: 1,
        f: "green"
    });
}, 1000);

回答1:

An easy way to do this would be to simply refresh the page with location.reload() when a key is pressed.

You could also create a gameIsInProgress variable to change to false when the game ends, and test for that value before allowing the page to reload.

回答2:

First, initialize then run spill ...

if (e.keyCode == 13) {
    init();
    spill();
}

Here's an init ...

function init() {
    kuler = [{
        r: 10,
        x: canvas.width / 2,
        y: canvas.height - 100,
        f: "red",
        dy: 0
    }, ];

    fiender = [{
        r: 20,
        x: tileldig,
        y: -20,
        vx: 0,
        vy: 1,
    }, ];
    poeng = 0;
    høyre = 0;
    venstre = 0;
    opp = 0;
    ned = 0;
}

Running here ... jsFiddle

来源：https://stackoverflow.com/questions/27429799/how-can-i-restart-my-function