I'm trying to make snake game in js and i have this movement code, where sq is moving DIV:
window.onkeyup = function move(e)
{
switch(e.keyCode)
{
case 37:
function moveLeft()
{
sq.style.left = parseInt(sq.style.left) - 20 + 'px';
checkGameOver();
}
setInterval(moveLeft, 500);
break;
case 38:
function moveUp()
{
sq.style.top = parseInt(sq.style.top) - 20 + 'px';
checkGameOver();
}
setInterval(moveUp, 500);
break;
case 39:
function moveRight()
{
sq.style.left = parseInt(sq.style.left) + 20 + 'px';
checkGameOver();
clearTimeout(timeLeft);
}
setInterval(moveRight, 500);
break;
case 40:
function moveDown()
{
sq.style.top = parseInt(sq.style.top) + 20 + 'px';
checkGameOver();
}
setInterval(moveDown, 500);
break;
}
}
But any time i change move direction, last direction stays and movement is not correct. The question is how can i make correct movement and also how to stop a div?
Assign the interval to a variable and clear it before setting a new interval:
var movementInterval;
window.onkeyup = function move(e)
{
if(movementInterval) {
clearInterval(movementInterval);
}
switch(e.keyCode)
{
case 37:
function moveLeft()
{
sq.style.left = parseInt(sq.style.left) - 20 + 'px';
checkGameOver();
}
movementInterval = setInterval(moveLeft, 500);
break;
case 38:
function moveUp()
{
sq.style.top = parseInt(sq.style.top) - 20 + 'px';
checkGameOver();
}
movementInterval = setInterval(moveUp, 500);
break;
case 39:
function moveRight()
{
sq.style.left = parseInt(sq.style.left) + 20 + 'px';
checkGameOver();
clearTimeout(timeLeft);
}
movementInterval = setInterval(moveRight, 500);
break;
case 40:
function moveDown()
{
sq.style.top = parseInt(sq.style.top) + 20 + 'px';
checkGameOver();
}
movementInterval = setInterval(moveDown, 500);
break;
}
}
Otherwise you will just keep on creating new intervals with each keypress.
Related
Every time I press one of these keys, it just moves further and further.
function update() {
window.addEventListener('keyup', (e) => {
switch (e.key) {
case 'w':
myY = myY + 1;
break
case 'a':
myX = myX - 1;
break
case 's':
myY = myY - 1;
break
case 'd':
myX = myX + 1;
break
}
}
})
To achieve a smooth movement, you need:
a tick loop
listening both on keydown and keyup events
Given the presence of the update() function, I think you already have a tick loop.
Note that the addEventListener() should only be called during the setup phase.
Here's an example:
let speedX = 0
let speedY = 0
function setup() {
window.addEventListener('keydown', (e) => {
switch (e.key) {
case 'w':
speedY += 1;
break
case 'a':
speedX -= 1;
break
case 's':
speedY -= 1;
break
case 'd':
speedX += 1;
break
}
}
window.addEventListener('keyup', (e) => {
switch (e.key) {
case 'w':
speedY -= 1;
break
case 'a':
speedX += 1;
break
case 's':
speedY += 1;
break
case 'd':
speedX -= 1;
break
}
}
}
function update() {
myX += speedX;
myY += speedY;
}
If you do not have a tick loop, here's one way to make one with requestAnimationFrame:
function loop() {
requestAnimationFrame(loop);
update();
}
setup();
loop();
Is there a way to call a function on the event of a key press.
My goal is to make a movable block and I was wondering if you could call the function to move a <div> block around. I also have an issue with making the character visible so it would be helpful to help me with that!
JavaScript
//variables
var player = document.getElementById('player');
var character = {
left: player.style.left + 1,
right: player.style.right + 1,
top: player.style.top + 1,
bottom: player.style.bottom + 1,
body: document.createElement('div'),
}
//functions
function running() {
console.log("Running");
console.log("Program running");
document.appendChild('div');
}
function loop() {
running();
}
function moveRight() {
character.style.position = absolute;
character.style.top = top + "px";
character.style.right = right + 2 + "px";
}
function moveLeft() {
character.style.position = absolute;
character.style.top = top + "px";
character.style.left = left + 2 + "px";
}
function moveup() {
character.style.position = absolute;
character.style.top = top + "px";
character.style.right = right + 2 + "px";
}
//functions called
loop();
HTML
<!DOCTYPE html>
<html>
<head>
<title>RPG</title>
</head>
<body>
<div id="allCode">
<script type="text/javascript" src="index.js"></script>
<style type="text/css" src="style.css"></style>
</div>
<div id="player"></div>
</body>
</html>
There are a lot of examples on how to deal with key handling events in javascript, this should get you started :
document.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37:
//left function
break;
case 38:
//Up function
break;
case 39:
//Right function
break;
}
});
Edit: The .keyCode, .which, .charCode are deprecated properties:
so you should use event.key
for example:
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented) {
return; // Do nothing if the event was already processed
}
switch (event.key) {
case "Up": // IE/Edge specific value
case "ArrowUp":
//Up function
break;
case "Left": // IE/Edge specific
case "ArrowLeft":
//left function
break;
case "Right": // IE/Edge specific
case "ArrowRight":
//Right function
break;
default:
return; // No key event
}
event.preventDefault(); // Avoid key handling twice
}, true);
Maybe this can lead you in the right direction. It's a link to move an object using arrow keys.
https://www.includehelp.com/code-snippets/move-object-with-arrow-keys-using-javascript-function.aspx
I made this code: https://code.sololearn.com/W3i7v2LuHhoB but I can't get the object collision to work. I searched on a lot of forums, YouTube, etc and still can't find it.
var rightArrow = 0;
function leftArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - 5 + 'px';
}
function rightArrowPressed() {
if (rightArrow === 0)
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 5 + 'px';
}
function upArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) - 5 + 'px';
}
function downArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) + 5 + 'px';
}
function moveSelection(evt) {
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 38:
upArrowPressed();
break;
case 40:
downArrowPressed();
break;
}
};
I don't get any errors.
I managed to get a div id = "box" to move in the browser with arrow keys. Now I want to make every div id = "box" with class .something to move also.
I have try loop over the code with querySelectorAll but the code always fail.
Can someone help me out? And tell me how to do it because now I feel lost totally. The code below works just with one div id
var box = document.getElementById("box");
document.addEventListener("keydown", function(event) {
var key = event.key;
var left = box.offsetLeft;
var top = box.offsetTop;
console.log("left: ", left);
console.log("top: ", top);
box.style.top = (top - step) + "px";
box.style.top = (top - step) + "px";
box.style.top = (top - step) + "px";
box.style.top = (top - step) + "px";
var step = 10;
switch (key) {
case "ArrowUp":
event.preventDefault();
box.style.top = (top - step) + "px";
break;
case "ArrowDown":
event.preventDefault();
box.style.top = (top + step) + "px";
break;
case "ArrowLeft":
box.style.left = (left - step) + "px";
break;
case "ArrowRight":
box.style.left = (left + step) + "px";
break;
}
console.log("You pressed on: ", key);
});
Took a stab at fixing it.
Repl can be found here: https://repl.it/#PaulThomas1/FrightenedAgileBrain
document.addEventListener("keydown", function(event) {
var boxes = document.getElementsByClassName("box");
var key = event.key;
for(var i = 0; i < boxes.length; i++) {
var box = boxes[i];
var left = box.offsetLeft;
var top = box.offsetTop;
console.log("left: ", left);
console.log("top: ", top);
var step = 10;
switch (key) {
case "ArrowUp":
event.preventDefault();
box.style.top = (top - step) + "px";
break;
case "ArrowDown":
event.preventDefault();
box.style.top = (top + step) + "px";
break;
case "ArrowLeft":
box.style.left = (left - step) + "px";
break;
case "ArrowRight":
box.style.left = (left + step) + "px";
break;
}
console.log("You pressed on: ", key);
}
});
Because querySelector all will give you an array as a result, you can't just change it easily, you have to iterate over all of the objects.
var elements = document.querySelectorAll('.something');
document.addEventListener("keydown", function(event) {
var key = event.key;
var step = 10;
for(let el of elements){
let left = el.offsetLeft;
let top = el.offsetTop;
el.style.top = (top - step) + "px";
switch (key) {
case "ArrowUp":
event.preventDefault();
el.style.top = (top - step) + "px";
break;
case "ArrowDown":
event.preventDefault();
el.style.top = (top + step) + "px";
break;
case "ArrowLeft":
el.style.left = (left - step) + "px";
break;
case "ArrowRight":
el.style.left = (left + step) + "px";
break;
}
}
console.log("You pressed on: ", key);
});
Also, I recommend trying out jQuery, it makes these sorts of things much simpler. Especially for beginners it's easier to understand, but you should be careful not to forget the "vanilla" way to do it.
I want to make a div able to move with arrow keys in 4 direction with multikey support(e.x. moving to top left) onkeypress. When i click some of the arrows i expect moving to that direction until i put my finger up from that button. Although the move is just once which i don't understand why is happening.
function place(id,x_pos, y_pos) {
var element = document.getElementById(id);
element.style.position = "absolute";
element.style.left = x_pos+'px';
element.style.top = y_pos+'px';
}
setInterval(update,1);
function update(){
document.addEventListener('keydown', keyPress);
}
function keyPress(e) {
var x = e.keyCode;
switch (x) {
case 37:
place('move', move.style.left-10, move.style.top);
break;
case 39:
place('move', move.style.left+10, move.style.top);
break;
case 38:
place('move', move.style.left, move.style.top-10);
break;
case 40:
place('move', move.style.left, move.style.top+10);
break;
}
// console.log(x);
}
*{
margin:0;
padding:0;
}
div#move{
background-color:yellow;
width:5vw;
height:5vw;
}
<div id='move'></div>
The problem with your code is that element.style.left give result as 10px and when you add 10 on 10px it will be a string like 10px10 which will make the property value incorrect.Since the first time the property is not set so first assignment id working fine. You need to get the left and right in numerical.
You also do not need to bind the update function with document with setInterval. Once is enough.
Check the code below
function place(id,x_pos, y_pos) {
var element = document.getElementById(id);
element.style.position = "absolute";
element.style.left = x_pos+'px';
element.style.top = y_pos+'px';
}
function update(){
document.addEventListener('keydown', keyPress);
}
function keyPress(e) {
var x = e.keyCode;
var move = document.getElementById("move").getBoundingClientRect();
var left = parseInt(move.left,10);
var top = parseInt(move.top,10)
switch (x) {
case 37:
place('move', left -10, top);
break;
case 39:
place('move', left+10, top);
break;
case 38:
place('move', left, top-10);
break;
case 40:
place('move', left, top+10);
break;
}
// console.log(x);
}
update();
*{
margin:0;
padding:0;
}
div#move{
background-color:yellow;
width:5vw;
height:5vw;
}
<div id='move'></div>
const move=document.getElementById('move');
var moveLeft = 0;
function direction(e){
if(e.keyCode==39){
moveLeft +=2;
move.style.left = moveLeft + 'px';
if(moveLeft>=600){
moveLeft -=2;
}
}
if(e.keyCode==37){
moveLeft -=2;
move.style.left = moveLeft + 'px';
}
if(e.keyCode==38){
moveLeft -=2;
move.style.top = moveLeft + 'px';
if(moveLeft>=600){
moveLeft +=2;
}
}
if(e.keyCode==40){
moveLeft +=2;
move.style.top = moveLeft + 'px';
}
}
document.onkeydown = direction;
#move{
position: absolute;
height: 50px;
width: 50px;
background-color: yellow
}
<div id="move"></div>
You don't need setInterval. Just register your listener, and it will handle every keypress.
document.addEventListener('keydown', keyPress);
function keyPress(e) {
var x = e.keyCode;
switch (x) {
case 37:
place('move', move.style.left-10, move.style.top);
break;
case 39:
place('move', move.style.left+10, move.style.top);
break;
case 38:
place('move', move.style.left, move.style.top-10);
break;
case 40:
place('move', move.style.left, move.style.top+10);
break;
}
// console.log(x);
}