JSFiddle - React, Tailwind, and code Playground

by Sébastien Lorentz

HTML

<p>Utilisez les flèches directionnelles</p>
<div id="map">
    <div id="player"></div>
    <div id="player2"></div>
    <div id="wall1" class="wall solid"></div>
    <div id="wall2" class="wall ice"></div>
    <div id="wall3" class="wall solid"></div>
    <div id="pool1" class="water"></div>
</div>
<button id="stopGame">end game</button>
<!-- <br />Change speed of player :
<input id="speed" value="1" type="number"></input>
<br/>Change speed of game (in ms) :
<input id="gameSpeed" value="0" type="number"></input>-->

CSS

#map * {
    position : absolute;
}
#map {
    height: 300px;
    width : 600px;
    background-color:RGB(225,225,225);
    position : relative;
    z-index : -99
}
#player {
    height: 30px;
    width : 20px;
    background-color : red;
    z-index : 99;
}
#player2 {
    height: 30px;
    width : 20px;
    background-color : green;
    z-index : 99;
}
#wall1 {
    height: 100px;
    width : 100px;
    top : 200px;
    left : 400px;
    background-color:black;
}
#wall2 {
    height: 30px;
    width : 350px;
    top : 75px;
    left : 0px;
    background-color:lightblue;
}
#wall3 {
    height: 100px;
    width : 100px;
    top : 150px;
    left : 450px;
    background-color:black;
}
#pool1 {
    height: 125px;
    width : 100px;
    top : 175px;
    left : 500px;
    background-color:blue;
    z-index:-1;
}

JavaScript

//Unit definition
var unitValue = 1;
var unitString = "px";

var player = $("#player");
var player2 = $("#player2");
var map = $("#map");
var keys = {
    "left": false,
        "up": false,
        "right": false,
        "down": false
}

var playerPos = {
    left: map.width() / 2 - player.width() / 2,
    top: map.height() / 2 - player.height() / 2
};

var player2Pos = {
    left: map.width() / 2 - player.width() / 2,
    top: map.height() - player.height()
};

var playerTop;
var playerBottom;
var playerLeft;
var playerRight;

var jump = true;
var dirRight = 0;
var jumpForce = -5 * unitValue;
var gravity = 0.1;
var vSpeed = 0;
var deceleration = 0;
var acceleration = 0;
var maxSpeed = 3 * unitValue;
var onWall = false;
var onIce = false;
var inWater = false;


function keyPressed(e) {
    if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40) e.preventDefault();

    if (e.keyCode == 37) // left
    keys.left = true;
    else if (e.keyCode == 39) // right
    keys.right = true;
    if (e.keyCode == 38) // up
    keys.up = true;
    else if (e.keyCode == 40) // down
    keys.down = true;
    //console.log(e.keyCode);
}

function keyReleased(e) {
    if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40) e.preventDefault();

    if (e.keyCode == 37) // left
    keys.left = false;
    else if (e.keyCode == 39) // right
    keys.right = false;
    if (e.keyCode == 38) // up
    keys.up = false;
    else if (e.keyCode == 40) // down
    keys.down = false;
}

/* ---Listeners--- */
// Key Listener
this.addEventListener("keydown", keyPressed, false);
this.addEventListener("keyup", keyReleased, false);
// Stop loop button listener
$("#stopGame").click(function () {
    clearInterval(loop);
});
$("#speed").on("input", function () {
    unitValue = parseFloat(document.getElementById("speed").value);
    maxSpeed = 5 * unitValue;
});
$("#gameSpeed").on("input", function () {
    clearInterval(loop);
    loop =...