Which is the most efficient way to animate an HTML <img> element in vanilla javascript so that it jumps and falls back with acceleration.
Edit:
Im adding source code
index.html
<!doctype html>
<html>
<head>
<title>T-rex Runner by Gyan Prakash</title>
</head>
<body onclick="jump()">
<img src="./assets/dino.png" height="70px" width="90px" id="dino">
<img src="./assets/cacti1.png" height="40px" width="30px" id="cacti1">
<img src="./assets/cacti2.png" height="40px" width="30px" id="cacti2">
<img src="./assets/volcano.gif" height="60px" width="50px" id="volcano">
<img src="./assets/shield.png" height="22px" width="20px" id="shield">
<img src="./assets/wings.png" height="30px" width="50px" id="wings"><br>
<img src="./assets/level.png" height="20px" width="400px" id="level">
<script type="text/javascript" src="./main.js"></script>
<noscript><h3>Ah, Can you tell me who in this universe can expect to play a web based game with a browser not running javascript?</h3></noscript>
</body>
</html>
main.js
var dino = document.getElementById("dino");
var level = document.getElementById("level");
var cac1 = document.getElementById("cacti1");
var cac2 = document.getElementById("cacti2");
var vol = document.getElementById("volcano");
var shield = document.getElementById("shield");
var wings = document.getElementById("wings");
dino.style.position = "absolute";
level.style.position = "absolute";
cac1.style.position = "absolute";
cac2.style.position = "absolute";
vol.style.position = "absolute";
shield.style.position = "absolute";
wings.style.position = "absolute";
level.style.top = "160px";
dino.style.top = "100px";
var pos = 100;
function jump() {
function up() {
if (pos < 50) {
clearInterval(upt);
} else {
pos--;
dino.style.top = pos + "px";
}
}
var upt = setInterval(up, 10);
}
