AMAZE

Javascript powered maze game.

by Christopher McCulloh

HTML

<div id="container">

</div>

<div id="msgsWrapper">
<div id="scoreWrapper">
    <span>Score: </span><span id="score">0</span>
</div>
<div id="messages">

</div>
<h2>AMAZE</h2>
<p>Click on THIS and then move the blue circle with WASD keys...</p>
</div>

CSS

#msgsWrapper{
    clear: both;
}

#container div{
   width: 250px;
    height: 10px;
}

#container div div{
    width: 50px;
    height: 50px;
    float: left;
    margin: 0;
    padding: 0;
}

#container div div.door{
    border: 3px solid #888;
    width: 44px !important;
    height: 44px !important;
}

.lvl0{
    background-color: black;
}

.lvl1{
    background-color: white;
}

.lvl2{
    background-color: #88f;
}

.lvl3{
    background-color: #8f8;
}

.lvl4{
    background-color: #f88;
}

div.key2{
    border: 10px solid #eef;
    width: 30px !important;
    height: 30px !important;
    background-color: gold;
}

div.key3{
    border: 10px solid #dfd;
    width: 30px !important;
    height: 30px !important;
    background-color: gold;
}


#container div div.keywin{
    border: 10px solid gold;
    width: 30px !important;
    height: 30px !important;
    background-color: yellow;
}

#container div.capt{
    border-radius: 25px;
    width: 26px !important;
    height: 26px !important;
    margin: 8px;
    border: 4px solid white;
}

.capt1{background-color: #8AA;}
.capt2{background-color: #7AA;}
.capt3{background-color: #6AA;}
.capt4{background-color: #5AA;}
.capt5{background-color: #4AA;}
.capt6{background-color: #3AA;}
.capt7{background-color: #2AA;}
.capt8{background-color: #1AA;}
.capt9{background-color: #0AA;}

#container div.objN{
    background-color: blue;
    border-radius: 25px;
    width: 26px;
    height: 26px;
    margin: 8px;
    border: 4px solid white;
}

#container div.objN.shield1{
    border: 4px solid green;
}

JavaScript

//er... yeah, this code is crap, please don't look at it, just play the game --->
var screenSize = 5;
var playerScore = 0;
var curx = 0;
var cury = 0;
var curLevel = 1;
var captives = [
    {active: false, x: 4, y: 2},
    {active: false, x: 2, y: 32},
    {active: false, x: 3, y: 47},
    {active: false, x: 15, y: 39},
    {active: false, x: 22, y: 19},
    {active: false, x: 23, y: 45},
    {active: false, x: 23, y: 7},
    {active: false, x: 21, y: 6},
    {active: false, x: 23, y: 2},
]
var $msgs = $("#messages");

var screen =...