Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Level editor/painter: https://codepen.io/kitjenson/pen/pojgMEO -->

<div id='gameBox'></div>
<div id='controls'><div></div><div></div><div></div><div></div></div>
<div id='theend'>The End</div>
<div id='editor'><a target='_blank' href='https://codepen.io/kitjenson/pen/pojgMEO'>Want to paint your own levels? Click me.</a></div>
<div id='info'>Get the yummy flower<br>Spacebar to restart level</div>

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,500,700,900&display=swap" rel="stylesheet"> 
              
            
!

CSS

              
                :root {
  --ram: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAACMUlEQVR4nO2aW07DMBBFbdQugOXw2EJF9wC/bAZ+WQSoWwDW03+QghoY1Ew7mbFn2kTyvR99xJnU9T0eP5LcdV1qWRdN/3s0ABoADYAGmEEdJhUaYAZ1mFTNN8BiBnXolXOumpJ2XZc9vwsCpq4AOf/1euOKryWheQImWw16nedarj/6I6UkgIBzE6A5T05K0ogpJaF5AtyjgDR+cweszlsdjsodIKA2kBz9fHkcLdf6YqmjdJ4UR9+tvw8CSgM050lUXjve89Egqs9zgQDriVbnvZL6Nj+u5QKrQIBUULs+9yrKWatAAD+g9fXrh+c0Vs5F5y3Xv3HSuC318VpZ5wMggD5IznPH6b2UBE2cBC6NiMXde//+/XY7OK6RAAKkAu6w13EtF5C8fZ9IIHEiuEBA6dzeKysJmvZ2fsb/4D8RxxeFzROwaxbTuM8VRQRd30qC5nzO2VrefwAB1JLnWu1JkkjjitrFJhKaJ2A2d4enIq95Ag7uDE2dC6y6un9yxSMH/OkgB9D4yEmonQ+cah6hjfeGuMuU0rZlAra7F/XucO0OkbZ6jNpPkAg7ktvoOPYD9qXuCpc6FL1TpInnqM1mQ/UfRGJPUFDxTJD3OavTWlw0OUTCarUaPQ8ElAZ49wS5Sp0fyfqD+QsRoAkESAXSjFDTqe4bSPXzCgRoJ3ASrLLGlV4/ynlS8wS4nxSVVo1ep7zXxVNiRs1mTzBaeFbYqLAcwBWVA6Kvy9U2ASmlHxqWaZ8+CjjXAAAAAElFTkSuQmCC');
  --ramHit: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAACR0lEQVR4nO2aTU7DMBCFbdQiseQ6wBUqegi2PQ1bDgHqFYDzsEOCSkENTJUOffHM2FFceb5N1PhHbt7zeOwkdl0XWuai6X/vD8AfQFhUMAYRMUZTsOq6Lo6VuwMqGMMopPz3821We+SE5h1QXR7A57pVec5y/dbf4U5wB9TiAOlcJyUR0vbkhOYdcDZ5ACknVRjVo/vkOHdABWMYRao8QfWk7dwBcw8ARX+kIFoFeD2pE9wBuR2gXVpqF6YlpaQ2VhDuAGtDUv79aTNaXgptdJfSvAPUe4GU8pybh8cwVp/KrXM7tVqg+74X+EMcA6TKc8XpmnICAs39UrHAHYAKtFGcKyxVnMqX6/FY4KvARPxzQGqua5WVonUCQhr9ieYdcMgDkPJI8dR9jtYRqfyAM1C4v+5e7o5quAMAcBXIjeq58JiQwnq67Q6QZnillNViVXZx/9pfeSzguANQAZ/7qLwWYvwN7lrHNO+AZB4wN+RAaywYOMO/DziFP4AKxjArh1WA5kitsWAq3AH8BnKCNR/IzSP29RaXV+Z1PsVZOGD39TlZ3zATlMYE7XmBtBwhdcKg3nUI4QPVayEGwD+/J3kqbD3JKbWKUH/b7ZaP7+j3IKOl36K3074KaBvwqK59R4jaoRMorvxqtTrZXqs84Q7QNrDO7dzVgJTn7QjrFynuAFRg3Rvkvg3m8Dk/OB8o8g1S8w4QfyGifVvMHZRbj/dbCndA7u4K7RpzlZqqX07zDvAHUMEYZqVYDOCUigGl++W07YAQwg8bH4qHwHs2gAAAAABJRU5ErkJggg==');
  --box:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABDBJREFUeNrsW01PE0EYnv1qt6VA4kXjT/GkF2M0UbCSCMRAhF/gxcQDMR5MPOjFqwcMkUSMAWMkRi/8JBOQj0K77rPt1O2yndn52Nml9CVA6IbsvO/zzPs5Q8hYxjKWyywW49nNEdd9Dz/sy84AN/nBxsuFoOZ7xHNsYtsWhyQXQQLS6QSkHX4fnZySxbVPt5gGgPLTEz6peA5xbJtYlnXB1e8a4KzdCfWx+AwA8lDec50RcXIWsR2LuGC0VTv3/JwPAO2B/CgKgOUyILIZg/Yv3qyXWsnXz5fVnGDmvRVgf5Unjsu6KlfGwgeHJ2Rz82upkF9YaJJGvSr8f1KbPSgh9WXXxGXAq3cfo99rz5b6n/kVlzTnHpD9kAm/fvwsVPHb9+6QyRD5WtXjrltpC4D2QU95JwwpjVo1iq9FC9YxFeYtCHO5MOD4NIgc3of1L9HfTxZno5dGRggtP9u8Tw6OWuTbzq5RxWdm70brmG74AzmLaJRyRfcXaA/kobzbM0JQEPJJ5ZNRCoK12ralLwrsbHeRXpyf6RsBexB/m2ACD/mgp/y1qa5qf49b0fq05wFQFi+bNMwEFvJBPz/5vxLUAEpbwPcsAl9Xrww6md+7Xe8PH5DGBPpcp7dPU556+2q4Tih/fdpLbIWuDxuWKLmqCzPFhEzIB+JvVjbAMCbQ6KDKBB7yVPkk8sYMkDcTVJHnkSJTHgAfcNhiOxPq/ZPRQTZPEPX2vPXlzgDdTBD19rKi3QDDmJA1TxBFvnQGYDGhTMgr5wEy0aHByBNk43xpGRBnQoRsqDwUQ+WW1nIDU/BMd5wv3ABxJlAFgfLj+Yf9chrFSt2vDJS0uuJ84QaIMwHIU4pnabvnibz2PCBrdHi69IipvO44n0tPUEWydpF0e/vCt4CI6IzzpWMAqztThOSWB6RVdQh18PYswdzhz/4R2fq8PVoMEOnempxI577ReBkelXj/vu57xuYOrgnks3RvQXsgD+VNzh1yywNEq7r1je6s0fTcwS0CeVZVZ3ruoN0AqvW86bmDWxbk8+osGcsDdNfzpuYOrlHkJaq6vJmgbIC8+/Z5zx3csiJvignSeYCpvn2yn6Br7qDMANPdW1km8MqKTAawNMZ5VVGdOygzIFP31kAnR3buIJUHQFaX56IX4jRWWvc2r769SHSgcwecCqFVJAos1jbIzACWhU10b1lMoOtLmzs4nA7Uuaff364EV6bqXOdhqm+fVeJzh3anQ45bZ9HnE35loA13Y/U9vS+wpyUPKAr5pID2onMHKQPEz+FB76s59+2zCq0iV0JfJXLXYXxnKM2l4csaclcofh4fjQtQD0fR4tvA1I6I+ynQHw5vgtN15hoASkWnKx1+ZxbOhR5CLNoNaLsv0O5dMBI9fHyB7lbtMQ2Aq2WgEi4Ypd2xGctYRkv+CTAAmy9vSBc3+H0AAAAASUVORK5CYII=');
  --flower:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeRJREFUeNrsmr9OAkEQxu/MWplIZyiNlcEaY6x9ERufwUfgGWx8EWtjpIZYGUpDBwmVxVrokWOzw+zsv1u8byoge7fL9/2YndmjrgqI58Gdtn1+v3qpU899VPU86hJcHx+fWcdMv5fJaQABXTlPuU5FQ0NsEkBA6c6nJqH3BEAACAABsAugDgABPe4FVOgNriY3WjJ+9vhWl0SA6mritqNdngeoUOdHw0vZhZNKl0SCKmEROZyOlgS9nTdi/vWxNyfkyi293wZVbOenr+8778e310XnFhDgOnDzuf59Mdzv/OJpvuPAycWpk6OhuWV7nZAEEOA6sOWsbv+2KeeljoXuKr4kgADpBSYJnPNc7pDuKq67y3Ze5IBC2uHzh5GW1AVcbqHuJ81JICD3hNx+L3WwIcGSo5ADDqYdbneHUgel40EABCj0JxCaVH0PSEBALqVTOU6W0n/NELdOEJBL6eSOc00WsU6UwqFKUwUNRQRXCpvXxzoooeYBAbEedLgS4TsPdTBCBdd2N/fDLsAdWYU6EMtxj6ZH29ZjttsggDvuju1AqrbYoU22HuKCAItiOoUDro/IUgX1fUCAq1L/NVAJ5p6Qqjy5v8yAAAgAASAABIAAEODw6gDz8XWsGh4ERIofAQYAF8sQhajz9kgAAAAASUVORK5CYII=');
  --rock:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9tJREFUeNrsWk1ME0EY/Vqolta2tGBUUKkVhIA1JKgoNxI9aNKLZxM84QmvEjwYDzbEi4k3OXng6qmJHiSBqEE9GEmaNgjYgMpPAANoWwgN1pmVqe260/2fFp2XbDYpm75h5n3vezNbAA4ODg6O/xcWA74jWwZj0AwrV4DOlQ+Hw7oGMDAwUFJFcAXoVUAkEtE1gGg0SlOEhSuAASpLPYBgMFhSfu4BpfYAmiew6g5cAVoTH+n/ZKXMUoLZ3YF3Aa2Jz2z3ZtUduAfodXuaa++V7sAVYFS/L+LahipCjketIrgClPZ7ta5MW6lyyws8B5jV71n1cb08XAGsVk7v2SFPgiXcC+ypbM8VoEEBBe4fCoVMzfRcAeXqAaRGxW79ryuCK0DOrWmKkFNCX+S2cHcG3MJ9sO0O03/M39uazeeP9b+1cAVoyQFq+zdZ+XNd5ws+74/dZ6IEtPKS/DD4u9uJlcAVQPvD0OwwJFJzkEp8h6aaANzquglSeYF4AW3ltYLGr1Z5qicAkybSnyG5kwLnPgdYPQDJn2l4PjUCjWggZkOOv8ngMVhAdOY3svIKRpZfwsEDtcKFsfBlHubRdbX5Mlw5daloN5BbifjSZFEvUMqvVQmEn3iBos2Qy+OGenT/sByF6dVPcO10iGmdSvEfddex2w263C7hmoxNwuLaEmxmtqh7B+LChk6ABL/hJohrDxuP3WYHv+842CpsuYeIBDuPdUBn21k0+0dgZmHG8NpXw29aF6iwWMGBzEcKNQ5fzoRoewfyOa0WWw+3FM0FSvlpexUynqHx4aL8JBfwHICu7kBf8MaDpw976i82wH4kwXxg+WXSGWHmfVVeU056sPOvba8LbU8pP1l56in2rIoSqKp39qALGlDtiYFrT0kQ0TUBqO0VyJMhP56Asb0sYf5egEUOMBJySVAptL5nyEuCBQoY21pMw0pyFdY3N5ivQsDZAHX2QyXhr9ydjW5nwJ219zoEJ66u8jAdRK//ei4IKeU36j0D94C8DN+NbqPlXvt6+Unt7+6ECxQwgUPR/Js54WFcjyyBPQCXQoujkSl/TgFoZtaxGbYNXriH7nfzH4pNxWG6OQE1KIn5HF5TTmbsFXbBDPFhiBh49zf9zRx+WQ/AX3Si/SQ8Gn8M776+Zy5dzJ/1WEzjl8oBOEWPpbc325EMq8mpDKva99o8ghI2dn4IZWAUv7j2qQpADz7BbTG1nZpg7QMYHdVnBC/wWF1MfEDVkdjo4mt49vHFH6kMxQF5xl+SlYJ43y4HfLJE3uoYwQ+UX42pOhLLOHfAWmtjrgoz+X8JMADXRud+Ev+99wAAAABJRU5ErkJggg==');
  --numbers:rgba(0,0,0,0);
}

