如何在 canvas 游戏中让玩家流畅移动？

Question

如何在 canvas 2d 游戏中让玩家流畅移动？这是我的第一个 canvas-game 应用程序的代码。

//Canvas
const canvas = document.getElementById("canvas");
canvas.style.display = "block";
canvas.height = innerHeight;
canvas.width = innerWidth;
canvas.style.backgroundColor = "grey";
//Context
const ctx = canvas.getContext("2d");
//Player
const player = {x: 10, y: 10, w: 20, h: 20};
//Start-position
ctx.fillRect(player.x, player.y, player.w, player.h);
//No-smooth-movement
window.onkeydown = move = (e) => {
    let key = e.keyCode;
    if     (key === 68 && player.x <= canvas.width-25) {player.x += 10;} //right
    else if(key === 65 && player.x >= 10) {player.x -= 10;} //left
    else if(key === 83 && player.y <= canvas.height-25) {player.y += 10;} //down
    else if(key === 87 && player.y >= 10) {player.y -= 10;} //up

    ctx.clearRect(0,0, canvas.width, canvas.height);
    ctx.fillRect(player.x, player.y, player.w, player.h);
}

Answer 1

要制作更流畅的动画，您需要更高的帧率。在给定的代码中，您只使用了 onkeydown 事件，该事件不是每秒一定数量的帧。您可以在补充或 window.requestAnimationFrame 中使用 setInterval :

//Canvas
mycan.style.display = "block";
mycan.height = innerHeight;
mycan.width = innerWidth;
mycan.style.backgroundColor = "grey";
//Context
const ctx = mycan.getContext("2d");
//Player
const player = {x: 10, y: 10, w: 20, h: 20};
//Start-position
ctx.fillRect(player.x, player.y, player.w, player.h);
//No-smooth-movement
window.onkeydown = move = (e) => {
    let key = e.keyCode;
    if     (key === 68 && player.x <= mycan.width-25) {player.x += 10;} //right
    else if(key === 65 && player.x >= 10) {player.x -= 10;} //left
    else if(key === 83 && player.y <= mycan.height-25) {player.y += 10;} //down
    else if(key === 87 && player.y >= 10) {player.y -= 10;} //up
}

const draw = ()=>{
  ctx.clearRect(0,0, mycan.width, mycan.height);
  ctx.fillRect(player.x, player.y, player.w, player.h);
};

setInterval(()=>{
  draw();
},1000/60);

<canvas id="mycan"></canvas>

你也可以放慢速度（这里用10让玩家在一个方向移动10个像素）

并自定义您的活动：

//Canvas
mycan.style.display = "block";
mycan.height = innerHeight;
mycan.width = innerWidth;
mycan.style.backgroundColor = "grey";
//Context
const ctx = mycan.getContext("2d");
//Player
const player = {x: 10, y: 10, w: 20, h: 20};
const keystack = [];
//Start-position
ctx.fillRect(player.x, player.y, player.w, player.h);
//No-smooth-movement
window.onkeydown = move = (e) => {
    keystack.push(e.keyCode);
}

const draw = ()=>{
  let key = keystack.pop();
  if     (key === 68 && player.x <= mycan.width-25) {player.x += 10;} //right
    else if(key === 65 && player.x >= 10) {player.x -= 10;} //left
    else if(key === 83 && player.y <= mycan.height-25) {player.y += 10;} //down
    else if(key === 87 && player.y >= 10) {player.y -= 10;} //up
  ctx.clearRect(0,0, mycan.width, mycan.height);
  ctx.fillRect(player.x, player.y, player.w, player.h);
};

setInterval(()=>{
  draw();
},1000/60);

<canvas id=mycan></canvas>

最后也是最重要的事情是向该动画添加步骤。而不是移动 +10 立即移动 +5 然后再次移动 +5 但这次是在绘图中而不是在事件中：

//Canvas
mycan.style.display = "block";
mycan.height = innerHeight;
mycan.width = innerWidth;
mycan.style.backgroundColor = "grey";
//Context
const ctx = mycan.getContext("2d");
//Player
const player = {x: 10, y: 10, w: 20, h: 20};
const keystack = [];
let isMoving = 0;
let prevKey = {};
//Start-position
ctx.fillRect(player.x, player.y, player.w, player.h);
//No-smooth-movement
window.onkeydown = move = (e) => {
    keystack.push(e.keyCode);
}

window.onkeyup = move = (e) => {
    keystack.pop();
}

const draw = ()=>{
  let key = keystack[keystack.length-1];
  //if(!(isMoving=isMoving%2)) key = keystack.pop(); 
  //else key = prevKey;
  
  if     (key === 68 && player.x <= mycan.width-25) {player.x += 5;} //right
    else if(key === 65 && player.x >= 10) {player.x -= 5;} //left
    else if(key === 83 && player.y <= mycan.height-25) {player.y += 5;} //down
    else if(key === 87 && player.y >= 10) {player.y -= 5;} //up
  ctx.clearRect(0,0, mycan.width, mycan.height);
  ctx.fillRect(player.x, player.y, player.w, player.h);
  prevKey = key;
  isMoving++;
};

setInterval(()=>{
  draw();
},1000/60);

<canvas id = mycan > </canvas>

并防止初始口吃：

//Canvas
mycan.style.display = "block";
mycan.height = innerHeight;
mycan.width = innerWidth;
mycan.style.backgroundColor = "grey";
//Context
const ctx = mycan.getContext("2d");
//Player
const player = {x: 10, y: 10, w: 20, h: 20};
const keystack = [];
let isMoving = 0;
let prevKey = {};
//Start-position
ctx.fillRect(player.x, player.y, player.w, player.h);
//No-smooth-movement
window.onkeydown = move = (e) => {
    keystack.push(e.keyCode);
}

window.onkeyup = move = (e) => {
    keystack.pop();
}

const draw = ()=>{
  let key = keystack[keystack.length-1];
  
  if     (key === 68 && player.x <= mycan.width-25) {player.x += 5;} //right
    else if(key === 65 && player.x >= 10) {player.x -= 5;} //left
    else if(key === 83 && player.y <= mycan.height-25) {player.y += 5;} //down
    else if(key === 87 && player.y >= 10) {player.y -= 5;} //up
  ctx.clearRect(0,0, mycan.width, mycan.height);
  ctx.fillRect(player.x, player.y, player.w, player.h);
  prevKey = key;
  isMoving++;
};

setInterval(()=>{
  draw();
},1000/60);

<canvas id=mycan></canvas>

如何在 canvas 游戏中让玩家流畅移动？

How I can do a smooth movement of player in canvas game?

javascript

canvas

move

smoothing