I'm making a new online game. When I click a button, I want the red square to translate on the X-axis by 50px. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>cake (singleplayer 2d adventure game)</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
function moveright() {
document.getElementById("master-cube").style.transform = "translateX(50px)";
}
</script>
<div id="master-cube"></div><img src="arrows/rightarrow.png" alt=h"Right Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="60vh" width="60vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/leftarrow.png" alt="Left Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">
</body>
</html>
I understand that the images will not load. If you scroll down, you will find a Repl.it.
Here is the CSS:
html {margin: none;}
body {margin: none; width: 100vw; height: 100vh;}
.arrowcontrols {float: right; margin-right: 5px; margin-top: 90%; margin-bottom: 10%;}
#master-cube {background-color: #FF0000; height: 40px; width: 40px;}
If you want to see the Repl.it, here is the link for it: https://repl.it/@ritzcrackerz201/cake