body {
  min-height:100vh;
  min-width:100%;
  background:url('https://www.transparenttextures.com/patterns/diagonal-waves.png'), linear-gradient(to top left, RoyalBlue, deepskyblue);
  background-size:100px 100px, 100% 100%;
  margin:0;
  padding:0;
  font-family:'Montserrat', sans-serif;
  perspective:50vmin;
  animation:waves 5s linear infinite;
}
@keyframes waves {
  100% { background-position:100px -100px, 0 0 }
}

#editor {
  position:absolute;
  bottom:10px;
  left:10px;
}

a {
  color:rgba(255,255,255,.5);
}

#gameBox {
  background-color:limegreen;
  background-image:linear-gradient(to bottom, transparent 98%, rgba(0,0,0,.05) 98%), linear-gradient(to right, transparent 98%, rgba(0,0,0,.05) 98%);
  box-shadow:inset 0 0 0 15px navajowhite, 0 0 0 45px skyblue;
  position:absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%, -50%) rotateX(5deg);
  border-radius:5px;
  pointer-events:none;
}
#gameBox:after {
  content:'\21BA';
  width:50px;
  height:50px;
  border-radius:50%;
  background:deepskyblue;
  position:absolute;
  left:0;
  top:0;
  transform:translate(-110%,-110%);
  text-align:center;
  line-height:50px;
  font-size:28px;
  font-weight:900;
  color:lightblue;
  cursor:pointer;
  pointer-events:auto;
  opacity:1;
  border:2px solid skyblue;
}

