JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="game" width="800" height="600"></canvas>
JavaScript
function Vec2(x, y) {
this.x = x || 0;
this.y = y || 0;
}
Vec2.prototype.dot = function (v) {
return this.x * v.x + this.y * v.y;
};
Vec2.prototype.sub = function(v) {
return new Vec2(this.x - v.x, this.y - v.y);
};
Vec2.prototype.set = function (x, y) {
this.x = x || 0;
this.y = y || 0;
};
function Entity(pos, ext, color, dynamic) {
this.pos = pos;
this.ext = ext;
this.vel = new Vec2();
this.accel = new Vec2();
this.deltaPos = new Vec2();
this.newPos = new Vec2();
this.color = color;
this.dynamic = dynamic || false;
}
var canvas = document.getElementById("game");
ctx = canvas.getContext("2d");
var w = canvas.width,
h = canvas.height,
keystate = [];
document.body.addEventListener("keydown", function (event) {
keystate[event.keyCode] = true;
});
document.body.addEventListener("keyup", function (event) {
keystate[event.keyCode] = false;
});
function isKeyDown(key) {
return typeof keystate[key] != "undefined" && keystate[key];
}
var player = new Entity(new Vec2(w * 0.5, 150), new Vec2(50, 100), "blue", true),
elevator = new Entity(new Vec2(w * 0.5, 450), new Vec2(150, 30), "red", true),
wallTop = new Entity(new Vec2(w * 0.5, 10), new Vec2(w * 0.5, 10), "black"),
wallBottom = new Entity(new Vec2(w * 0.5, h - 10), new Vec2(w * 0.5, 10), "black"),
wallLeft = new Entity(new Vec2(10, h * 0.5), new Vec2(10, h * 0.5), "black"),
wallRight = new Entity(new Vec2(w - 10, h * 0.5), new Vec2(10, h * 0.5), "black");
var entities = [player, elevator, wallTop, wallBottom, wallLeft, wallRight];
var entityCount = entities.length,
dt = 1.0 / 60.0;
function solveCollisions() {
var entityIndex, entity, testEntityIndex, testEntity;
var grownExt,...