JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<section>
<button onclick="draw()">draw()</button>
<br/>
<button onclick="obj.draw()">obj.draw()</button>
</section>
<article>
<div id="obj"></div>
<div id="ground"></div>
</article>
</div>
<!-- END CONTENT -->
CSS
#obj {
width: 50px;
height: 200px;
background: red;
position: absolute;
left: 100px;
bottom: 200px;
}
#ground {
width: 100%;
height: 200px;
background: #222;
position: absolute;
bottom: 0;
left: 0;
}
JavaScript
var obj = {
// variables
id: 'obj',
width: 50,
height: 200,
angle: 30,
speed: 20,
acceleration: 4 / 60,
deceleration: 2 / 60,
moving: false,
jumping: false,
// Get methods
x: function () {
return parseInt(window.getComputedStyle(document.getElementById(this.id)).left)
},
y: function () {
return parseInt(window.getComputedStyle(document.getElementById(this.id)).bottom)
},
// engine methods
scale_x: function () {
return Math.cos((this.angle * Math.PI) / 180)
},
scale_y: function () {
return Math.sin((this.angle * Math.PI) / 180)
},
velocity_x: function () {
return this.speed * this.scale_x()
},
velocity_y: function () {
return this.speed * this.scale_y()
},
cx: function () {
return this.x() + this.width
},
cy: function () {
return this.y() + this.height
},
// set methods
setAngle: function (val) {
this.angle = val
},
setAcceleration: function (val) {
this.acceleration = val / 60
},
setDeceleration: function (val) {
this.deceleration = val / 60
},
setSpeed: function (val) {
this.speed = val
},
setMoving: function (val) {
this.moving = val
},
setJumping: function (val) {
this.jumping = val
},
draw: function () {
var sender = this;
var draw = function () {
document.getElementById(sender.id).style.left = (sender.speed++) + 'px';
window.requestAnimationFrame(draw);
}
draw();
}
}
function draw() {
document.getElementById(obj.id).style.left = (obj.speed++) + 'px';
window.requestAnimationFrame(draw);
}