.box {
  float:left;
  position:relative;
  line-height:48px;
  text-align:center;
  color:var(--numbers);
  user-select:none;
  background-size:100%;
/*   outline:1px solid red; */
}

.woodBox { 
  background-image:var(--box);
  background-size:100% 100%;
/*   box-shadow:inset 0 0 0 5px peru; */
}

.river {
  background-color:skyblue;
  box-shadow:0 2px 0 2px skyblue;
}

.player {
/*   background:gray !important; */
  background-image:var(--ram);
  background-size:100% 100%;
  text-align:center;
  font-size:24px;
  z-index:99;
/*   animation:onScreen 1s linear forwards; */
}
.player:after {
  content:'';
  width:100%;
  height:10px;
  border-radius:50%;
  background:rgba(0,0,0,.15);
  position:absolute;
  left:0;
  bottom:-5px;
}
@keyframes onScreen {
  0% { opacity:0;transform:translateY(-500%) rotateY(540deg); }
  75% { opacity:1; }
  100% { opacity:1;transform:none; }
}

.box.river.woodBox {
  background-image:var(--box);
  background-size:80% 80%;
  background-position:50% 250%;
  background-repeat:no-repeat;
  animation:floatingBox 2s linear infinite;
}
@keyframes floatingBox {
  50% { background-position:50% 300%; }
}
.box.river.woodBox.player {
  background-image:var(--ram), var(--box);
  background-size:100% 100%, 80% 80%;
  background-position:0 0, 50% 250%;
  background-repeat:no-repeat;
}

