We Keep Coding

calculate direction to move to by JavaScript

There is a tank(group), I need to control (move), panzer must go in the direction where its muzzle is looking
window.addEventListener('keydown', function (event) {
if (event.code === 'KeyW') {
model.position.z += -0.1
} else if (event.code === 'KeyA') {
model.rotation.y += 0.01
} else if (event.code === 'KeyD') {
model.rotation.y += -0.01
} else if (event.code === 'KeyS') {
model.position.z += 0.1
}
})
the tank always moves in z, when I change its rotation it still moves in the direction of z, but it should move diagonally - where the muzzle is looking

Up and down Movement in p5.js (and using WASD)

How can I use the keyboard to make a character move in p5? I mean, more then left and right... I would also like to use the WASD keys. I've used this (shape as a placeholder):
https://editor.p5js.org/TheDiamondfinderYT/present/8ZqV2LsVB
function keyPressed() {
if (keyCode === LEFT_ARROW||keyCode === 65) {
left()
} else if (keyCode === RIGHT_ARROW||keyCode === 68) {
right();
if (keyCode === UP_ARROW) {
up()
} else if (keyCode === DOWN_ARROW) {
down()
}
}
Could anyone point me in the right direction?

You just made a few mistakes. For example, in this code:
else if (keyCode === RIGHT_ARROW||keyCode === 68) {
right();
if (keyCode === UP_ARROW) {
up()
} else if (keyCode === DOWN_ARROW) {
down()
}
}
the if statements for UP_ARROW and DOWN_ARROW are inside the if statements for RIGHT_ARROW, when they shouldn't be. Here is a version I cleaned up for you, you can just copy the code and moving should work fine.

How to make a rect svg element not escape the viewBox of the svg

I have an SVG
<svg id='mainSvg' viewBox='0 0 1920 1080'>
<rect id='rectangle' x='800' y='800'/>
</svg>
and I am moving the rectangle inside the SVG with javascript with left and right arrow keys and A and D keys.
that is working perfectly but I have a problem that the rectangle can go outside of the view-box of the SVG and I want the rectangle to stop when it touches the left or right corner. this is my code.
function keyDown(event) {
if (event.key === 'ArrowLeft' || event.key === 'a') {
leftKey = true;
aKey = true;
} else if (event.key === 'ArrowRight' || event.key === 'd') {
rightKey = true;
dKey = true;
}
}
function keyUp(event) {
if (event.key === 'ArrowLeft' || event.key === 'a') {
leftKey = false;
aKey = false;
} else if (event.key === 'ArrowRight' || event.key === 'd') {
rightKey = false;
dKey = false;
}
}
function move() {
let xPosition = parseInt(rectangle.getAttribute('x'));
const movmentSpeed = 10;
//if right arrow key,d is pressed
if (rightKey) {
rectangle.setAttribute('x', xPosition + movmentSpeed);
//if right arrow key,a is pressed
} else if (leftKey) {
rectangle.setAttribute('x', xPosition - movmentSpeed)
if(xPosition === 0){
leftKey = false;
}
}
setTimeout(move, 10);
}
on the last function move() I tried saying if(Xposition ===0){leftKey = false} that works briefly but if the user keeps pressing the left arrow then the rectangle will start moving again and go out of the viewBox.
Also, the arrow keys have a value of false by default
Any ideas on how to fix this?

Make a canvas object stop inside the canvas area?

Basically I've made a little game, but what I'm wondering is how do I make my created object not go outside the lines of the canvas. When he reaches a border I want him to stop. Any help is appreciated

Hi there i made a little demo game my self. In that game there is what you are looking for. Working demo you can find it here
So what i did was to
1) track user keyboard press
document.onkeydown = function(e) {
e = e || window.event;
if(e.keyCode == "37") player.move("left");
else if(e.keyCode == "38") player.move("up");
else if(e.keyCode == "39") player.move("right");
else if(e.keyCode == "40") player.move("down");
};
2) getting a basic config of the player position (middle in my case)
var player = {
x: Math.round((w/2)/objectSizes),
y: Math.round((h/2)/objectSizes)
}
3) then on the function play.move i track the direction and do all the restrictions
player.move = function(direction) {
/**
* A temporary object to hold the current x, y so if there is a collision with the new coordinates to fallback here
*/
var hold_player = {
x: player.x,
y: player.y
};
/**
* Decide here the direction of the user and do the neccessary changes on the directions
*/
switch(direction) {
case "left":
player.x -= speed / modifier;
if(player.currentDirection == "stand") {
player.currentDirection = "left-1";
} else if(player.currentDirection == "left-1") {
player.currentDirection = "left-2";
} else if(player.currentDirection == "left-2") {
player.currentDirection = "left-1";
} else {
player.currentDirection = "left-1";
}
break;
case "right":
player.x += speed / modifier;
if(player.currentDirection == "stand") {
player.currentDirection = "right-1";
} else if(player.currentDirection == "right-1") {
player.currentDirection = "right-2";
} else if(player.currentDirection == "right-2") {
player.currentDirection = "right-1";
} else {
player.currentDirection = "right-1";
}
break;
case "up":
player.y -= speed / modifier;
if(player.currentDirection == "stand") {
player.currentDirection = "up-1";
} else if(player.currentDirection == "up-1") {
player.currentDirection = "up-2";
} else if(player.currentDirection == "up-2") {
player.currentDirection = "up-1";
} else {
player.currentDirection = "up-1";
}
break;
case "down":
player.y += speed / modifier;
if(player.currentDirection == "stand") {
player.currentDirection = "down-1";
} else if(player.currentDirection == "down-1") {
player.currentDirection = "down-2";
} else if(player.currentDirection == "down-2") {
player.currentDirection = "down-1";
} else {
player.currentDirection = "down-1";
}
break;
}
/**
* if there is a collision just fallback to the temp object i build before while not change back the direction so we can have a movement
*/
if(check_collision(player.x, player.y)) {
player.x = hold_player.x;
player.y = hold_player.y;
}
/**
* If player finds the coordinates of pokeball the generate new one, play the sound and update the score
*/
if(player.x == pokeball.x && player.y == pokeball.y) { // found a pokeball !! create a new one
console.log("found a pokeball of "+pokeball.spritePosition+"! Bravo! ");
pokePick.pause();
pokePick.currentTime = 0;
pokePick.play();
score += 1;
pokeball.generatePosition();
}
update();
};
Then at last i have this function to check any collision
/**
* Our function that decides if there is a collision on the objects or not
* #function
* #name check_collision
* #param {Integer} x - The x axis
* #param {Integer} y - The y axis
*/
function check_collision(x, y) {
var foundCollision = false;
if(((x > 3 && x < 9) && y == 6) || ((x > 4 && x < 9) && (y == 5 || y == 4 || y == 3))) { //collision on house
console.log("on house");
foundCollision = true;
}
if((x<1 || x>20) ||
(y<2 || y>20) ||
((y > 0 && y < 4) && (x == 20 || x == 19)) || //right corner
((y > 0 && y < 4) && (x == 2 || x == 3)) || //left corner
((y > 18) && (x == 2 || x == 3)) || //left corner
((x > 17) && (y == 19 || y == 20)) || //left corner
((x > 19) && (y == 17 || y == 18)) //left corner 2
) {
console.log("lost on the woods");
foundCollision = true
}
return foundCollision;
}

Why is this Javascript Snake Game Touch Event logic not working?

For some odd reason the snake is sometimes moving right when it's suppose to go left and up when it is suppose to go down. Sometimes the movements are correct but other times they are wrong. Help would be appreciated.
function handleStart(evt){
evt.preventDefault();
var ctx = canvas.getContext("2d");
var touches = evt.changedTouches;
var touchPos = [touches[0].pageX, touches[0].pageY]
if(snake.direction === 'up' || snake.direction === 'down')
{
if(touchPos[0] < snake.x)
{
snake.direction = 'left'
}
else
{
snake.direction = 'right'
}
}
else if(snake.direction === 'left' || snake.direction === 'right')
{
if(touchPos[1] < snake.y)
{
snake.direction = 'up'
}
else
{
snake.direction = 'down'
}
}
else if(game.over)
{
game.start();
}
}