JSFiddle - React, Tailwind, and code Playground
by frogggeee McFrogggeee
HTML
<!DOCTYPE html>
<html>
<head>
<body>
<h1>scrolling game test</h1>
<p>by frogggeee</p>
<p id="rendering"></p>
<p id="coins"></p>
<canvas id="canvas" width="480" height="360"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let coins = 0;
let rendering = 0;
let obsticalsType = [];
let obsticalsX = [];
let obsticalsY = [];
let x = 0;
let y = 0;
let playerX = 170;
let playerY = 170;
let rightPressed = false;
let leftPressed = false;
let upPressed = false;
let downPressed = false;
let background = new Image();
let ednaMode = new Image();
let bobsBoss = new Image();
let trump = new Image();
let money = new Image();
money.src = "https://dumielauxepices.net/sites/default/files/coin-clipart-transparent-background-897417-1120160.png";
trump.src = "https://clipart.info/images/ccovers/1495816049surprised-face-trump-png-transparent-clip-art.png";
bobsBoss.src = "http://www.stickpng.com/assets/thumbs/5a0c3f455a997e1c2cea115b.png"
ednaMode.src = "https://vignette.wikia.nocookie.net/pixar/images/8/8b/I2_-_Edna.png/revision/latest?cb=20180621022628";
background.src = "http://www.wsicuttingedgeedesign.com/wp-content/uploads/green-background-grama-textura-green-verde-background-pattern.jpg";
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if (e.keyCode == 39) {
rightPressed = true;
} else if (e.keyCode == 37) {
leftPressed = true;
}
if (e.keyCode == 40) {
upPressed = true;
} else if (e.keyCode == 38) {
downPressed = true;
}
}
function...