.ram {
  background-image:var(--ramHit) !important;
}

.rock {
  background-image:var(--rock);
  background-size:100% 90%;
  background-position:50% 50%;
  background-repeat:no-repeat;
}

.end {
  background: var(--flower);
  background-size:100%;
}
.box.end.player {
  background-image:var(--ram);
}

#theend {
  position:absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:48px;
  font-weight:900;
  text-align:center;
  color:navajowhite;
  opacity:0;
  user-select:none;
  pointer-events:none;
  transition:1.5s;
}
#info {
  color:white;
  position:absolute;
  right:10px;
  top:10px;
  opacity:.5;
  text-align:right;
}
#controls {
  position:absolute;
  right:25px;
  top:110px;
/*   transform:rotate(20deg); */
  opacity:.5;
}
#controls:after {
  width: 100%;
  content: 'KEYBOARD CONTROLS';
  position: absolute;
  transform: translate(-100%,-275%);
  color: white;
  font-size: 12px;
}
#controls div {
  width:48px;
  height:48px;
  text-align:center;
  line-height:48px;
/*   outline:1px solid red; */
  float:left;
  position:relative;
}
#controls div:before {
  content: '';
  width: 30%;
  height: 30%;
  box-shadow:-5px -5px 0 3px white;
  position: absolute;
  top: 35%;
  left: 35%;
  transform: rotate(45deg);
}
#controls div:nth-child(1):before {
  left:55%;
  box-shadow:-5px 5px 0 3px white;
}
#controls div:nth-child(2):before {
  top:15%;
 box-shadow:5px 5px 0 3px white;
}
#controls div:nth-child(3):before {
  top:55%;
}
#controls div:nth-child(4):before {
  left:15%;
 box-shadow:5px -5px 0 3px white;
}

#controls div:after {
  content:'';
  width:80%;
  height:80%;
  border-radius:5px;
  box-shadow:0 0 0 2px white;
  position:absolute;
  top:10%;
  left:10%;
}
#controls div:nth-child(2) {
  margin-top:24px;
}
#controls div:nth-child(3) {
  margin-top:-24px;
  margin-left:-48px;
}
              
            
!

JS

              
                console.clear()
var min = Math.min(window.innerHeight, window.innerWidth)
var u = 48
var uu = u*2
var gb = document.querySelector('#gameBox')
var root = document.documentElement
var right = true
var level = 0

// root.style.setProperty('--numbers','rgba(0,0,0,1)')
var levels = [ 
  one= {
    name:1,
    player:[13],
    woodBox:[31],
    rock:[],
    river:[45,46,47,48,49,50,51,52,53],
    end:[67]
  },
  henry= {
    name:'henry',
    player:[18],
    woodBox:[57],
    rock:[],
    river:[6,15,24,33,42,51,60,69,78],
    end:[26]
  },   
  two= {
    name:[2],
    player:[10],
    woodBox:[30],
    rock:[20,22,24,38,40,42,56,58,60],
    river:[5,14,23,32,41,45,46,47,48,49,50],
    end:[70]
  },
  three= {
    name:3,
    player:[10],
    woodBox:[21],
    rock:[],
    river:[5,14,23,32,6,7,8,15,16,17,24,25,26,34,35,33,36,37,38,39,40,41,42,43,44,45,46,47,48,57,66,75,54,55,56,63,64,65,72,73,74],
    end:[70]
  },
  stanley= {
    name:'stanley',
    player:[0],
    woodBox:[20,56],
    rock:[],
    river:[4,13,31,36,37,38,39,40,41,42,43,44,49,58,67,76],
    end:[70]
  },
  eight= {
    name:8,
    player:[64],
    woodBox:[38,42],
    rock:[0,1,2,3,4,5,6,7,8,9,17,18,20,21,22,23,24,25,26,27,29,,30,31,32,33,35,45,47,48,49,50,51,53,54,55,56,57,58,59,60,62,63,71,72,73,74,75,76,77,78,79,80],
    river:[40],
    end:[16]
  },
  whatever= {
    "name":[],
    "player":["0"],
    "woodBox":["12","14","19","25","55","61","66","68"],
    "rock":[],
    "river":["13","20","22","24","27","29","31","33","35","36","37","38","39","40","41","42","43","44","45","47","49","51","53","56","58","60","67"],
    "end":["80"]
  },
  yep= {
    "name":[],
    "player":["31"],
    "woodBox":["28","34","46","52"],
    "rock":[],
    "river":["4","10","11","13","15","16","20","22","24","29","33","36","37","38","39","40","41","42","43","44","47","51","56","58","60","63","64","65","67","69","70","71","73","76","79"],
    "end":["49"]
  },
  {
    "name":[],
    "player":["40"],
    "woodBox":["4","30","31","32","36","39","41","44","48","49","50","76"],
    "rock":["11","15","19","25","55","61","65","69"],
    "river":["1","7","9","10","16","17","20","21","22","23","24","29","33","38","42","47","51","56","57","58","59","60","63","64","70","71","73","79"],
    "end":["0","8","72","80"]
  },
  {
    "name":[],
    "player":["0"],
    "woodBox":["10","13","52","55"],
    "rock":["27","28","29","30","31","33","34","35","36","37","38","39","40","56","57","58","60","61","62","76","78","79"],
    "river":["3","4","12","21","22","41","50","59","68","77"],
    "end":["80"]
  },
  five= {
    name:5,
    player:[10],
    woodBox:[16,37],
    rock:[31,38,42,49],
    river:[18,19,20,21,22,23,24,25,26,54,55,56,57,58,59,60,61,62],
    end:[70]
  },
  six= {
    name:6,
    player:[64],
    woodBox:[52],
    rock:[12,13,14,15,16,17,54,55,56,57,58,59,60,51,45,46,47,48,49,50,21,22,23,24,25,26],
    river:[6],
    end:[7]
  },
  {
    "name":[],
    "player":["66"],
    "woodBox":["13","43","68"],
    "rock":["7","11","15","17","19","21","23","25","29","33","39","47","49","51","55","57","59","63","65","71","73","79"],
    "river":["0","8","10","16","20","24","30","32","40","48","50","56","60","64","70","72","80"],
    "end":["37"]
  },
  smarty= {
    "name":[],
    "player":["43"],
    "woodBox":["65","70"],
    "rock":["10","11","16","23","25","32","34","38","41","52","76"],
    "river":["6","15","24","33","37","39","40","42","45","46","47","48","49","50","51","60","68","69","77","78"],
    "end":["13"]
  },
  {
    "name":[],
    "player":["80"],
    "woodBox":["24","46","67","79"],
    "rock":[],
    "river":["1","7","10","11","16","17","20","29","30","31","40","41","49","50","51","57","60","61","64","65","66","69","70","71","73","78"],
    "end":["8"]
  },
  {
    "name":[],
    "player":["72"],
    "woodBox":["25","65","51"],
    "rock":["2","6","9","13","15","17","20","27","31","35","38","42","45","49","53","56","60","63","67","71","78"],
    "river":["4","22","36","37","39","40","41","43","44","58","76"],
    "end":["8"]
  },
  {
    "name":[],
    "player":["10"],
    "woodBox":["13","40","67"],
    "rock":["4","22","31","36","37","46","47","48","49","58","76"],
    "river":["18","19","20","21","23","24","25","26","50","51","52","53","54","55","56","57"],
    "end":["45"]
  },
  seven= {
    name:7,
    player:[16],
    woodBox:[22,24,42,47,57],
    rock:[],
    river:[5,14,23,27,28,29,30,31,32,33,34,35,41,50,54,55,56,59,63,65,68,72,73,74,77],
    end:[64]
  },  
  stanley2= {
    name:'stanley2',
    player:[0],
    woodBox:[15,65],
    rock:[6,20,22,24,38,40,43,52,53,70,79],
    river:[36,37,39,41,42,44,49,58,67,76],
    end:[80]
  },
  nine= {
    name:9,
    player:[13],
    woodBox:[11,24],
    rock:[15,20,29,32,41,38,47,6,33,42,56,57,58,59,60,69,78],
    river:[3,12,21,30,39,48,66,67,68,75,77],
    end:[76]
  },
]

