JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simple 2D JavaScript engine - RobseRob.Dk</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// Made by RobseRob.dk
// Please give credit.
// Vars which contains key state
var movLeft = 0;
var movRight = 0;
var movUp = 0;
var movDown = 0;
var score = 0;
$(function() {
// Keydown listener
$("body").keydown(function(e) {
ek = e.keyCode;
if (ek==37) movLeft=1;
if (ek==39) movRight=1;
if (ek==38) movUp=1;
if (ek==40) movDown=1;
});
// Keyuo listener
$("body").keyup(function(e) {
ek = e.keyCode;
if (ek==37) movLeft=0;
if (ek==39) movRight=0;
if (ek==38) movUp=0;
if (ek==40) movDown=0;
});
setup(); // Do setup
});
// Setups the game. Adds a new div "tempMov" which is used to calculate whenever the player is allowed to move
function setup() {
var x = $(".player").css("left");
var y = $(".player").css("top");
var width = $(".player").width();
var height = $(".player").height();
$(".game").prepend("<div class='tempMov' style='position: absolute; left:"+x+"; top:"+y+"; width:"+width+"px; height:"+height+"px;'></div>");
setInterval("movTick()", 10); // Setup interval. Delay controlls tickrate.
}
// Checks if a is inside b
function insideGameArea(a, b) {
var aPos = a.position();
var aLeft = aPos.left;
var aRight = aPos.left + a.width();
var aTop = aPos.top;
var aBottom = aPos.top + a.height();
var bLeft = 0
var bRight = b.width();
var bTop = 0
var bBottom = b.height();
return !(aLeft < 0 || aTop < 0 || aRight > bRight || aBottom > bBottom);
}
// Checks if div a overlaps div b
function divOverlap(a, b) {
var aPos = a.position();
var bPos = b.position();
var aLeft = aPos.left;
var aRight =...