Menu
There is a test code for you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
bri {
position: absolute;
width: 20px;
height: 20px;
}
.dirt {
background-color:brown;
}
.gracz {
background-color:red
}
</style>
<script >
function makeLevel() {
width = 30
heigth = 30
var bricks = document.getElementById('bricks')
bricks.style.width = 20 * heigth + 'px'
bricks.style.height = 20 * width + 'px'
bricks.innerHTML = ''
for (var i = 0; i < width; i++) {
for (var j = 0; j < heigth; j++) {
var bri = document.createElement("bri");
bricks.appendChild(bri)
bri.style.top = i * 20 + "px"
bri.style.left = j * 20 + "px"
bri.id = i + "_" + j
bri.className = 'dirt'
}
}
pos_player_x = Math.floor(Math.random() * width)
pos_player_y = Math.floor(Math.random() * heigth)
bri = document.getElementById(pos_player_x + '_' + pos_player_y);
bri.className = 'gracz'
}
function moving(event) {
var key = event.which
//87 - w , 83 -s, 65 -a, 68 - d
switch (key) {
case 87:
var new_x = pos_player_x - 1;
var new_y = pos_player_y - 0;
break;
case 83:
var new_x = pos_player_x + 1;
var new_y = pos_player_y - 0;
break;
case 65:
var new_x = pos_player_x - 0;
var new_y = pos_player_y - 1;
break;
case 68:
var new_x = pos_player_x - 0;
var new_y = pos_player_y + 1;
break;
}
var new_pos = document.getElementById(new_x + '_' + new_y)
var old_pos = document.getElementById(pos_player_x + '_' + pos_player_y)
if (new_pos != null) {
new_pos.className = 'gracz';
old_pos.className = 'clean';
pos_player_y = new_y;
pos_player_x = new_x;
}
}
</script>
</head>
<body onload="makeLevel()" onkeydown="moving(event)">
<div id="game">
<div id="bricks" draggable="false"></div>
</div>
</body>
</html>
And we need to focus on the function called "moving". If we pressed and hold one of the button 'WASD' our player will follow this direction. But, for the first second he moved once and after this they will repeat until he reach one of the wall.
And here is the question. How to remove this little pause if we hold one of this button?
This is my first post, so sorry for mistakes.
488
asked Dec 09 '25 16:12
Currently your movement is tied to the number of keypresses received. This is problematic not only because of the OS issue you perceive (i.e. how soon it'll start sending the repeated key), but also because it allows faster movement if someone were to press the key faster ("spamming") than the base repeating speed of a held down button.
Instead, your game should have an internal 'tick', which quantizes movement. When keys are pressed and released, you propagate those changes to an internal variable, and every time your game decides it's time to move, move based on the current state of this variable. This will mean that no matter whether someone is holding down the key or spamming, regardless of the speed with which the OS is sending the repeat signals, the block will move exactly as fast as your game allows.
EDIT: Here's an adjusted version of your code. Note the newly introduced startGameLoop function, and how I use the onkeydown and onkeyup events. In this version, the snake moves at a steady pace while a key is pressed, and doesn't move after it has been released.
HTML: <body onload="makeLevel()" onkeydown="registerKey(event)" onkeyup="releaseKey()">
Javascript:
var currentlyPressedKey;
function makeLevel() {
width = 30
heigth = 30
var bricks = document.getElementById('bricks')
bricks.style.width = 20 * heigth + 'px'
bricks.style.height = 20 * width + 'px'
bricks.innerHTML = ''
for (var i = 0; i < width; i++) {
for (var j = 0; j < heigth; j++) {
var bri = document.createElement("bri");
bricks.appendChild(bri)
bri.style.top = i * 20 + "px"
bri.style.left = j * 20 + "px"
bri.id = i + "_" + j
bri.className = 'dirt'
}
}
pos_player_x = Math.floor(Math.random() * width)
pos_player_y = Math.floor(Math.random() * heigth)
bri = document.getElementById(pos_player_x + '_' + pos_player_y);
bri.className = 'gracz';
startGameLoop();
}
function startGameLoop(){
setInterval(move,250);
}
function registerKey(event){
currentlyPressedKey = event.which;
}
function releaseKey(){
currentlyPressedKey = null;
}
function move() {
var key = currentlyPressedKey;
//87 - w , 83 -s, 65 -a, 68 - d
switch (key) {
case 87:
var new_x = pos_player_x - 1;
var new_y = pos_player_y - 0;
break;
case 83:
var new_x = pos_player_x + 1;
var new_y = pos_player_y - 0;
break;
case 65:
var new_x = pos_player_x - 0;
var new_y = pos_player_y - 1;
break;
case 68:
var new_x = pos_player_x - 0;
var new_y = pos_player_y + 1;
break;
}
var new_pos = document.getElementById(new_x + '_' + new_y)
var old_pos = document.getElementById(pos_player_x + '_' + pos_player_y)
if (new_pos != null) {
new_pos.className = 'gracz';
old_pos.className = 'clean';
pos_player_y = new_y;
pos_player_x = new_x;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