console.log(levels.length)
gb.style.width = (u*9) + 'px'
gb.style.height = (u*9) + 'px'
gb.style.backgroundSize = u+'px '+u+'px,'+u+'px '+u+'px' 

// var addBoxes = setInterval(addBox)

function levelEnd() {   
  setTimeout(function(){
    function addBox() {
      var b = document.createElement('div')
      b.id = ''
      b.className = 'box'
      b.style.width = u+'px'
      b.style.height = u+'px'
      if(document.querySelectorAll('.box')) {
        b.innerHTML = document.querySelectorAll('.box').length
      }  
      gb.appendChild(b)
      if(document.querySelectorAll('.box').length >= 81) {
        clearInterval(addBoxes)

        var bs = document.querySelectorAll('.box')
        var l = levels[level]
        // console.log(l)

        l.player.forEach(function(elm){
          bs[elm].classList.add('player')
        })
        
        l.end.forEach(function(elm){
          bs[elm].classList.add('end')
        })

        l.woodBox.forEach(function(elm){
          bs[elm].classList.add('woodBox')
        })      
        l.rock.forEach(function(elm){
          bs[elm].classList.add('rock')
          if(Math.random() < .5) {
            if(Math.random() < .5) {
              bs[elm].style.filter = 'sepia(.75)'
            } else {
              bs[elm].style.transform = 'scaleX(-1)'
            }
          }
        })
        l.river.forEach(function(elm){
          bs[elm].classList.add('river')
        })
      }
    }  

    if(levels.length - 1 < level) {
      gb.innerHTML = ''
      document.querySelector('#theend').style.opacity = '1'
    } else {
      gb.innerHTML = ''
      var addBoxes = setInterval(addBox)
      }    
  },100)  
}

levelEnd()
// MOVEMENT
var face = 0
window.addEventListener('keyup', function(e){  
  var pl = document.querySelector('#gameBox .player')  
  var b = document.querySelectorAll('.box')  
  var wb = document.querySelectorAll('.woodBox')  
  var num = Array.from(b).indexOf(pl)
  // console.log(num)
  if(e.keyCode == 37 && num % 9 !== 0) {
    face = 1
    if(pl.previousSibling.classList.length == 1 || pl.previousSibling.className == 'box river woodBox' || pl.previousSibling.className == 'box end') {
      pl.classList.remove('player')
      pl.previousSibling.classList.add('player')
    }
    if(pl.previousSibling.classList.contains('woodBox') && !pl.previousSibling.classList.contains('river') && (num - 1) % 9 !== 0 && !b[num - 2].classList.contains('rock')){
      pl.classList.remove('player')
      pl.previousSibling.classList.add('player')
      b[num - 1].classList.remove('woodBox')
      b[num - 2].classList.add('woodBox')
    }

    if(pl.previousSibling.className == 'box end player') {
      level++
      levelEnd()
    }
  }
  if(e.keyCode == 39 && (num + 1) % 9 !== 0) {
    face = 0
    if(pl.nextSibling.classList.length == 1 || pl.nextSibling.className == 'box river woodBox' || pl.nextSibling.className == 'box end') {
      pl.classList.remove('player')
      pl.nextSibling.classList.add('player')
    }  
    if(pl.nextSibling.classList.contains('woodBox') && !pl.nextSibling.classList.contains('river') && (num + 2) % 9 !== 0 && !b[num + 2].classList.contains('rock')){
      pl.classList.remove('player')
      pl.nextSibling.classList.add('player')
      b[num + 1].classList.remove('woodBox')
      b[num + 2].classList.add('woodBox')
    }

    if(pl.nextSibling.className == 'box end player') {
      level++
      levelEnd()
    }
  }
  if(e.keyCode == 38) {
    var num = Array.from(b).indexOf(pl)
    var thing = num - 9
    if(thing >= 0 && (b[thing].classList.length == 1 || b[thing].className == 'box river woodBox' || b[thing].className == 'box end')) {
      pl.classList.remove('player')
      b[thing].classList.add('player')
    }
    if(b[thing].classList.contains('woodBox') && !b[thing].classList.contains('river') && num - 18 >= 0  && !b[num - 18].classList.contains('rock')){
      pl.classList.remove('player')
      b[thing].classList.add('player')
      b[num - 9].classList.remove('woodBox')
      b[num - 18].classList.add('woodBox')
    }

    if(b[thing].className == 'box end player') {
      level++
      levelEnd()
    }
  }
  if(e.keyCode == 40) {
    var num = Array.from(b).indexOf(pl)
    var thing = num + 9
    if(thing < 81 && (b[thing].classList.length == 1 || b[thing].className == 'box river woodBox' || b[thing].className == 'box end')) {
      pl.classList.remove('player')
      b[thing].classList.add('player')
    }
    if(b[thing].classList.contains('woodBox') && !b[thing].classList.contains('river') && num + 18 <= 81 && !b[num + 18].classList.contains('rock')){
      pl.classList.remove('player')
      b[thing].classList.add('player')
      b[num + 9].classList.remove('woodBox')
      b[num + 18].classList.add('woodBox')
    }

    if(b[thing].className == 'box end player') {
      level++
      levelEnd()
    }
  }  
  setTimeout(function(){
    var pl = document.querySelector('#gameBox .player')
    if(face == 0) {
      pl.style.transform = 'scaleX(1)'
    } else {
      pl.style.transform = 'scaleX(-1)'
    }
  },10)  
})

window.addEventListener('keydown',function(){
  var pl = document.querySelector('#gameBox .player')
  pl.classList.add('ram')
  setTimeout(function(){
    pl.classList.remove('ram')
  },100)
})

function restartLevel() {
   if(levels.length - 1 < level) {
    level = 0
    document.querySelector('#theend').style.opacity = '0'
  } 
  levelEnd() 
}

gb.addEventListener('click', restartLevel)
window.addEventListener('keyup', function(e){
  if(e.keyCode == 32) {
    restartLevel()
  }
})

function getColor() {
  return 'hsl('+Math.random()*360+'deg, 75%, 50%)'
}

var down = -1
window.addEventListener('mousedown', function(e) { down = e.button; })
window.addEventListener('mouseup', function(e) { e.preventDefault(); down = -1; })
gb.addEventListener('contextmenu', function(e) { e.preventDefault(); })
              
            
!
999px

Console