Question

当红色方块击中黑色方块时，一切都在本地运作，就像魅力一样，它立即刷新（开始位置）。我无法弄清楚为什么远程服务器上发生冲突（游戏结束）后网站没有刷新。有时需要几秒钟来做出反应，或者需要移动玩家位置。

找到了替换的提示 location.reload（true）;
与 location.href = location.href;
但这对我来说根本不起作用。

请拨弄我的代码：https://jsfiddle.net/32o8q5gz/1/
远程主机：https://stacho163.000webhostapp.com/

HTML代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Obulis 2</title>
    <link rel="stylesheet" type="text/css" href="gameStyle.css">
</head>
<body>
    <div class="game-content">
        <h1>Obulis 2</h1>
        <canvas id="game-window">
        </canvas>
    </div>
    <script src="gameScript.js"></script>
</body>
</html>

CSS代码：

    * {
    margin: 0;
    padding: 0;
}

body {
    background-color: #000;
}

.game-content {
    position: relative;
    width: 100vw;
    height: 100vh;
}

h1 {
    position: absolute;
    color: red;
    font-size: 50px;
    left: 50%;
    top: 1.5%;
    transform: translate(-50%);
}

#game-window {
    position: absolute;
    width: 90vw;
    height: 90vw * 16/9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    background-color: gray;
}

JS代码：

    // js game script //
let canvas = document.getElementById('game-window');
let ctx = canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

let left = false;
let up = false;
let right = false;
let down = false;

let player = {
    size: 50,
    posX: (canvas.width / 2) - 25,
    posY: (canvas.height / 2) - 25,
    speed: 5
}

let obstacle = {
    size: Math.round((Math.random() * 100) + 50),
    posX: Math.round((Math.random() * 1200) + 50),
    posY: -50,
    speed: Math.round((Math.random() * 10) + 1)
}

function drawPlayer() {
    ctx.fillStyle = "red";
    ctx.fillRect(player.posX, player.posY, player.size, player.size);
}

function drawObstacle() {
    ctx.fillStyle = "#000";
    ctx.fillRect(obstacle.posX, obstacle.posY, obstacle.size, obstacle.size);
    obstacle.posY += obstacle.speed;
}

function darknessCollision() {
    if (player.posX < 0 || 
        player.posY < 0 ||         
        player.posX > canvas.width - player.size ||
        player.posY > canvas.height - player.size) {
        location.reload(true);
    }
}

function obstacleCollision() {
    if (player.posX <= obstacle.posX + obstacle.size && 
        player.posY <= obstacle.posY + obstacle.size &&
        player.posX + player.size >= obstacle.posX && 
        player.posY + player.size >= obstacle.posY) {
        location.href = location.href;
    }
}

function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function move() {
    if (left) {
        player.posX -= player.speed;
    }
    if (up) {
        player.posY -= player.speed;
    }
    if (right) {
        player.posX += player.speed;
    }
    if (down) {
        player.posY += player.speed;
    }
}

document.onkeydown = function (e) {
    if (e.keyCode == 37) left = true;
    if (e.keyCode == 38) up = true;
    if (e.keyCode == 39) right = true;
    if (e.keyCode == 40) down = true;   
    e.preventDefault();
}

document.onkeyup = function (e) {
    if (e.keyCode == 37) left = false;
    if (e.keyCode == 38) up = false;
    if (e.keyCode == 39) right = false;
    if (e.keyCode == 40) down = false;
    e.preventDefault();
}

setInterval (function game() {
    clearCanvas();
    drawObstacle();
    drawPlayer();
    darknessCollision();
    obstacleCollision();
    move();
}, 10);

提前感谢您的提示！：）

Answer 1

另外两个选项：

history.go(0);

并且：

window.location.href = window.location.href;

Answer 2

这是完全正常的行为。

刷新本地网站时，唯一的延迟是花在从计算机内存中重新读取该网站上的时间，甚至由于许多原因，这样做的速度也会更快。

但是，通常（如果未缓存）刷新在线网站需要从计算机到服务器的“往返时间”，有时花费几秒钟。

如果刷新页面是为了获得新的更新，那么很遗憾，没有任何方法可以减少刷新时间。但是，如果您只需要再启动一次网站，则可以使用如上所述的JavaScript历史记录方法，或者使用JavaScript函数无需重新刷新即可回到第一状态。

希望这会有所帮助。

location.reload（）;在远程服务器上被延迟（本地立即可用）

2 个答案: