reset a setinterval after once clicking keybored arrows

reset a setinterval after once clicking keybored arrows - javascript

hi i want to make to move something like a car with setinterval but when i clicked the button after once
setinterval called again than its speed looks come more than after clicking so i want use one interval not more can help me?
i know answerd this question befor me but it didnt work for me or i cant use it im so tired about that
//variables
var m_tank = document.getElementById("tank");
//var message = document.getElementById("show_car_info");
var iv, a, s;
//functions
function loaded() {
alert("hello");
}
function start_game(e) {
a = 0;
//for (s = 5000; s == 0; s -= 5) {}
if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40) {
s = 1000;
iv = setInterval(() => {
moving(m_tank);
}, s);
}
}
function moving(m_tank) {
a += 10;
var l_num = m_tank.offsetLeft;
var t_num = m_tank.offsetTop;
if (e.keyCode == 39) {
//alert("ArrowRight");
l_num += a;
console.log("right:" + l_num, "a_right:" + a);
} else if (e.keyCode == 37) {
//alert("ArrowLeft");
l_num -= a;
console.log("left:" + l_num, "a_left:" + a);
} else if (e.keyCode == 38) {
//alert("ArrowUp");
t_num -= a;
console.log("Up:" + t_num, "a_up:" + a);
} else if (e.keyCode == 40) {
//alert("ArrowDown");
t_num += a;
console.log("Down:" + t_num, "a_down:" + a);
}
m_tank.style.left = l_num + "px";
m_tank.style.top = t_num + "px";
}
body {
background-color: lightsteelblue;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
overflow: hidden;
}
#tank {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
background-color: brown;
}
<body onload="loaded()" onkeydown="start_game(e=event)">
<!-- <p id="show_car_info"></p> -->
<div>
<div id="tank">
<p>tank</p>
</div>
</div>
</body>

Related

how both player move at the same time (js game)

И have a hockey game in javascript but tво players can not move at the same time. In fact, when one moves, the other remains motionless. It is normal for both players to move at the same time in this game. Do you know a function that can help me? Should a foreign function be added? Thank you for your help.
<html>
<head>
<style>
body {
margin: 0;
}
.P1 {
position: absolute;
font-size: 110px;
background-color: white;
}
.P2 {
position: absolute;
left: 1500px;
font-size: 110px;
background-color: white;
}
</style>
</head>
<body onkeydown="keyD(event)">
<span class="P1">|</span>
<span class="P2">|</span>
</body>
<script>
var P1D = 0;
var P2D = 0;
var spanP1 = document.getElementsByClassName("P1")[0];
var spanP2 = document.getElementsByClassName("P2")[0];
function keyD(e) {
if (e.keyCode == 38 || e.keyCode == 40) {
f1(e);
}
if (e.keyCode == 83 || e.keyCode == 87) {
f2(e);
}
}
function f1(e) {
if (e.keyCode == 40) {
if (P2D >= 620) {
} else {
P2D += 10;
spanP2.style.top = P2D + "px";
}
}
if (e.keyCode == 38) {
if (P2D <= -20) {
} else {
P2D -= 10;
spanP2.style.top = P2D + "px";
}
}
}
function f2(e) {
if (e.keyCode == 83) {
if (P1D >= 620) {
} else {
P1D += 10;
spanP1.style.top = P1D + "px";
}
}
if (e.keyCode == 87) {
if (P1D <= -20) {
} else {
P1D -= 10;
spanP1.style.top = P1D + "px";
}
}
}
</script>
</html>

You would need to remember which keys are pressed down or not. For example by saving their state in an object.
Furthermore, when player 1 has a key pressed and player 2 starts pressing another, the key of player 1 stops repeating for a moment. To prevent this you would need to stop relying on the key repeat of the system of the user. For example by using a setInterval or later implement it into your gameloop. Example:
// Save key states in an object
const keystates = {}
document.addEventListener('keydown', e => {
keystates[e.code] = true
})
document.addEventListener('keyup', e => {
keystates[e.code] = false
})
// Repeat the key action in your gameloop
const repeat_interval = 500
setInterval(() => {
if (keystates['KeyW']) console.log('Player1 up')
if (keystates['KeyS']) console.log('Player1 down')
if (keystates['ArrowUp']) console.log('Player2 up')
if (keystates['ArrowDown']) console.log('Player2 down')
}, repeat_interval)
EDIT:
Also don't use keyCode as it is deprecated

