JSFiddle - React, Tailwind, and code Playground

by tychio

HTML

<body>
    <canvas id="canvas"></canvas>
</body>

CSS

body, html {
    width: 100%;
    height:100%;
}
#canvas {
    width: 100%;
    height: 100%;
}

JavaScript

(function ($, undefined) {
    var mouse = {
        x: -1,
        y: -1
    };
    document.addEventListener('pointerlockchange', change, false);
    document.addEventListener('mozpointerlockchange', change, false);
    document.addEventListener('webkitpointerlockchange', change, false);
    $("#canvas").click(function () {
        var canvas = $("#canvas").get()[0];
        canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock 
        || canvas.oRequestPointerLock || canvas.msRequestPointerLock;
        canvas.requestPointerLock();
    });

    function change(e) {
        var canvas = $("#canvas").get()[0];
        if (document.pointerLockElement === canvas || document.mozPointerLockElement === canvas || document.webkitPointerLockElement === canvas) {
            document.addEventListener("mousemove", move, false);
        } else {
            document.removeEventListener("mousemove", move, false);
            mouse = {
                x: -1,
                y: -1
            };
        }
    };

    function move(e) {
        var canvas = $("#canvas").get()[0];
        var ctx = canvas.getContext('2d');
        if (mouse.x == -1) {
            mouse = _position(canvas, e);
        }
        var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
        var movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
        mouse.x = mouse.x + movementX;
        mouse.y = mouse.y + movementY;
        if (mouse.x > $('#canvas').width() - 50) {
            mouse.x = $('#canvas').width() - 50;
        } else if (mouse.x < 0) {
            mouse.x = 0;
        }
        if (mouse.y > $('#canvas').height() - 50) {
            mouse.y = $('#canvas').height() - 50;
        } else if (mouse.y < 0) {
            mouse.y = 0;
        }
        ctx.clearRect(0, 0, 400, 400);
        _show(mouse.x, mouse.y, ctx);
    }

    function _position(canvas, event) {
        var x, y;
...