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);
}
Related
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'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.
When I put engine.map.ctx.translate(engine.moveX, engine.moveY); just like that it works perfectly, but when I try to invoke this function on key trigger it gives me nothing.
I'm checking with alert if key triggers works and they do, however engine.map.ctx.translate(engine.moveX, engine.moveY); isn't working inside switch statement.
var engine = {}
engine.moveX = 0;
engine.moveY = 0;
engine.map = {}
engine.map.canvas = document.getElementById('canvas');
engine.map.ctx = engine.map.canvas.getContext('2d');
document.onkeydown = function(evt) {
evt = evt || window.event;
switch(evt.keyCode){
case 37:
engine.moveX -= 15;
engine.map.ctx.translate(engine.moveX, engine.moveY);
alert('left');
break;
case 38:
engine.moveY -= 15;
engine.map.ctx.translate(engine.moveX, engine.moveY);
alert('up');
break;
case 39:
engine.moveX += 15;
engine.map.ctx.translate(engine.moveX, engine.moveY);
alert('right');
break;
case 40:
engine.moveY += 15;
engine.map.ctx.translate(engine.moveX, engine.moveY);
alert('down');
break;
}
};
The ctx.translate command is not designed to redraw anything
It only repositions the canvas for subsequent draws.
So you now need to also redraw your object.
Hi I have added in functionality (found on stackoverflow) to make my div move left or right once the user holds down one of the arrow keys. All works as it should.
I want to know is there a way to stop the div from moving once it has reached the "end" or once it has moved a certain amount of pixels.
Code I have is below
$(document).keydown(function(e) {
switch (e.which) {
case 37:
$('#block').stop().animate({
left: '-=50'
}); //left arrow key
break;
case 39:
$('#block').stop().animate({
left: '+=50'
}); //right arrow key
break;
}
})
Sure, take a look at this fiddle: http://jsfiddle.net/ArtBIT/V7qcK/
var KEY = {
LEFT: 37,
RIGHT: 39
}
var boundaries = {
left: 0,
right: 200
}
$(document).keydown(function(e) {
var position = $('#block').position();
switch (e.which) {
case KEY.LEFT:
$('#block').stop().animate({
left: Math.max(boundaries.left, position.left - 50)
});
break;
case KEY.RIGHT:
$('#block').stop().animate({
left: Math.min(boundaries.right, position.left + 50)
});
break;
}
});
Or this one http://jsfiddle.net/ArtBIT/8PWCR/1/ for 2D movement
Get the current offset and then handle it:
var max = 1000;
$(document).keydown(function(e) {
switch (e.which) {
case 37:
if($('#block').offset().left > 50)
{
$('#block').stop().animate({ left: '-=50' });
}
break;
case 39:
if($('#block').offset().left < (max - 50)
{
$('#block').stop().animate({ left: '+=50' });
}
break;
}
});