JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<section class="game">
    <div id="game" style="position:absolute;">
        <div class="square"></div>
    </div>
    <label id="points">0</label>
</section>
<label class="instructions">Press "Enter" to start and "A" to control the square</label>

JavaScript

var body = $('body, html');
var gameSection = $('.game');
var pointsLabel = $('#points');
var gameElement = $('#game');
var squareElement = $('.square');
var instructions = $('.instructions');
var score = 0;
var timeDecrementFactor = 0.1;
var hasGameStarted = false;
var timeline = new TimelineMax({ paused: true });

timeline.fromTo(squareElement, 1, {
	opacity: 0,
    height: 'auto',
    width: 'auto'
}, {
	opacity: 1,
    height: '100%',
    width: '100%',
    onComplete: onGameOver,
    ease: Power0.easeNone
});

TweenMax.set(body, {
    margin: 0,
    padding: 0,
    backgroundColor: '#000'
});

TweenMax.set([gameSection, instructions, pointsLabel, gameElement, squareElement], {
    position: 'absolute'
});

TweenMax.set(gameSection, {
    height: '100%',
    width: '100%',
    backgroundColor: '#000'
});

TweenMax.set(instructions, {
    top: '80%',
    left: '50%',
    xPercent: -50,
    width: 'auto',
    color: '#fff',
    fontFamily: 'Verdana'
});

TweenMax.set(pointsLabel, {
    top: '2%',
    left: '50%',
    xPercent: -50,
    color: '#fff',
    fontFamily: 'Verdana'
});

TweenMax.set(gameElement, {
    height: '100%',
    width: '100%'
});

TweenMax.set(squareElement, {
    top: '50%',
    left: '50%',
    yPercent: -50,
    xPercent: -50,
    backgroundColor: '#fff',
    fontFamily: 'Verdana'
});

function onGameOver() {
    hasGameStarted = false;
    TweenMax.killTweensOf(timeline);
    timeline.progress(1);
    timeline.pause();
    instructions.text('You LOSE. Press "ENTER" to play again.');
    TweenMax.set([instructions, pointsLabel], {
        color: '#000'
    });
}

function onPressed() {
    score += 1;
    pointsLabel.text(score);
    timeline.pause();
    TweenMax.to(timeline, 0.2, {
        time: timeline.time() - timeDecrementFactor,
        onUpdate: function() {
            if (timeline.progress().toFixed(2) <= 0.02) {
                hasGameStarted = false;
                TweenMax.killTweensOf(timeline);
               ...