如何在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);
}
答案 0 :(得分:3)
要制作更流畅的动画,您需要更高的帧频。在给出的代码中,您仅使用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>