Дрожащее движение вызвано тем, что движение происходит в обратном вызове «keydown», который не вызывается каждый кадр, в котором удерживается клавиша.Вместо этого вы можете сохранить состояние клавиши в переменной при нажатии клавиши, а затем пометить ее как не нажатую при отпускании клавиши.Я изменил ваш пример, чтобы сделать движение более плавным.
Я также добавил функцию обновления, которая проверяет нажатую клавишу, чтобы движение персонажа происходило каждый кадр.
С некоторыми другимиДля работы можно сделать менеджера, который позволит вам проверить, какие клавиши нажаты.Вы также можете переместить свою функцию обнаружения столкновений в положение после перемещения персонажа, чтобы убедиться, что игрок находится в правильном месте до окончания кадра.
Надеюсь, это поможет!
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#player {
background: #000;
position: fixed;
height: 10px;
width: 10px;
left: 0px;
top: 0px;
}
#powerup {
background: blue;
position: fixed;
height: 10px;
width: 10px;
}
</style>
</head>
<!-- NOTE: Added a keyup event -->
<body onkeydown="keydown(event)" onkeyup="keyup(event)">
<div id="player"></div>
<script>
var player = document.getElementById("player");
var powerup = document.getElementById("powerup");
var object = document.getElementsByClassName("object");
var counter = 0;
var addcounter = setInterval(createObject,1);
function createObject() {
counter++;
var newObject = document.createElement("DIV");
newObject.setAttribute("class", "object");
newObject.setAttribute("id", "powerup");
newObject.style.top = Math.floor(Math.random() * (window.innerHeight - 10)) + 10 + "px";
newObject.style.left = Math.floor(Math.random() * (window.innerWidth - 10)) + 10 + "px";
document.body.appendChild(newObject);
if (counter > 10) {
clearInterval(addcounter);
}
}
setInterval(collisionDetection,1);
function collisionDetection() {
for (i = 0; i < object.length; i++) {
// Player Right to Object Left
if (player.offsetLeft + player.offsetWidth <= object[i].offsetLeft + 1 &&
player.offsetLeft + player.offsetWidth >= object[i].offsetLeft &&
player.offsetTop < object[i].offsetTop + object[i].offsetHeight &&
player.offsetHeight + player.offsetTop > object[i].offsetTop) {
player.style.left = object[i].offsetLeft - player.offsetWidth + "px";
}
// Player Left to Object Right
if (player.offsetLeft >= object[i].offsetLeft + object[i].offsetWidth - 1 &&
player.offsetLeft <= object[i].offsetLeft + object[i].offsetWidth &&
player.offsetTop < object[i].offsetTop + object[i].offsetHeight &&
player.offsetHeight + player.offsetTop > object[i].offsetTop) {
player.style.left = object[i].offsetLeft + object[i].offsetWidth + "px";
}
// Player Bottom to Object Top
if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth &&
player.offsetLeft + player.offsetWidth > object[i].offsetLeft &&
player.offsetTop + player.offsetHeight >= object[i].offsetTop &&
player.offsetTop + player.offsetHeight <= object[i].offsetTop + 1) {
player.style.top = object[i].offsetTop - player.offsetHeight + "px";
}
// Player Top to Object Bottom
if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth &&
player.offsetLeft + player.offsetWidth > object[i].offsetLeft &&
player.offsetTop <= object[i].offsetTop + object[i].offsetHeight &&
player.offsetTop >= object[i].offsetTop + object[i].offsetHeight - 1) {
player.style.top = object[i].offsetTop + object[i].offsetHeight + "px";
}
}
}
// NOTE: Storing the pressed key in a variable
var key = -1;
function keyup() { key = -1; }
function keydown(event) {
key = event.keyCode;
}
// NOTE: Running the update function every frame
function update() {
if (key == 40) {
player.style.top = player.offsetTop + 1 + "px";
}
if (key == 39) {
player.style.left = player.offsetLeft + 1 + "px";
}
if (key == 38) {
player.style.top = player.offsetTop - 1 + "px";
}
if (key == 37) {
player.style.left = player.offsetLeft - 1 + "px";
}
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>