JSFiddle - React, Tailwind, and code Playground

by mofle

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>SVG game</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
    <div id="game"></div>
</body>
</html>

CSS

#game {
    width: 380px;
    height: 360px;
    border: 1px solid #b6b6b6;
    margin: 50px auto 0 auto;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}
#play-btn {
    font-size: 13px;
    position: absolute;
    cursor: pointer;
    color: #fafafa;
    padding: 6px 12px;
    background: #163854;
    text-shadow: 0 -1px 0 rga(2,24,38,.75);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,0.3);
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgb(23,60,92)),
        color-stop(0.14, rgb(1,24,43)),
        color-stop(0, rgb(19,61,97))
    );
    background: -moz-linear-gradient(
        center bottom,
        rgb(23,60,92) 100%,
        rgb(1,24,43) 14%,
        rgb(19,61,97) 0%
    );
}
#play-btn:hover {
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, #1e4e77),
        color-stop(0.14, #012c4e),
        color-stop(0, #19507f)
    );
    background: -moz-linear-gradient(
        center bottom,
        #1e4e77 100%,
        #012c4e 14%,
        #19507f 0%
    );
}
#game-title,
#game-subtitle {
    position: absolute;
    width: 100%;
    text-align: center;
    font-weight: normal;
    line-height: 20px;
}
#game-title {
    font-size: 20px;
    color: #3d3d3d;    
    bottom: 59%;
}
#game-subtitle {
    font-size: 16px;
    color: #bdbdbd;
    bottom: 23%;
}

JavaScript

$(function(){

    var $game = $('#game'),
        gameWidth = $game.width(),
        gameHeight = $game.height(),
        paperOffset = $game.offset(),
        paper = Raphael('game', 379, 360),
        enemies = [],
        enemyCount = 6,
        enemyColors = ["#3f5a5a", "#56532f", "#cac7a3", "#3c5a6d", "#877040", "#574e06", "#fecb00"],
        difficulty = 1,
        difficultyInterval,
        timeProgressed = 0,
        timeProgressedInterval,
        restart = false,
        supportTouch = ('ontouchstart' in window);

    var avatar = paper.rect(0, 0, 50, 38, 3);
        avatar.attr({
        'fill': '#5e9cae',
        "stroke": "none",
        "opacity": 0,
        "x": (function() {
            return (gameWidth - avatar.attr("width") ) / 2;
        })(),
        "y": (function() {
            return (gameHeight - avatar.attr("height") ) / 2;
        })()
    });    
    
    // cache these values
    var avatarWidth = avatar.attr("width"),
        avatarHeight = avatar.attr("height");
    
    var timeCounter = paper.text(gameWidth-5, 10, '0').attr({
        'fill': '#bebebe',
        'font-size': 13,
        "text-anchor": "end",
        "opacity": 0
    });
    
    var startGame = function() {
        
        // increase the difficulty
        difficultyInterval = setInterval(function() {
            difficulty += 0.1;    
        }, 2000);
        
        // timecounter
        timeProgressedInterval = setInterval(function() {
            timeProgressed++;
            timeCounter.attr("text", timeProgressed);
        }, 1000);
        
        timeCounter.animate({
            'opacity': 1
        }, 200);
        
        createEnemies();
        
    };
    
    // game title
    var $gameTitle = $("<h2>", {
        id: "game-title",
        text: "SVG game"
    }).appendTo($game);
    
    // play btn
    var $playBtn = $("<div>", {
        id: "play-btn",
        text: "Play",
        click: function() {
            if ( restart ) {
         ...