Why do I get the Error: "Cannot read property 'style' of null" on line 216 because of something also on lines 190, 200, 213?

* I can't figure out why I get the following error on my console: "Cannot read property 'style' of null" on line 216(near the bottom, I have put a comment) because of something also on lines 190, 200, 213? I think the problem is about the laser variable... Please help. I would really appreciate if someone could help me as soon as possible.*
'''
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<div>
<h1 style="text-align:center; color:purple;" id="pixelator">
<big>
<i>
<b>
Pixelator
</b>
</i>
</big>
</h1>
<button type="button" id="button1" onclick="Instructions()">Instructions for game</button>
<button type="button" id="button2" onclick="YouTube()">YouTube</button>
<h3 id="Instructions1">
Use the keys WASD to controll player one(blue), Q to
shoot left and E to shoot right. Use the arrow keys to controll player two(),
1 on the numberpad to shoot left and two to shoot right.
</h3>
<button type="button" id="Close" onclick="close1()">Close</button>
</div>
<img src="C:/Users/Tania/Documents/Website/Screenshots/Nice.jpg" alt="Image not found" id="Pic">
</head>
<body style="background-color:green">
<style>
button {
background-color: #4169E1;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 30%;
height: 45px;
}
#hero {
background:#ff0000;
width:20px;
height:50px;
position:absolute;
}
#player {
background:#ff0000;
width:20px;
height:50px;
position:absolute;
}
#Pic {
width: 150px;
}
#laser {
width: 30;
height: 3;
background:#ff0000
position:absolute;
}
</style>
<div id="player"></div>
<div id="hero"></div>
<div id="laser"></div>
<script type="text/javascript">
function YouTube(){
window.open("https://www.youtube.com/channel/UCe9MhUIA6wwwchVBzypCBnA");
}
document.getElementById("Instructions1").style.display = "none";
document.getElementById("Close").style.display = "none";
function Instructions() {
document.getElementById("Instructions1").style.display = "block";
document.getElementById("Close").style.display = "block";
}
function close1() {
document.getElementById("Instructions1").style.display = "none";
document.getElementById("Close").style.display = "none";
}
var LEFT_KEY = 65;
var UP_KEY = 87;
var RIGHT_KEY = 68;
var DOWN_KEY = 83;
var LEFT_ARROW = 37;
var RIGHT_ARROW = 39;
var SPACE_KEY = 32;
var DOWN_ARROW = 40;
var UP_ARROW = 38;
var Q_KEY = 81;
var E_KEY = 69;
var HERO_MOVEMENT = 10;
var lastLoopRun = 0;
var controller = new Object();
var player = new Object();
player.element = 'player'
player.x = 650;
player.y =460;
var hero = new Object();
hero.element = 'hero';
hero.x = 250;
hero.y = 460;
var laser = new Object();
laser.x = 0;
laser.y = -120;
function ensureBounds(sprite, ignoreY) {
if (sprite.x < 20) {
sprite.x = 20;
}
if (!ignoreY && sprite.y < 20) {
sprite.y = 20;
}
if (sprite.x + sprite.w > 1910) {
sprite.x = 1910 - sprite.w;
}
if (!ignoreY && sprite.y + sprite.h > 940) {
sprite.y = 940 - sprite.h;
}
}
function createSprite(element, x, y, w, h) {
var result=new Object();
result.element=element;
result.x=x;
result.y=y;
result.w=w;
result.h=h;
return result;
}
function toggleKey(keyCode, isPressed) {
if (keyCode == DOWN_KEY) {
controller.down = isPressed;
}
if (keyCode == LEFT_KEY) {
controller.left = isPressed;
}
if (keyCode == RIGHT_KEY) {
controller.right = isPressed;
}
if (keyCode == UP_KEY) {
controller.up = isPressed;
}
if (keyCode == SPACE_KEY) {
controller.space = isPressed;
}
if (keyCode == LEFT_ARROW) {
controller.leftarrow = isPressed;
}
if (keyCode == RIGHT_ARROW) {
controller.rightarrow = isPressed;
}
if (keyCode == UP_ARROW) {
controller.rightarrow = isPressed
}
if (keyCode == DOWN_ARROW) {
controller.downarrow = isPressed
}
if (keyCode == Q_KEY) {
controller.qkey = isPressed
}
if (keyCode == E_KEY) {
controller.ekey = isPressed
}
}
function handleControls() {
if (controller.down) {
hero.y += HERO_MOVEMENT
}
if (controller.up) {
hero.y -= HERO_MOVEMENT
}
if (controller.left) {
hero.x -= HERO_MOVEMENT;
}
if (controller.right) {
hero.x += HERO_MOVEMENT;
}
if (controller.qkey && laser.x <= -120) {
laser.x=hero.x-20;
laser.y=hero.y+15;
}
if (controller.ekey && laser.x <= -120) {
laser.x=hero.x+20;
laser.y=hero.y+10;
}
ensureBounds(hero);
}
function showSprites() {
setPosition(hero);
setPosition(laser);
setPosition(player)
}
function updatePositions() {
laser.x-= 90
}
function loop() {
if (new Date().getTime() - lastLoopRun > 40) {
updatePositions();
handleControls();
showSprites();
lastLoopRun = new Date().getTime();
}
setTimeout('loop();', 2);
}
document.onkeydown = function(evt) {
toggleKey(evt.keyCode, true);
};
document.onkeyup = function(evt) {
toggleKey(evt.keyCode, false);
};
loop();
function setPosition(sprite) {
var e = document.getElementById(sprite.element)
//***LINE 216-*** e.style.left = sprite.x + 'px';
e.style.top = sprite.y + 'px';
}
createSprite('laser', 0, -120, 2, 50)
</script>
</body>
</html>
'''

Your laser object doesn't have the laser.element property set, if you add laser.element='laser'; after the laster.x and laser.y inicializations (line 104) this error should be fixed

How to fix an issue in my javascript slider range?

Hi I'm trying to fix an issue in my JavaScript and unfortunately I'm a little stuck on where I'm going wrong here.
I'm designing a slider where the sliders thumb changes to a different range which is currently 1 - 5. The issue is that I cannot seem to get the emojis to appear as they should when the slider changes.
Here is what I'm working with:
var slider = document.getElementById('myRange')
function onChange(event) {
var x = event.target.value
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 6) {
slider.className = 'MyClass-1'
} else if (x > 6) {
slider.className = 'MyClass-2'
} else if (x > 6) {
slider.className = 'MyClass-3'
}
}
input[type=range] {
-webkit-appearance: none;
height: 20px;
width: 200px;
max-width: 100%;
margin: 25px auto;
background: #08121c;
border: 3px solid #08121c;
border-radius: 100px;
display: block;
}
input[type=range]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 35px;
width: 35px;
border-radius: 100%;
background-color: transparent;
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/18-slightly-smiling-face.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
}
input[type="range"].MyClass-1::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/06-grinning-face-with-smiling-eyes.svg);
}
input[type="range"].MyClass-2::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/12-smiling-face-with-sunglasses.svg);
}
input[type="range"].MyClass-3::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/13-smiling-face-with-heart-eyes.svg);
}
<div class="slider-bar">
<input type="range" id="myRange" min="1" max="5" value="1" />
</div>

What is going on with this function?:
function onChange(event) {
var x = event.target.value
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 6) {
slider.className = 'MyClass-1'
} else if (x > 6) {
slider.className = 'MyClass-2'
} else if (x > 6) {
slider.className = 'MyClass-3'
}
}
The last else if will never execute.
EDIT: If x is the integer that is the same number you want to match the class, you can simply replace all the code above with
slider.className = `MyClass-${x}`;

replace you JS script with this code and it should work.
however you do need to fix your if statement
var slider = document.getElementById("myRange");
slider.addEventListener('mouseup', function(event) {
var x = event.target.value
console.log(x)
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 4) {
slider.className = 'MyClass-1'
} else if (x > 4) {
slider.className = 'MyClass-2'
} else if (x > 5) {
slider.className = 'MyClass-3'
}
})

Your JS onchange event is not wired to anything. Try this
var slider = document.getElementById('myRange')
slider.onchange = function(event) {
var x = event.target.value
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 6) {
slider.className = 'MyClass-1'
} else if (x > 6) {
slider.className = 'MyClass-2'
} else if (x > 6) {
slider.className = 'MyClass-3'
}
JSFiddle
Your conditional statements need some work though, as they will not all be executed. Perhaps something like this:
slider.onchange = function(event) {
var x = event.target.value
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 4) {
slider.className = 'MyClass-1'
} else if (x > 4) {
slider.className = 'MyClass-2'
} else if (x > 5) {
slider.className = 'MyClass-3'
}
}

bouncing ball inside div

I'm trying to create a bouncing ball inside a div (it start from left to right) but then i want that when user press keyup it start bounce from top to bot (this with all arrows, also with: a, s, d, w).
Seems like my problem is when i try to clearInterval... but i don't know how to fix it...
var id=null;
myMove('dreta',id);
document.onkeyup = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38' || e.keyCode == '87') {
clearInterval(id);
myMove('adalt');
}
else if (e.keyCode == '40' || e.keyCode == '65') {
clearInterval(id);
myMove('abaix');
}
else if (e.keyCode == '37' || e.keyCode == '83') {
clearInterval(id);
myMove('esquerra');
}
else if (e.keyCode == '39' || e.keyCode == '68') {
clearInterval(id);
myMove('dreta');
}
}
function myMove(moviment,id) {
var rect = ball.getBoundingClientRect();
var elem = document.getElementById("ball");
var pos = rect.left;
var pos2 = rect.top;
id = setInterval(frame, 5);
function frame() {
if(moviment=='dreta'){
if (pos == 180) {
clearInterval(id);
myMove('esquerra');
}
else{
pos++;
elem.style.left = pos + "px";
}
}
else if (moviment=='esquerra'){
if (pos == 0) {
clearInterval(id);
myMove('dreta');
}
else{
pos--;
elem.style.left = pos + "px";
}
}
else if(moviment=='adalt'){
if (pos == 0) {
clearInterval(id);
myMove('abaix');
}
else{
pos++;
elem.style.top = pos + "px";
}
}
else{
if (pos == 180) {
clearInterval(id);
myMove('adalt');
}
else{
pos--;
elem.style.top = pos + "px";
}
}
}
}
#container {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
#ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: red;
}
<div id="container">
<div id="ball"></div>
</div>
PD: i know that can be more easy with canvas but i would like to do it on this way.

You need only 2 functions - first func changes moving direction and calls second one, which moves a ball while checking wether a ball has reached any border.
var id=null;
var rect = ball.getBoundingClientRect();
var elem = document.getElementById("ball");
var pos_left = rect.left;
var pos_top = rect.top;
var h_dir = 0, v_dir = 0;
document.onkeyup = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38' || e.keyCode == '87') {
v_dir = -1;
}
else if (e.keyCode == '40' || e.keyCode == '65') {
v_dir = 1;
}
else if (e.keyCode == '37' || e.keyCode == '83') {
h_dir = -1;
}
else if (e.keyCode == '39' || e.keyCode == '68') {
h_dir = 1;
}
clearInterval(id);
id = setInterval(frame, 5);
}
function frame() {
if (pos_left > 179 || pos_left < 1) {
h_dir *= -1;
}
if (pos_top < 1 || pos_top > 179) {
v_dir *= -1;
}
pos_left += h_dir;
elem.style.left = pos_left + "px";
pos_top += v_dir;
elem.style.top = pos_top + "px";
}
#container {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
#ball {
position: relative;
width: 20px;
height: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: red;
}
<div id="container">
<div id="ball"></div>
</div>

The first mistake is setting your variable to a null value. Set it to empty, but not null. Also, you only need one argument for your function as you never actually pass an id, just the movement (which has already been determined based on the keycode).
Give below a go
var id = "";
myMove('dreta');
document.onkeyup = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38' || e.keyCode == '87') {
clearInterval(id);
id = 'adalt';
} else if (e.keyCode == '40' || e.keyCode == '65') {
clearInterval(id);
id = 'abaix';
} else if (e.keyCode == '37' || e.keyCode == '83') {
clearInterval(id);
id = 'esquerra';
} else if (e.keyCode == '39' || e.keyCode == '68') {
clearInterval(id);
id = 'dreta';
}
myMove(id);
}
function myMove(moviment) {
var rect = ball.getBoundingClientRect();
var elem = document.getElementById("ball");
var pos = rect.left;
var pos2 = rect.top;
id = setInterval(frame, 5);
function frame() {
if (moviment == 'dreta') {
if (pos == 180) {
clearInterval(id);
myMove('esquerra');
} else {
pos++;
elem.style.left = pos + "px";
}
} else if (moviment == 'esquerra') {
if (pos == 0) {
clearInterval(id);
myMove('dreta');
} else {
pos--;
elem.style.left = pos + "px";
}
} else if (moviment == 'adalt') {
if (pos == 0) {
clearInterval(id);
myMove('abaix');
} else {
pos++;
elem.style.top = pos + "px";
}
} else {
if (pos == 180) {
clearInterval(id);
myMove('adalt');
} else {
pos--;
elem.style.top = pos + "px";
}
}
}
}
#container {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
#ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: red;
}
<div id="container">
<div id="ball"></div>
</div>

I finally solved my problem using a global variable wich detect wich direction should have the ball
function myMove() {
var rect = ball.getBoundingClientRect();
var elem = document.getElementById("ball");
var pos = rect.left;
var pos2 = rect.top;
id_interval = setInterval(frame, 5);
function frame() {
if(moviment=='dreta'){
if (pos == 180) {
clearInterval(id_interval);
moviment = 'esquerra';
myMove();
}
else{
pos++;
elem.style.left = pos + "px";
}
}
else if (moviment=='esquerra'){
if (pos == 0) {
clearInterval(id_interval);
moviment = 'dreta';
myMove();
}
else{
pos--;
elem.style.left = pos + "px";
}
}
else if(moviment=='adalt'){
if (pos2 == 0) {
clearInterval(id_interval);
moviment = 'abaix';
myMove();
}
else{
pos2--;
elem.style.top = pos2 + "px";
}
}
else{
if (pos2 == 180) {
clearInterval(id_interval);
moviment = 'adalt';
myMove();
}
else{
pos2++;
elem.style.top = pos2 + "px";
}
}
}
}
var moviment = 'esquerra';
myMove();
document.onkeyup = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38' || e.keyCode == '87') {
moviment = 'adalt';
}
else if (e.keyCode == '40' || e.keyCode == '65') {
moviment = 'abaix';
}
else if (e.keyCode == '37' || e.keyCode == '83') {
moviment = 'esquerra';
}
else if (e.keyCode == '39' || e.keyCode == '68') {
moviment = 'dreta';
}
}
#container {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
#ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: red;
}
<div id="container">
<div id="ball"></div>
</div>

Javascript +/+= Operator

