Before I get into my question, please remember these following things:
- I have no interest in using a game engine.
- I am using HTML, CSS and JavaScript to make this game.
- I am using 3 arrow keys as controls, on the event that someone clicks one, it should move in the direction the arrow is facing.
Question
When I click the right arrow key several times, and then press the jump box, the targeted HTML object, master-cube moves back to its natural position and then executes the movejump() function there, but I want the HTML object to move from its current position.
I understand that transform will fire from its natural position, but is there a line of code telling it to run from its current position? That’s what’s desired.
Here is a repl.it link: https://repl.it/@ritzcrackerz201/cake
And here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>cake (singleplayer 2d adventure game)</title>
<style>
html {
margin: none;
}
body {
margin: none;
width: 100vw;
height: 100vh;
}
.arrowcontrols {
float: left;
margin-right: 5px;
margin-top: 20%;
margin-bottom: 80%;
}
#master-cube {
background-image: url("mastercubes/master1.png");
background-size: 100%;
height: 40px;
width: 40px;
transition: all 0.5s;
position: absolute;
}
</style>
</head>
<body>
<script>
let xarrowmovement = 0;
function moveright() {
xarrowmovement += 80;
document.getElementById("master-cube").style.transform = `translateX(${xarrowmovement}%)`;
console.log("Executing function 'moveright()'. Moving a distance of " + xarrowmovement + "%");
}
function moveleft() {
xarrowmovement += -80;
document.getElementById("master-cube").style.transform = `translateX(${xarrowmovement}%)`;
console.log("Executing function 'moveleft()'. Moving a distance of " + xarrowmovement + "%");
}
let jumpboxupmovementy = 0;
function movejump() {
jumpboxupmovementy += 80;
document.getElementById("master-cube").style.transform = `translateY(${-jumpboxupmovementy}%)`;
console.log("Executing function 'movejump()'. Moving a distance of " + jumpboxupmovementy + "%");
setTimeout(function(){
jumpboxupmovementy -= 80;
document.getElementById("master-cube").style.transform = `translate(${jumpboxupmovementy}%)`;
}, 500);
}
</script>
<div id="master-cube"></div>
<img src="arrows/leftarrow.png" alt="Left Arrow" height="80vh" width="80vw" onclick="moveleft()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="80vh" width="80vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/rightarrow.png" alt="Right Arrow" height="80vh" width="80vw" onclick="moveright()" class="arrowcontrols">
</body>
</html>