Question

我做了一个简单的游戏但是当它在游戏中的游戏刚刚结束时，我希望它在按下ENTER时重新启动。有人可以帮我弄这个吗？我不想重新加载网站，只想重新加载功能。

当我按下现在输入时，速度会增加。

您可以点击链接DEMO 按ENTER进入游戏

代码：

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

Answer 1

执行此操作的一种简单方法是，在按下某个键时，只需使用location.reload()刷新页面。

您还可以创建一个gameIsInProgress变量，以便在游戏结束时更改为false，并在允许重新加载页面之前测试该值。

Answer 2

首先，初始化然后运行溢出......

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

这是一个初始......

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

在这里跑步...... jsFiddle

如何重启我的功能？

2 个答案: