I need you guys to help as, I am new to programming. Why my second key code is not working. I'm not sure am I suppose to type that for my if loop. What I want my program to be is, when pressing "1", it goes to my first position that I set. And if I press "2" it will go to the second position if the current position is at my first position, if not it will go back to my start position.
Please help, below is my coding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <meta http-equiv="refresh" content="30"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
.robot_start_top {
top: 280px;
transition: top 2s;
}
.robot_start_left {
position: fixed;
left: 600px;
transition: all 2s;
}
.robot_end_left {
left: 570px;
}
.robot_end_top {
top: 180px;
}
.robot1_start_left {
position: fixed;
left: 570px;
transition: left 4s;
}
.robot1_end_left {
left: 520px;
}
.robot2_start_left {
position: fixed;
left: 520px;
transition: left 4s;
}
.robot2_end_left {
left: 470px;
}
.robot3_end_down {
top: 280px;
}
.robot3_end_right {
left: 600px;
}
</style>
</head>
<body onkeydown="move(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" style= width:30px; height:40px" src="pic_8.PNG">
</div>
<script>
var move = function(event) {
if (event.keyCode === 49) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot_end_left");
}, 2000);
}
if (event.keyCode === 50) {
if (document.getElementById("app") === appDiv.classList.add("robot_end_left"))
{
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot2_end_left");
}, 2000);
}
else{
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot3_end_down");
}, 2000);
setTimeout(function() {
appDiv.classList.add("robot3_end_right");
}, 0)
setTimeout(function() { window.location.reload(true); }, 4000);
}}
};
</script>
</body>
</html>
Your missing a quotation (") in the style attribute of the img tag. I'm fixing that in the code below.
Important
I strongly suggest that you refactor the code so it's easier to build on, and to debug. I show how that can be done in the code below. The "move" methods are pretty similar, so you can write one function to handle all of them, instead of having separate methods that does almost the same thing.
Implementation
You need to remove all classes before adding new ones, or you will end up with having lots of classes on the #app element. But if you remove the classes, position: fixed will disappear, so I broke that property out and placed it under #app in the CSS. I also moved your "style" properties into an CSS class – #robot.
I renamed "move" to "moveRobot" as well. Gives more context when the methods are called moveTopLeft within the moveRobot method.
I also removed the last zero in the CSS classes, so the robot is visible when you're running the snippet.
Down below, I implemented your thoughts, but commented out all setTimeouts, so it's easier to follow what's going on. What you will discover is that if you remove the classes, the transition wont happen, because #app doesn't remember the last position of left and top.
What you actually need is to set left and top in code (ex. appDiv.styles.left = '300px'), and abandon the idea of adding classes to the robot. I believe that this will make the code shorter as well.
const appDiv = document.getElementById("app"); // Make this public so it's accessible everywhere;
var lastKeyStroke = -1;
var moveRobot = function(event) {
const KEY_NUM_ONE = 49,
KEY_NUM_TWO = 50;
let keyStroke = event.keyCode;
let pressedSameKeyTwice = keyStroke === lastKeyStroke; // not implemented
removeAllPreviousClasses();
console.clear();
if (keyStroke === KEY_NUM_ONE) {
console.log("pressed 1");
moveTopLeft();
}
else if (keyStroke === KEY_NUM_TWO) {
console.log("pressed 2");
moveTopRight();
}
else {
console.log("pressed anything else");
moveBottomRight();
}
lastKeyStroke = keyStroke;
}
function removeAllPreviousClasses() {
appDiv.className = "";
}
function moveTopLeft() {
//setTimeout(function() {
appDiv.classList.add("robot_end_top");
//}, 0);
//setTimeout(function() {
appDiv.classList.add("robot_end_left");
//}, 2000);
}
function moveTopRight() {
//setTimeout(function() {
appDiv.classList.add("robot_end_top");
//}, 0);
//setTimeout(function() {
appDiv.classList.add("robot2_end_left");
//}, 2000);
}
function moveBottomRight() {
//setTimeout(function() {
appDiv.classList.add("robot3_end_down");
//}, 2000);
//setTimeout(function() {
appDiv.classList.add("robot3_end_right");
//}, 0)
//setTimeout(function() { window.location.reload(true); }, 4000);
// removed excessive ending curly bracket
// }
}
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 980px 400px, cover;
}
#app {
position: fixed;
transition: left 2s, top 2s;
}
#robot { /* added these */
width: 30px;
height: 40px;
}
.robot3_end_down, /* added these together */
.robot_start_top {
top: 28px;
}
.robot_start_left {
left: 60px;
}
.robot_end_left {
left: 57px;
}
.robot_end_top {
top: 18px;
}
.robot1_start_left {
left: 57px;
}
.robot2_start_left, /* added these together */
.robot1_end_left {
left: 52px;
}
.robot2_end_left {
left: 47px;
}
.robot3_end_right {
left: 60px;
}
<body onkeydown="moveRobot(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" src="https://simpleicon.com/wp-content/uploads/android.png">
</div>
</body>
There were some problems with the if else conditions and the const appDiv in the code its working fine now
var move = function (event) {
const appDiv = document.getElementById("app");
if (event.keyCode === 49) {
setTimeout(function () {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function () {
appDiv.classList.add("robot_end_left");
}, 2000);
}
else if (event.keyCode === 50) {
console.log('2')
if (document.getElementById("app") === appDiv.classList.add("robot_end_left")) {
const appDiv = document.getElementById("app");
setTimeout(function () {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function () {
appDiv.classList.add("robot2_end_left");
}, 2000);
}
}
else {
console.log('3')
const appDiv = document.getElementById("app");
setTimeout(function () {
appDiv.classList.add("robot3_end_down");
}, 2000);
setTimeout(function () {
appDiv.classList.add("robot3_end_right");
}, 0)
setTimeout(function () { window.location.reload(true); }, 4000);
}
}
;
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
.robot_start_top {
top: 280px;
transition: top 2s;
}
.robot_start_left {
position: fixed;
left: 600px;
transition: all 2s;
}
.robot_end_left {
left: 570px;
}
.robot_end_top {
top: 180px;
}
.robot1_start_left {
position: fixed;
left: 570px;
transition: left 4s;
}
.robot1_end_left {
left: 520px;
}
.robot2_start_left {
position: fixed;
left: 520px;
transition: left 4s;
}
.robot2_end_left {
left: 470px;
}
.robot3_end_down {
top: 280px;
}
.robot3_end_right {
left: 600px;
}
<body onkeydown="move(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" style=width:30px; height:40px"
src="https://petapixel.com/assets/uploads/2019/02/mooncompositemain-800x800.jpg">
</div>
</body>
Related
What I want to happen is when I hover the cursor to an image, it will start the looping animation. And when I leave the cursor, it stops the animation. It indeed stops but the looping animation does not work anymore when I hover it to a image again.
$(".right-section img").mouseenter(function() {
var hoveredImage = $(this).attr("id");
function loop() {
$("#" + hoveredImage).animate({
bottom: "15px"
}, 500).animate({
bottom: 0
}, 500, function() {
loop();
});
}
loop();
$("#" + hoveredImage).mouseleave(function() {
$(this).dequeue();
$(this).css({
bottom: ""
});
});
});
To do what you require call stop() to clear the animation queue for the img:
$(".right-section img").mouseenter(function() {
function loop($img) {
$img.animate({
bottom: "15px"
}, 500).animate({
bottom: 0
}, 500, function() {
loop($img);
});
}
loop($(this));
}).mouseleave(function() {
$(this).stop(true);
});
.right-section img {
width: 100px;
height: 100px;
display: block;
background-color: #C00;
position: absolute;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="right-section">
<img />
</div>
That being said, a far better approach would be to use CSS for the animation. CSS performs better, and also it better meets the separation of concerns principle. Try this:
.right-section img {
width: 100px;
height: 100px;
display: block;
background-color: #C00;
position: absolute;
bottom: 0;
}
.right-section img:hover {
animation: bounce 1s ease-in-out infinite;
}
#keyframes bounce {
0% { bottom: 0; }
50% { bottom: 15px; }
100% { bottom: 0; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="right-section">
<img />
</div>
I'm looking for some help with my java script game as i have just started getting into it now,
my problem is that my animation loops infinitely on autopay and reloads the page every time it meets the condition to restart,
what I want to achieve is have a start button that would start the game and the animation and score on click and if the condition for restart is met I have to press the start button again to play again
I would appreciate all the help I could get
const skate = document.getElementById("skate");
const rock = document.getElementById("rock");
const score = document.getElementById("score");
function jump() {
skate.classList.add("jump-animation");
setTimeout(() =>
skate.classList.remove("jump-animation"), 500);
}
document.addEventListener('keypress', (event) => {
if (!skate.classList.contains('jump-animation')) {
jump();
}
})
setInterval(() => {
const skateTop = parseInt(window.getComputedStyle(skate)
.getPropertyValue('top'));
const rockLeft = parseInt(window.getComputedStyle(rock)
.getPropertyValue('left'));
score.innerText++;
if (rockLeft < 0) {
rock.style.display = 'none';
} else {
rock.style.display = ''
}
if (rockLeft < 50 && rockLeft > 0 && skateTop > 150) {
location.reload();
}
}, 50);
#score { text-align: center; }
#game {
width: 600px;
height: 300px;
border: 2px solid black;
margin: auto;
background-image: url("./background.gif");
background-size: cover;
}
#skate {
height: 75px;
width: 75px;
top: 220px;
position: relative;
background-image: url("./skateboard.png");
background-size: cover;
}
#rock {
width: 50px;
height: 50px;
position: relative;
top: 175px;
left: 550px;
background-image: url("./rock.png");
background-size: cover;
animation: rock 1.33s infinite;
}
#keyframes rock {
0%{left: 550px;}
100%{left: -50px;}
}
.jump-animation {
animation: jump 0.5s;
}
#keyframes jump {
0%{top: 225px;}
50%{top: 75px;}
75%{top: 75px;}
100%{top: 225px;}
}
<div id="game">
<div id="skate"></div>
<div id="rock"></div>
</div>
<h1 id="score">0</h1>
The trick here is to have a variable at the top scope of this module to track the ID of the current animation so that the animation/interval can be turned off if the user presses the start button before the current game ends. It should also turn off once the end-game condition is met, although I'm not really sure why window.getComputedStyle() is being used to compute the variables used for that condition, but I guess it's still a work in progress.
EDIT: Somehow I didn't notice that the player and obstacle were already in the game so I added colors to them for easier debugging, at least on my end. This time I made it so that the rock will lose then immediately regain a class for its animation, but the re-addition needs to be asynchronous even if the delay is 0ms.
index.html
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game">
<div id="skate"></div>
<div id="rock"></div>
</div>
<h1 id="score">0</h1>
</div>
<div>
<button id="new-game">New Game </button>
</div>
</body>
<script>
const skate = document.getElementById("skate");
const rock = document.getElementById("rock");
const score = document.getElementById("score");
const newGameButton = document.getElementById("new-game");
function jump() {
skate.classList.add("jump-animation");
setTimeout(() => skate.classList.remove("jump-animation"), 500);
}
document.addEventListener('keypress', (event) => {
if (!skate.classList.contains('jump-animation')) {
jump();
}
});
let animationId;
newGameButton.addEventListener('click', () => {
resetScore();
resetRockAnimation();
playScoreAnimation();
function resetScore() {
clearInterval(animationId);
score.innerText = 0;
}
function resetRockAnimation() {
rock.classList = [];
setTimeout(() => rock.classList.add('rock-animation'), 0);
}
function playScoreAnimation() {
animationId = setInterval(() => {
const skateTop = parseInt(window.getComputedStyle(skate).getPropertyValue('top'));
const rockLeft = parseInt(window.getComputedStyle(rock).getPropertyValue('left'));
score.innerText++;
if (rockLeft < 0) {
rock.style.display = 'none';
}
else {
rock.style.display = '';
}
if (rockLeft < 50 && rockLeft > 0 && skateTop > 150) {
clearInterval(animationId);
}
}, 50);
}
});
</script>
style.css
#score {
text-align: center;
}
#game {
width: 600px;
height: 300px;
border: 2px solid black;
margin: auto;
background-image: url("./background.gif");
background-size: cover;
}
#skate {
height: 75px;
width: 75px;
top: 225px;
position: relative;
background-image: url("./skateboard.png");
background-size: cover;
background-color: slategrey;
}
#rock {
width: 50px;
height: 50px;
position: relative;
top: 175px;
left: 550px;
background-image: url("./rock.png");
background-size: cover;
background-color: lightcoral ;
}
.rock-animation {
animation: rock 1.33s infinite;
}
#keyframes rock {
0% {
left: 550px;
}
100% {
left: -50px;
}
}
.jump-animation {
animation: jump 0.5s;
}
#keyframes jump {
0% {
top: 225px;
}
50% {
top: 75px;
}
75% {
top: 75px;
}
100% {
top: 225px;
}
}
I'm trying to create a javascript program after I press my enter key, it will finish executing the program then my page will refresh. I try to add an if loop inside my last function but it not working.
Hope someone can help me out with my coding. As I'm really new to HTML CSS and javascript.
The bottom will be my program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <meta http-equiv="refresh" content="30"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
.robot_start_top {
top: 280px;
transition: top 2s;
}
.robot_start_left {
position: fixed;
left: 600px;
transition: all 2s;
}
.robot_end_left {
left: 570px;
}
.robot_end_top {
top: 180px;
}
.robot1_start_left {
position: fixed;
left: 570px;
transition: left 4s;
}
.robot1_end_left {
left: 520px;
}
.robot2_start_left {
position: fixed;
left: 520px;
transition: left 4s;
}
.robot2_end_left {
left: 470px;
}
.robot3_start_left {
position: fixed;
left: 470px;
transition: left 4s;
}
.robot3_end_left {
left: 420px;
}
.robot3_start_right {
position: fixed;
left: 470px;
transition: left 4s;
}
.robot3_start_down {
position: fixed;
left: 180px;
transition: left 4s;
}
.robot3_end_down {
top: 280px;
}
.robot3_end_right {
left: 570px;
}
</style>
</head>
<body onkeydown="move(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" style= width:30px; height:40px" src="pic_8.PNG">
</div>
<script>
var move = function(event) {
if (event.keyCode === 97) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot_end_left");
}, 2000);
}
if (event.keyCode === 98) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot1_end_left");
}, 2000);
}
if (event.keyCode === 99) {
const appDiv = document.getElementById("app");
appDiv.classList.add("robot2_end_left");
}
if (event.keyCode === 100) {
const appDiv = document.getElementById("app");
appDiv.classList.add("robot3_end_left");
}
if (event.keyCode === 13) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot3_end_down");
}, 2000);
setTimeout(function() {
appDiv.classList.add("robot3_end_right");
}, 0);
window.location = '';
}
}
</script>
</body>
</html>
Just use window.location.reload(true) at the end of your function
You might have to use setTimeout(window.location.reload(true), 0) to set the reload to the end of the execution stack, however
var move = function (event) {
if (event.keyCode === 97) {
// Code
}
if (event.keyCode === 98) {
// Code
}
if (event.keyCode === 99) {
// Code
}
if (event.keyCode === 100) {
// Code
}
if (event.keyCode === 13) {
// Code
}
setTimeout(window.location.reload(true), 0);
}
I need you guys to help with my program, I manage to program it when I press a key and its moves. But when I press the keypad "1", my robot teleported to my first location after that move to my next location. But what I needed is, when pressing the keypad "1", the robot to move to the first location then move to the second location.
Please help me as I'm new to HTML, CSS, and java.
The bottom is my coding for the function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
.robot_start_top {
top: 280px;
transition: top 2s;
}
.robot_start_left {
position: fixed;
left: 600px;
transition: all 2s;
}
.robot_end_left {
left: 570px;
}
.robot_end_top {
top: 180px;
}
.robot1_start_left {
position: fixed;
left: 570px;
transition: left 4s;
}
.robot1_end_left {
left: 520px;
}
.robot2_start_left {
position: fixed;
left: 520px;
transition: left 4s;
}
.robot2_end_left {
left: 470px;
}
.robot3_start_left {
position: fixed;
left: 470px;
transition: left 4s;
}
.robot3_end_left {
left: 420px;
}
.robot3_start_right {
position: fixed;
left: 470px;
transition: left 4s;
}
.robot3_start_down {
position: fixed;
left: 180px;
transition: left 4s;
}
.robot3_end_down {
top: 280px;
}
.robot3_end_right {
left: 570px;
}
</style>
</head>
<body onkeydown="move(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" style= width:30px; height:40px" src="pic_8.PNG">
</div>
<script>
var move = function(event) {
if (event.keyCode === 97) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot_end_left");
}, 2000);
}
if (event.keyCode === 98) {
const appDiv = document.getElementById("app");
appDiv.classList.add("robot1_end_left");
}
if (event.keyCode === 99) {
const appDiv = document.getElementById("app");
appDiv.classList.add("robot2_end_left");
}
if (event.keyCode === 100) {
const appDiv = document.getElementById("app");
appDiv.classList.add("robot3_end_left");
}
if (event.keyCode === 13) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot3_end_down");
}, 2000);
setTimeout(function() {
appDiv.classList.add("robot3_end_right");
}, 0);
}
}
</script>
</body>
</html>
The problem is that you want to move your image to the top and left at once and your left argument is not working here, because you don't move it to the only left in the first click. To do the right way you must replace the left to all in robot_start_left like this:
.robot_start_left {
position: fixed;
left: 600px;
transition: all 1s;
}
Here is the working option in CodeSandBox.
Or you can add setTimeout to the event listener. That will give you asynchronous effect, like this:
if (event.keyCode === 97) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot_end_left");
}, 500);
}
For more info read this Article.
Good Luck!
I'm trying to create a JavaScript program after I press my enter key, it will finish executing the program then my page will refresh. I try to add an if loop inside my last function but it not working.
I'm really new to HTML CSS and JavaScript.
The bottom will be my program:
var move = function(event) {
if (event.keyCode === 97) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot_end_left");
}, 2000);
}
if (event.keyCode === 98) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot1_end_left");
}, 2000);
}
if (event.keyCode === 99) {
const appDiv = document.getElementById("app");
appDiv.classList.add("robot2_end_left");
}
if (event.keyCode === 100) {
const appDiv = document.getElementById("app");
appDiv.classList.add("robot3_end_left");
}
if (event.keyCode === 13) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot3_end_down");
}, 2000);
setTimeout(function() {
appDiv.classList.add("robot3_end_right");
}, 0);
setTimeout(window.location.reload(true), 0);
}
}
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
.robot_start_top {
top: 280px;
transition: top 2s;
}
.robot_start_left {
position: fixed;
left: 600px;
transition: all 2s;
}
.robot_end_left {
left: 570px;
}
.robot_end_top {
top: 180px;
}
.robot1_start_left {
position: fixed;
left: 570px;
transition: left 4s;
}
.robot1_end_left {
left: 520px;
}
.robot2_start_left {
position: fixed;
left: 520px;
transition: left 4s;
}
.robot2_end_left {
left: 470px;
}
.robot3_start_left {
position: fixed;
left: 470px;
transition: left 4s;
}
.robot3_end_left {
left: 420px;
}
.robot3_start_right {
position: fixed;
left: 470px;
transition: left 4s;
}
.robot3_start_down {
position: fixed;
left: 180px;
transition: left 4s;
}
.robot3_end_down {
top: 280px;
}
.robot3_end_right {
left: 570px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <meta http-equiv="refresh" content="30"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body onkeydown="move(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" style= width:30px; height:40px" src="pic_8.PNG">
</div>
</body>
</html>
setTimeout(window.location.reload(true), 0);
That doesn't do what you think it does. It will reload immediately, rendering the setTimeout useless.
Try this instead:
setTimeout(function() { window.location.reload(true); }, 0);
Or this, if you can use arrow functions:
setTimeout(() => window.location.reload(true), 0);