Question

所以，我尝试使用箭头键让角色在屏幕上移动，虽然它有效，但会留下条纹。我不希望我的后端出现条纹。我知道为什么它会产生这些条纹，但不知道如何摆脱它们。出现条纹的原因是玩家正在从画布中清除，然后渲染延迟很大。我该如何阻止？

编辑：我希望它只清除播放器，而不清除它周围的任何东西。

片段：

const c = document.getElementById('c')
const ctx = c.getContext('2d')

c.height = window.innerHeight
c.width = window.innerWidth

let blockInfo = {
    h: 15, // Height in pixels. I'm gonna use this like blocks, like this: blockAmount * blockInfo.h
    w: 15
}

let renderedPlayer = false // The player wasn't rendered yet so this is false

let player = {
    speed: 0.125,
    x: 2,
    y: 2,
    height: 1,
    width: 1
}

function clearPlayer() { // I think this is where the glitch comes in.
    ctx.clearRect(player.x * blockInfo.w, player.y * blockInfo.h, player.width * blockInfo.w, player.height * blockInfo.h)
}

function renderPlayer() {
    ctx.fillRect(player.x * blockInfo.w, player.y * blockInfo.h, player.width * blockInfo.w, player.height * blockInfo.h)
}

function press(e) { // When a character on the keyboard gets pressed:
    let w = e.which
    
    if (renderedPlayer == true) {
        clearPlayer() // It clears the player before the player moves, so it doesn't have more streaks.
        
        if (w == 39) {
            player.x += player.speed
        } else if (w == 37) {
            player.x -= player.speed
        } else if (w == 38) {
            player.y -= player.speed
        } else if (w == 40) {
            player.y += player.speed
        }
    }
}

setInterval(function() { // Rendering player each MS.
    renderedPlayer = false
    renderPlayer()
    renderedPlayer = true
}, 0)

body {
    margin: 0;
    overflow: hidden;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body onkeydown="press(event)">
    <canvas id="c"></canvas>

    <script src="script.js"></script>
  </body>
</html>

Answer 1

我会在你画画之前清除整个画布，就像这样：

const c = document.getElementById('c')
const ctx = c.getContext('2d')
c.height = c.width = 180

let blockInfo = {h: 15,  w: 15}
let player = {speed: 0.1, x: 2, y: 2, height: 1, width: 1}

function render() {
  ctx.clearRect(0, 0, c.width, c.height)
  
  //renderOtherStuff
  ctx.fillStyle = "#FF0000";
  ctx.arc(75, 75, 60, 0, Math.PI * 2, true);  
  ctx.fill();

  //renderPlayer
  ctx.fillStyle = "#000000";
  ctx.fillRect(player.x * blockInfo.w, player.y * blockInfo.h, player.width * blockInfo.w, player.height * blockInfo.h)
}

function press(e) { // When a character on the keyboard gets pressed:
  let w = e.which
  if (w == 39) {
    player.x += player.speed
  } else if (w == 37) {
    player.x -= player.speed
  } else if (w == 38) {
    player.y -= player.speed
  } else if (w == 40) {
    player.y += player.speed
  }
}

setInterval(render, 25)

<body onkeydown="press(event)">
  <canvas id="c"></canvas>
</body>

当您引入其他可能重叠的对象时，仅清除播放器会带来其他问题，当您清除播放器时，您也会清除可能包含其他内容的背景。

...此外，这看起来像是一个简单游戏的开始，如果你认真对待它，请研究一个合适的游戏引擎，那里有一堆开源的：
https://github.com/collections/javascript-game-engines

尝试在画布中渲染某些内容时如何防止出现故障？

1 个答案: