JSFiddle - React, Tailwind, and code Playground

by aaronblomberg

HTML

<div class="game-container">
					
	<!-- <img src="images/placeholder-game.png" /> -->

	<div class="container">
		
		<div class="SplashScreen">
			<h1>
				Snake
			</h1>
			<h2>
				Click To Start.
			</h2>
			<input class="StartButton" type="button" value="Start" />
		</div>
		
		<div class="FinishScreen" style="display:none">
			<h1>
				Game Over
			</h1>
			<p>
				Your score was: <span id="score"></span>
			</p>
			<input class="StartButton" type="button" value="Restart" />
		</div>
		
		<canvas id="canvasArea" width="450" height="450" style="display:none;"></canvas>
		
	</div>

	<div class="button-pad">

		<div class="btn-up">
			<button type="submit" class="up">
		    	<img src="http://aaronblomberg.com/sites/ez/images/btn-up.png" />
		    </button>
		</div>
		
		<div class="btn-right">
			<button type="submit" class="right">
		    	<img src="http://aaronblomberg.com/sites/ez/images/btn-right.png" />
		    </button>
		</div>
		
		<div class="btn-down">
			<button type="submit" class="down">
		    	<img src="http://aaronblomberg.com/sites/ez/images/btn-down.png" />
		    </button>
		</div>
		
		<div class="btn-left">
			<button type="submit" class="left">
		    	<img src="http://aaronblomberg.com/sites/ez/images/btn-left.png" />
		    </button>
		</div>

	</div>

</div>

CSS

/**************************************************
	GAME
**************************************************/
section.game {
	padding: 40px 0px;
}

.SplashScreen, .FinishScreen {
	margin: 0 auto;
	text-align:center;
	width: 450px;
	height: 450px;
	border: 2px solid #fff;
	background-color:#0056a0;
}

.FinishScreen h1,
.SplashScreen h1 {
	color: #fff200;
	font-family: 'Oswald', sans-serif;
	font-size: 36px;
	font-weight: 700;
	margin: 0px 0px 10px;
	padding: 50px 0px 0px;
	text-align: center;
	text-transform: uppercase;
}

.FinishScreen p {
	color: #fff;
	font-weight: bold;
}

.FinishScreen h2,
.SplashScreen h2 {
	color: #ffffff;
	font-family: 'Oswald', sans-serif;
	font-size: 28px;
	font-weight: 700;
	margin: 0px 0px 25px;
	text-align: center;
}

canvas {
	border: 2px solid #fff;
	margin: 0 auto;
	display: block;
}

#gamecontainer {
	background: red;
	width:450px;
	height:450px;
	border: 2px solid #fff;
	margin: 0 auto;
}

.gamelayer {
	width:450px;
	height:450px;
	position:absolute;
	display:none;
}

input.StartButton {
	color: #fff200;
	font-size: 16px;
	display: block;
	width: 200px;
	height: 40px;
	background-color: #0056a1;
	border: 2px solid #fff200;
	text-align: center;
	margin: 0 auto;
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	     -o-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}

input.StartButton:hover {
	color: #0056a1;
	font-size: 16px;
	display: block;
	width: 200px;
	height: 40px;
	background-color: #fff;
	border: 2px solid #0056a1;
}

input.StartButton:focus {
	outline-color: transparent;
	outline-style: none;
}

.button-pad {
	margin:10px 0px 0px 200px;
	position: relative;
}

.button-pad button {
	background-color:transparent; 
	border-color:transparent;
	height: 50px;
	width: 50px;
    margin: 0px;
    padding: 0px;
}

.button-pad .btn-up {
	position: relative;
	top: 0px;
}

.button-pad .btn-right {
	position: relative;
	right: -40px;
	top: -10px;
}

.button-pad...

JavaScript

( function( $ ) {

	$( function() {
	
	
	
		$(document).ready(function () {

			$(".StartButton").click(function () {
			    $(".SplashScreen").hide();
			    $(".FinishScreen").hide();
			    $("#canvasArea").show();
			    init();
			});
			
			//Canvas stuff
			var canvas = $("#canvasArea")[0];
			var ctx = canvas.getContext("2d");
			var w = $("#canvasArea").width();
			var h = $("#canvasArea").height();
			
			//Lets save the cell width in a variable for easy control
			var sw = 10;
			var direction;
			var nd;
			var food;
			var score;
			
			//Lets create the snake now
			var snake_array; //an array of cells to make up the snake
			
			function endGame() {
			    $("#canvasArea").hide();
			    $("#score").text(score);
			    $(".FinishScreen").show();
			}
			
			function init() {
			    direction = "right"; //default direction
			    nd = [];
			    create_snake();
			    create_food(); //Now we can see the food particle
			    //finally lets display the score
			    score = 0;
			
			    //Lets move the snake now using a timer which will trigger the paint function
			    //every 60ms
			    if (typeof game_loop != "undefined") clearInterval(game_loop);
			    game_loop = setInterval(paint, 60);
			}
			
			function create_snake() {
			    var length = 5; //Length of the snake
			    snake_array = []; //Empty array to start with
			    for (var i = length - 1; i >= 0; i--) {
			        //This will create a horizontal snake starting from the top left
			        snake_array.push({
			            x: i,
			            y: 0
			        });
			    }
			}
			
			//Lets create the food now
			function create_food() {
			    food = {
			        x: Math.round(Math.random() * (w - sw) / sw),
			        y: Math.round(Math.random() * (h - sw) / sw),


			    };
			    //This will create a cell with x/y between 0-44
			    //Because there are 45(450/10) positions accross the rows and columns
			    			    
			}
			
			//Lets paint the snake now
			function paint()...