Question

如何在canvas 2d游戏中平稳地进行玩家的移动？这是我第一个画布游戏应用程序的代码。

//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>

在画布游戏中如何使玩家流畅移动？

1 个答案: