EventSource -> Pacman

by giacal

HTML

<img src="http://sandropaganotti.com/wp-content/goodies/samples/pacman.png">

CSS

img{
    position: absolute;
    top: 100px;
    left: 100px;
    -webkit-transition: all 1s;
}

JavaScript

var stocks = new EventSource("http://sandropaganotti.com/wp-content/goodies/samples/move.php"),
    pacman = document.querySelector('img');

stocks.addEventListener('alto', function(e){
    var t = pacman.offsetHeight;
        pacman.style.top = (t - parseInt(e.data)) + "px";
}, false);

stocks.addEventListener('basso', function(e){
    var t = pacman.offsetHeight;
        pacman.style.top = (t + parseInt(e.data)) + "px";
}, false);

stocks.addEventListener('sinistra', function(e){
    var t = pacman.offsetWidth;
        pacman.style.left = (t - parseInt(e.data)) + "px";
}, false);

stocks.addEventListener('destra', function(e){
    var t = pacman.offsetWidth;
        pacman.style.left = (t + parseInt(e.data)) + "px";
}, false);