I am having trouble with a basic movement engine I have made, where the Up key triggers a function making a small div go up, and the Down key doing the opposite. I am fairly sure it's to do with the += in the Down() function, and I have tested it with -=, which works fine, just I can't work out what might be clashing with the function.
At the bottom, I have put a comment to indicate where my problem is.
var interval = '';
var key = false;
var interval1 = '';
var key1 = false;
$(document).keydown(function(e) {
if(e.which === 38) {
if(key === false){
interval = setInterval(function(){Up()},20)
key = true;
}
}
if(e.which === 40) {
if(key1 === false){
interval1 = setInterval(function(){Down()},20)
key1 = true;
}
}
});
$(document).keyup(function(e) {
if(e.which === 38) {
clearInterval(interval)
key = false;
}
if(e.which === 40) {
clearInterval(interval1)
key1 = false;
}
});
document.getElementById('Jumper').style.top = '46%';
var Top = parseInt(document.getElementById('Jumper').style.top);
var Topp = parseInt(document.getElementById('Jumper').style.top);
function Up(){
if(Top > 0){
Top = parseInt(document.getElementById('Jumper').style.top);
Top -= 0.2;
document.getElementById('Jumper').style.top = Top+'%';
}
}
function Down(){
if(Topp > 0){
Topp = parseInt(document.getElementById('Jumper').style.top);
Topp += 0.2; //<--PROBLEM
document.getElementById('Jumper').style.top = Topp+'%';
}
}
#Jumper{
position: absolute;
top: 46%;
left: 48%;
height: 8%;
width: 4%;
background-color: red;
opacity: 1;
}
<div id='Jumper'></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Can anyone please tell me how I can fix this?
Here is a fiddle of it: https://jsfiddle.net/Tobsta/2gnoq5hx/

You must use parseFloat(), because parseInt returns integer ::
Topp = parseFloat(document.getElementById('Jumper').style.top);
https://jsfiddle.net/2gnoq5hx/3/

It was this line that stuffed it all up:
Topp = parseInt(document.getElementById('Jumper').style.top);
Thanks Juhana for pointing that out.
Here's the working thing:
var interval = '';
var key = false;
var interval1 = '';
var key1 = false;
var interval2 = '';
var key2 = false;
var interval3 = '';
var key3 = false;
$(document).keydown(function(e) {
if(e.which === 38) {
if(key === false){
interval = setInterval(function(){Up()},20)
key = true;
}
}
if(e.which === 40) {
if(key1 === false){
interval1 = setInterval(function(){Down()},20)
key1 = true;
}
}
if(e.which === 37) {
if(key2 === false){
interval2 = setInterval(function(){Left()},20)
key2 = true;
}
}
if(e.which === 39) {
if(key3 === false){
interval3 = setInterval(function(){Right()},20)
key3 = true;
}
}
});
$(document).keyup(function(e) {
if(e.which === 38) {
clearInterval(interval)
key = false;
}
if(e.which === 40) {
clearInterval(interval1)
key1 = false;
}
if(e.which === 37) {
clearInterval(interval2)
key2 = false;
}
if(e.which === 39) {
clearInterval(interval3)
key3 = false;
}
});
document.getElementById('Jumper').style.top = '46%';
document.getElementById('Jumper').style.left = '48%';
var a = parseInt(document.getElementById('Jumper').style.top);
var b = parseInt(document.getElementById('Jumper').style.left);
function Up(){
if(a > 0){
a -= 1;
document.getElementById('Jumper').style.top = a+'%';
}
}
function Down(){
if(a < 92){
a += 1;
document.getElementById('Jumper').style.top = a+'%';
}
}
function Left(){
if(b > 0){
b -= 0.5;
document.getElementById('Jumper').style.left = b+'%';
}
}
function Right(){
if(b < 96){
b += 0.5;
document.getElementById('Jumper').style.left = b+'%';
}
}
#Jumper{
position: absolute;
top: 46%;
left: 48%;
height: 8%;
width: 4%;
background-color: red;
opacity: 1;
}
<div id='Jumper'></div>
Or the js fiddle
http://www.jsfiddle.net/Tobsta/2gnoq5hx/2

Develop Reference

JavaScript is the programming language of the Web.

reset a setinterval after once clicking keybored arrows - javascript

Related

how both player move at the same time (js game)

Why do I get the Error: "Cannot read property 'style' of null" on line 216 because of something also on lines 190, 200, 213?

How to fix an issue in my javascript slider range?

bouncing ball inside div

Javascript +/+= Operator

Categories

Resources