清除画布播放器路径 - 重绘关卡数组

Question

我正在使用画布制作一个简单的平台游戏，我的问题是在使用数组创建关卡时似乎无法清除画布。

如果我使用 ctx.clearRect(0, 0, canvas.width, canvas.height);然后玩家可以正确移动并清除其后面的路径，但画布完全变白。从我的数组中重绘关卡的最佳方法是什么？

(function() {
var requestAnimationFrame = window.requestAnimationFrame ||     window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();


    /* Game Variables and Constants */


var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// level colors

var color = {
    darkBlue: '#2c3e50',
    blue: '#2980b9',
    green: '#1abc9c'

}

// add level colors to array

var colors = [color.darkBlue, color.blue, color.green];


// Level Plan
var levelArray = [

    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1]


];

// Images/Tiles for level

var sky = new Image();
var floor = new Image();


sky.src = "Tiles/bg-tile.png";
floor.src = "Tiles/floor-tile.png";

var levelPosX = 0;
var levelPosY = 0;



// Player Object

var player = {
    width: 20,
    height: 20,
    posX: 5,
    posY: canvas.height - 40,
    speed: 5,
    velX: 0,
    velY: 0
}



// empty keys array to store value of pressed keys 

var keys = [];





// Update Function - player controls etc

function update() {

    // move right
    if(keys[39]) {
        player.velX++;
    }

    player.posX += player.velX;

}



function drawLevel() {


    // take values from levelArray and assign them colors to canvas
    for(var i = 0; i < levelArray.length; i++) {
            for(var j = 0; j < levelArray[i].length; j++) {

                if(levelArray[i][j] == 0) {     
                    ctx.drawImage(sky, levelPosX, levelPosY, 20, 20);
                }

                if(levelArray[i][j] == 1) {         
                    ctx.drawImage(floor, levelPosX, levelPosY, 20, 20);
                }

                levelPosX += 20;
            }

            levelPosX = 0;
            levelPosY += 20;

        }

}



function render() {


    draw(); 

    requestAnimationFrame(render);

}

// Draw Function - draw the level, player

function draw() {

    update();
    drawLevel();



// Draw the player
    ctx.fillStyle = color.green;
    ctx.fillRect(player.posX, player.posY, player.width, player.height);


}



// Event listeners  -  stores the value of whatever key was pressed in the keys array

document.body.addEventListener("keydown", function(e) {
    keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
});


window.addEventListener("load", function(){
  render();
});

Answer 1

ctx.clearRect 的目的是从画布中删除所有内容——可能会让您通过现在完全透明和空的画布显示网页的白色背景。

你不能“移动”你在画布上绘制的任何东西。

相反，画布通过擦除画布并在新位置重新绘制所有内容来为内容设置动画。这就是画布的工作方式......

1. 绘制所有内容（背景和播放器），
2. 给用户时间查看内容，
3. 清除画布，
4. 更新新内容的位置，
5. 在新位置重绘所有新内容，
6. 重复，重复，重复...