JSFiddle - React, Tailwind, and code Playground

by Daniel Echeverria

HTML

<script src="http://www.psdeluxe.com/wp-content/uploads/2010/11/stone_effect/sources/grass.jpg"></script>
<div id="box" class="box"></div>

<div id="sandt" class="sandt">
    <span id="clock" class="clock">
        Timer: 0
    </span>
    <span id="score" class="score">
        Score: 0
    </span>
</div>
Head: <span id="head"></span><br />
Food: <span id="food"></span>

CSS

.box {
    width:400px;
    height:400px;
    background-color: CornflowerBlue;
    border: thick red solid;
}
.norm{background-color: transparent;}
.snakehead{width:10%;height: 10%;float:left;background-image:url('http://img11.imageshack.us/img11/7619/pacmank.png');background-size: 100%;}

.food{background-color: green;width:10%;height: 10%;float:left;}

.maxi{
    width:10%;
    height: 10%;
    float:left;
    -moz-border-radius: 150px/150px;
    -webkit-border-radius: 150px 150px;
    border-radius: 150px/150px;
    
}
.score{float:right;}
.clock{float:left;}
.sandt{width:400px;height:25px;background-color:red;font-weight:bold;color:white;padding: 0px 5px;}

.headdown{
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.headleft{
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.headup{
    -webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}
}

JavaScript

curbox = 0;
lastbox = 0;
clock = 0;
score = 0;
rndApp = 0;

function placeFood(){
  $( ".maxi.food" ).attr("class","maxi norm");
  rndApp=Math.floor(Math.random()*101);
  $( "#bx" + rndApp ).attr("class","maxi food");
}

$( document ).ready(function() {
    
    
         
 var rndbox=Math.floor(Math.random()*101);
    
 for ( var i = 1; i < 101; i++ ) {
    
     if ( i === rndbox){
  $( ".box" ).append("<div id='bx"+i+"' class='maxi snakehead'></div>");
     curbox = i
     }
     else{
     $( ".box" ).append("<div id='bx"+i+"' class='maxi'></div>");
     
     }
    }
 
    placeFood();
    
});

$(document).keydown(function(e){
    if (e.keyCode == 37) { //left
       var getnum = curbox.toString()[1];
       if (getnum ==1 || curbox == 1){
           curbox = curbox;
       }
        else {
            curbox = curbox - 1;
        }
       $( ".maxi.snakehead" ).attr("class","maxi norm");
       $( "#bx" + curbox ).attr("class","maxi snakehead headleft");
       return false;
    }
    if (e.keyCode == 38) { //up
       if (curbox <= 10){
            curbox = curbox;
       }
        else {
            curbox = curbox - 10;
        }   
       $( ".maxi.snakehead" ).attr("class","maxi norm");
       $( "#bx" + curbox ).attr("class","maxi snakehead headup");
       return false;
    }
    if (e.keyCode == 39) { //right
       var getnum = curbox.toString()[1];
       if (getnum ==0){
           curbox = curbox;
       }
        else {
            curbox = curbox + 1;
        }
       $( ".maxi.snakehead" ).attr("class","maxi norm");
       $( "#bx" + curbox ).attr("class","maxi snakehead");
       return false;
    }
    if (e.keyCode == 40) { //down
       if (curbox > 90){
           curbox = curbox;
       }
        else {
            curbox = curbox + 10;
        }
       $( ".maxi.snakehead" ).attr("class","maxi norm");
       $( "#bx" + curbox ).attr("class","maxi snakehead headdown");
       return false;
    }
});

window.setInterval(function(){...