pac-man

by andrewjohn

HTML

<div id="imgbox">
    <div id="score">0</div>
    <div id="pacmanPlayArea">
    </div>
</div>
</div>
<audio id="death" src="http://img.go-here.nl/pacman/Pacman Dies.mp3" preload="auto"></audio>
<audio id="eatcherry" src="http://img.go-here.nl/pacman/Pacman Eating Cherry.mp3" preload="auto"></audio>
<audio id="eatghost" src="http://img.go-here.nl/pacman/Pacman Eating Ghost.mp3" preload="auto"></audio>
<audio id="extralive" src="http://img.go-here.nl/pacman/Pacman Extra Live.mp3" preload="auto"></audio>
<audio id="intermission" src="http://img.go-here.nl/pacman/Pacman Intermission.mp3" preload="auto"></audio>
<audio id="intro" src="http://img.go-here.nl/pacman/Pacman Opening Song.mp3" autoplay preload="auto"></audio>
<audio id="sirine" src="http://img.go-here.nl/pacman/Pacman Siren.mp3" preload="auto"></audio>
<audio id="wakawaka0" src="http://img.go-here.nl/pacman/wakawaka.mp3" preload="auto"></audio>
<audio id="wakawaka1" src="http://img.go-here.nl/pacman/wakawaka.mp3" preload="auto"></audio>
<audio id="wakawaka2" src="http://img.go-here.nl/pacman/wakawaka.mp3" preload="auto"></audio>
<audio id="wakawaka3" src="http://img.go-here.nl/pacman/wakawaka.mp3" preload="auto"></audio>

CSS

#score {
    margin-left:300px;
    color: white;
}
#score:after {
    content:"000"
}
html, body {
    /*padding: 5px;/*NO*/
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    background: black;
    overflow: hidden;
}
.unit {
    transition: left 0.303s ease, top 0.303s ease;
}
#imgbox {
    position:fixed;
    height: 1100px;
    width:1000px;
    background-image:url(http://img.go-here.nl/pacman/bg-img2.png);
    background-position:-20px -106px;
    background-size:763px 1022px;
    background-repeat:no-repeat;
}
#pacmanPlayArea {
    height: 1000px;
    width: 1000px;
    left:90px;
    top: 42px;
    position: absolute;
}
* {
    box-sizing: border-box;
}
body {
    /*Sizing for unit on display, change this in JS for scaling properly*/
    font-size: 18px;
}
.red {
    background: red;
    color: red;
}
.orange {
    background: orange;
    color: orange;
}
.blue {
    background: LightSkyBlue;
    color: LightSkyBlue;
}
.pink {
    background: pink;
    color: pink;
}
.ghost {
    display: inline-block;
    height: 1em;
    width: 1em;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom: 0.1em dotted;
}
.ghost:before {
    content:"";
    border-radius: 50%;
    background: white;
    display: inline-block;
    position: relative;
    top: -0.6em;
    left: 0.2em;
    width: 0.15em;
    height: 0.15em;
}
.ghost:after {
    content:"";
    border-radius: 50%;
    background: white;
    display: inline-block;
    position: relative;
    top: -0.6em;
    left: 0.5em;
    width: 0.2em;
    height: 0.2em;
}
.ghost.frightened {
    background: blue;
    color: blue;
}
@keyframes ghost-flickering {
    0% {
    }
    50% {
        background: white;
        color: white;
    }
    100% {
    }
}
@-webkit-keyframes ghost-flickering {
    0% {
    }
    50% {
        background: white;
        color: white;
    }
    100% {
    }
}
.ghost.frightened.flickering {
    background: blue;
    color: blue;
   ...

JavaScript

/**
 Ghosts:
 Red: usually goes the quickest path
 Pink: is somewhat shy, so moves randomly when close to pacman
 Orange: moves logically or illoligically in 5 second intervals
 Blue: is random half of the time
 */

window['wakanum'] = 0

var pathingMapArray = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 2, 2, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0],
    [3, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 4],
    [0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 2, 2, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,...