Face Squash

Another tiny game

by loleg

HTML

<!-- 
Face Squash: a small game in Canvas (alpha)

Contact: @loleg http://oleg.utou.ch

Creative Commons Attribution 3.0 Unported License
http://creativecommons.org/licenses/by/3.0/
-->
<center><canvas></canvas></center>
<script>
    var c = document.getElementsByTagName('canvas')[0];
    var b = document.body;
    var a = c.getContext('2d');
    var screen_width  = c.width  = 500;
    var screen_height = c.height = 300;
</script>

CSS

canvas { border:1px solid #aaa; cursor:pointer; cursor:hand; background-size: 100%; 
 background:url(http://foto.utou.ch/cornwall2008/image024.jpg) no-repeat; }
small { font:bold italic 10pt lucida,sans-serif; color:#888; }
h1 { font:bold 1.4em monospace; text-decoration:underline; }
h2 { font-style:italic; padding-bottom:.3em; }
p { font:9pt lucida,sans-serif; color:#333; text-align:left; }

JavaScript

function Player() {
    this.X = 10, this.Y = 200;
    this.Speed = 1;
    
    this.Width = 64, this.Height = 96;

    this.Frame = 0; // bounce frame

    this.update = function() {
        a.save();
        this.move();
        a.translate(this.X, this.Y);
        //a.scale((this.Speed < 0) ? -1.0 : 1.0, 1.0);
        this.draw();
    };
    this.move = function() {
        this.X = (this.X < -this.Width) ? screen_width + this.Width : 
                 (this.X > screen_width + this.Width) ? -this.Width : 
                     this.X + this.Speed;
        this.Frame++;
    };
    this.draw = function() {
        a.image(this.src, this.X, this.Y, this.Width, this.Height);
    };
};

// create players
var players = [];

var p = new Player();
p.src = "http://jogi.utou.ch/game/jo.png";
p.name = "Jo";
players.push(p);

p = new Player();
p.src = "http://jogi.utou.ch/game/ernie.png";
p.name = "Ernie";
players.push(p);

// main animation loop
setInterval(function(){
    // clear the screen
    a.globalCompositeOperation = 'destination-over';
    a.clearRect(0, 0, screen_width, screen_height);

    // loop thorugh players
    for (var i = 0; i < players.length; i++) {
        players[i].update();
    }
    
}, 40);