JSFiddle - React, Tailwind, and code Playground

by Erin_Katie

HTML

<div id="gameContainer"><!-- Game container holds all of tge game layers. -->
    <canvas id="gameCanvas" width="640" height="480" class="gameLayer">         
    </canvas>
    
    <div id="scoreScreen" class="gameLayer">
        <img id="toggleMusic" src="http://http://www.erin-katie.com/images/icons/sound.png">
            <img src="http://www.erin-katie.com/images/icons/prev.png">
                <span id="score">Score: 0</span>
            </div><!-- CLOSES SCORE SCREEN -->
            
            <div id="gameStartScreen" class="gameLayer">
                <img src="http://www.erin-katie.com/images/icons/play.png" alt="Play Game" onclick="game.showLevelScreen();"><br />
                    <img src="http://www.erin-katie.com/images/icons/settings.png" alt="Settings">
                    </div><!-- CLOSES GAME START SCREEN -->
                    
                    <div id="levelSelectScreen" class="gameLayer">
                    </div><!-- CLOSES LEVEL SELECT SCREEN -->
                    
                    <div id="loadingScreen" class="gameLayer">
                        <div id="loadingMessage"></div><!-- CLOSES LOADING MESSAGE -->
                    </div><!-- CLOSES LOADING SCREEN -->
                    
                    <div id="endingScreen" class="gameLayer">
                        <div>
                            <p id="endingMessage">Level Complete!/p>
                                <p id="playCurrentLevel"><img src="images/icons/prev.png"> Replay Current Level</p>             
                                    <p id="playNextLevel"><img src="images/icons/next.png"> Play Next Level </p>                
                                        <p id="showLevelScreen"><img src="images/icons/return.png"> Return to Level Screen</p>
                                        </div>
                                    </div><!-- CLOSES ENDING SCREEN -->
                                    
                                </div><!-- CLOSES...

CSS

#gameContainer {
	width:640px;
	height:480px;
	background: url(http://www.erin-katie.com/images/splashscreen.png);
	border: 1px solid black;
}

.gameLayer {
	width:640px;
	height:480px;
	position:absolute;
	display:none;
}

/* ===== SPLASH SCREEN ===== */
#gameStartScreen {
	padding-top:250px;
	text-align:center;
}

#gameStartScreen img {
	margin:10px;
	cursor:pointer;
}

/* ===== LEVEL SCREEN ===== */
#levelSelectScreen {
	padding-top:215px;
	padding-left:60px;	
}

#levelSelectScreen input {
	margin:20px;
	cursor:pointer;
	background:url(http://www.erin-katie.com/images/icons/level.png) no-repeat;
	color:#fff;
	font-size: 20px;
	width:64px;
	height:64px;
	border:0;
}
#levelSelectScreen input:hover{
	background:url(http://www.erin-katie.com/images/icons/level-hover.png) no-repeat;
}
/* ===== LOADING SCREEN ===== */
#loadingScreen {
	background:rgba(200,200,200,0.7);	
}

#loadingMessage {
    margin-top:400px;
	text-align:center;
	height:48px;
	color:white;
	background:url(http://www.erin-katie.com/images/loader.gif) no-repeat center;
	font:12px Arial;
}
.loaderTrans	{
	
}
/* ===== SCORE SCREEN ===== */
#scoreScreen  {
    height:60px;
    font: 32px Comic Sans MS;
    text-shadow: 0 0 2px #000;
	color:white;
}

#scoreScreen img{
    opacity:0.6;
    top:10px;
    position:relative;
    padding-left:10px;
    cursor:pointer;
}

#scoreScreen #score {
	position:absolute;
	top:5px;
	right:20px;
}

JavaScript

// Setup requestAnimationFrame and cancelAnimationFrame for use in the game code
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = 
            window[vendors[x]+'CancelAnimationFrame'] ||         window[vendors[x]+'CancelRequestAnimationFrame'];
    }
    
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
                                       timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

//The init() function is called after the page is loaded to avoid erros within in the DOM.
$(window).load(function(){
    game.init();
});

var game={
    
    //The following finction will allow the game to begin initilaizing the game assets and will tell the game that the start screen will be displayed first.
    
    init: function(){
        // Initialize objects   
        levels.init();
        loader.init();
        
        // Hide all game layers and display the start screen
        $('.gameLayer').hide();
        $('#gameStartScreen').show();
        
        //Get handler for game canvas and context
        game.canvas = $('#gameCanvas')[0];
        game.context = game.canvas.getContext('2d');
    },      
    
    //Hide main menu and all other game layers and show the game level screen.
    showLevelScreen:function(){
        $('.gameLayer').hide();
       ...