Mercurial > mhrok3

changeset 1:d61dce5a1e75

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Basic animations
author Radomir Dopieralski <sheep-devel@sheep.art.pl>
date Thu, 25 Oct 2012 21:51:13 +0200
parents 9ab6ba928336
children c8b4eda9019c
files hero.png mhrok.css mhrok.js
diffstat 3 files changed, 270 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
Binary file hero.png has changed
--- a/mhrok.css	Thu Oct 25 15:53:18 2012 +0200
+++ b/mhrok.css	Thu Oct 25 21:51:13 2012 +0200
@@ -0,0 +1,18 @@
+#mhrok {
+    display: block;
+    width: 640px;
+    height: 400px;
+    background: #666;
+    position: relative;
+}
+
+#mhrok .mhrok-mob {
+    display: block;
+    width: 48px;
+    height: 48px;
+    position: absolute;
+}
+
+#mhrok .mhrok-hero {
+    background-image: url('hero.png');
+}
--- a/mhrok.js	Thu Oct 25 15:53:18 2012 +0200
+++ b/mhrok.js	Thu Oct 25 21:51:13 2012 +0200
@@ -0,0 +1,252 @@
+(function () {
+    var Mob = function () {
+        this.animation = 'stand';
+        this.classes = 'mhrok-mob';
+    };
+    Mob.prototype = {};
+    Mob.prototype.animations = {
+        stand: {
+            frames: [
+                [0, 0], [0, 0], [0, 1], [0, 1],
+                [0, 2], [0, 2], [0, 3], [0, 3],
+                [0, 0], [0, 0], [0, 1], [0, 1],
+                [0, 2], [0, 2], [0, 3], [0, 3]
+            ],
+            motion: [
+                [0, 0], [0, 0], [0, 0], [0, 0],
+                [0, 0], [0, 0], [0, 0], [0, 0],
+                [0, 0], [0, 0], [0, 0], [0, 0],
+                [0, 0], [0, 0], [0, 0], [0, 0]
+            ]
+        }
+    };
+    Mob.prototype.createElement = function () {
+        this.element = window.document.createElement('i');
+        this.element.className = this.classes;
+        this.element.style.left = '0px';
+        this.element.style.top = '0px';
+        return this.element;
+    };
+    Mob.prototype.animate = function (frame) {
+        var animation = this.animations[this.animation];
+        var tile = animation.frames[frame];
+        var motion = animation.motion[frame];
+        this.element.style.backgroundPosition = ('' +
+            (-tile[0] * 48) + 'px ' + (-tile[1] * 48) + 'px');
+        this.element.style.left = ('' + 
+            (parseInt(this.element.style.left) + motion[0]) + 'px');
+        this.element.style.top = ('' + 
+            (parseInt(this.element.style.top) + motion[1]) + 'px');
+    };
+    Mob.prototype.update = function (game) {};
+
+
+    var Hero = function () {
+        this.animation = 'stand_north';
+        this.direction = 'north';
+        this.classes += ' mhrok-hero';
+    };
+    Hero.prototype = new Mob();
+    Hero.prototype.directions = {
+        'west':  [-1, 0],
+        'north': [0, -1],
+        'east':  [1, 0],
+        'south': [0, 1],
+    };
+    Hero.prototype.animations = {
+        stand_west:  { frames: [ [5, 0] ], motion: [ [0, 0] ] },
+        stand_north: { frames: [ [6, 0] ], motion: [ [0, 0] ] },
+        stand_east:  { frames: [ [7, 0] ], motion: [ [0, 0] ] },
+        stand_south: { frames: [ [4, 0] ], motion: [ [0, 0] ] },
+        walk_west: {
+            frames: [
+                [5, 0], [5, 0], [5, 1], [5, 1],
+                [5, 2], [5, 2], [5, 3], [5, 3],
+                [5, 0], [5, 0], [5, 1], [5, 1],
+                [5, 2], [5, 2], [5, 3], [5, 3]
+            ],
+            motion: [
+                [-4, 0], [-4, 0], [-4, 0], [-4, 0],
+                [-4, 0], [-4, 0], [-4, 0], [-4, 0],
+                [-4, 0], [-4, 0], [-4, 0], [-4, 0],
+                [-4, 0], [-4, 0], [-4, 0], [-4, 0]
+            ]
+        },
+        walk_north: {
+            frames: [
+                [6, 0], [6, 0], [6, 1], [6, 1],
+                [6, 2], [6, 2], [6, 3], [6, 3],
+                [6, 0], [6, 0], [6, 1], [6, 1],
+                [6, 2], [6, 2], [6, 3], [6, 3]
+            ],
+            motion: [
+                [0, -3], [0, -3], [0, -3], [0, -3],
+                [0, -3], [0, -3], [0, -3], [0, -3],
+                [0, -3], [0, -3], [0, -3], [0, -3],
+                [0, -3], [0, -3], [0, -3], [0, -3]
+            ]
+        },
+        walk_east: {
+            frames: [
+                [7, 0], [7, 0], [7, 1], [7, 1],
+                [7, 2], [7, 2], [7, 3], [7, 3],
+                [7, 0], [7, 0], [7, 1], [7, 1],
+                [7, 2], [7, 2], [7, 3], [7, 3]
+            ],
+            motion: [
+                [4, 0], [4, 0], [4, 0], [4, 0],
+                [4, 0], [4, 0], [4, 0], [4, 0],
+                [4, 0], [4, 0], [4, 0], [4, 0],
+                [4, 0], [4, 0], [4, 0], [4, 0]
+            ]
+        },
+        walk_south: {
+            frames: [
+                [4, 0], [4, 0], [4, 1], [4, 1],
+                [4, 2], [4, 2], [4, 3], [4, 3],
+                [4, 0], [4, 0], [4, 1], [4, 1],
+                [4, 2], [4, 2], [4, 3], [4, 3]
+            ],
+            motion: [
+                [0, 3], [0, 3], [0, 3], [0, 3],
+                [0, 3], [0, 3], [0, 3], [0, 3],
+                [0, 3], [0, 3], [0, 3], [0, 3],
+                [0, 3], [0, 3], [0, 3], [0, 3]
+            ]
+        },
+        stab_west: {
+            frames: [
+                [9, 0], [9, 0], [9, 0], [9, 0],
+                [9, 1], [9, 1], [9, 1], [9, 1],
+                [9, 2], [9, 2], [9, 2], [9, 2],
+                [9, 3], [9, 3], [9, 3], [9, 3]
+            ],
+            motion: [
+                [1, 0], [-1, 0], [0, 1], [-1, 0],
+                [-2, 0], [-3, 0], [0, 0], [0, -1],
+                [1, -2], [2, -1], [2, 0], [1, 1],
+                [0, 2], [0, 0], [0, 0], [0, 0]
+            ]
+        },
+        stab_north: {
+            frames: [
+                [10, 0], [10, 0], [10, 0], [10, 0],
+                [10, 1], [10, 1], [10, 1], [10, 1],
+                [10, 2], [10, 2], [10, 2], [10, 2],
+                [10, 3], [10, 3], [10, 3], [10, 3]
+            ],
+            motion: [
+                [0, 0], [0, 0], [0, 0], [0, 0],
+                [0, 0], [0, 0], [0, 0], [0, 0],
+                [0, 0], [0, 0], [0, 0], [0, 0],
+                [0, 0], [0, 0], [0, 0], [0, 0]
+            ]
+        },
+        stab_east: {
+            frames: [
+                [11, 0], [11, 0], [11, 0], [11, 0],
+                [11, 1], [11, 1], [11, 2], [11, 2],
+                [11, 2], [11, 2], [11, 2], [11, 2],
+                [11, 3], [11, 3], [11, 3], [11, 3]
+            ],
+            motion: [
+                [-1, 0], [1, 0], [0, 1], [1, 0],
+                [2, 0], [3, 0], [0, 0], [0, -1],
+                [-1, -2], [-2, -1], [-2, 0], [-1, 1],
+                [0, 2], [0, 0], [0, 0], [0, 0]
+            ]
+        },
+        stab_south: {
+            frames: [
+                [8, 0], [8, 0], [8, 0], [8, 0],
+                [8, 1], [8, 1], [8, 1], [8, 1],
+                [8, 2], [8, 2], [8, 2], [8, 2],
+                [8, 3], [8, 3], [8, 3], [8, 3]
+            ],
+            motion: [
+                [0, 0], [0, 0], [0, 0], [0, 0],
+                [0, 0], [0, 0], [0, 0], [0, 0],
+                [0, 0], [0, 0], [0, 0], [0, 0],
+                [0, 0], [0, 0], [0, 0], [0, 0]
+            ]
+        }
+    };
+    Hero.prototype.update = function (game) {
+        if (game.keys[37] || game.last_key === 37) { // Left arrow
+            this.animation = 'walk_west';
+            this.direction = 'west';
+        } else if (game.keys[38] || game.last_key === 38) { // Up arrow
+            this.animation = 'walk_north';
+            this.direction = 'north';
+        } else if (game.keys[39] || game.last_key === 39) { // Right arrow
+            this.animation = 'walk_east';
+            this.direction = 'east';
+        } else if (game.keys[40] || game.last_key === 40) { // Down arrow
+            this.animation = 'walk_south';
+            this.direction = 'south';
+        } else if (game.keys[32] || game.last_key === 32) { // Space
+            this.animation = 'stab_' + this.direction;
+        } else {
+            this.animation = 'stand_' + this.direction;
+        };
+        game.last_key = null;
+    };
+
+
+    var Game = function (element) {
+        this.element = element;
+    };
+    Game.prototype = {};
+    Game.prototype.addMob = function (mob) {
+        this.mobs.push(mob);
+        this.element.appendChild(mob.createElement());
+    };
+    Game.prototype.run = function () {
+        var that = this;
+        this.frame_number = 0;
+        this.mobs = [];
+        this.keys = {};
+        this.last_key = null;
+        this.hero = new Hero();
+        this.addMob(this.hero);
+
+        this.animation = window.setInterval(function () {
+            that.frame();
+        }, 50, this);
+        window.addEventListener('keydown', function (e) {
+            console.log(e.keyCode);
+            that.last_key = e.keyCode;
+            that.keys[e.keyCode] = true;
+        });
+        window.addEventListener('keyup', function (e) {
+            delete that.keys[e.keyCode];
+        });
+    };
+    Game.prototype.frame = function () {
+        if (this.hero.animations[this.hero.animation].frames.length === 1) {
+            // Treat the player character specially
+            // for instant reaction to key presses.
+            this.frame_number = 0;
+        } else {
+            this.frame_number = (this.frame_number + 1) % 16;
+        };
+        if (!this.frame_number) {
+            this.mobs.forEach(function (mob) {
+                mob.update(this);
+            }, this);
+        };
+        this.mobs.forEach(function (mob) {
+            mob.animate(this.frame_number);
+        }, this);
+    };
+
+
+    window.addEventListener('load', function () {
+        var element = window.document.getElementById('mhrok');
+        if (element) {
+            var game = new Game(element);
+            game.run();
+        };
+    }, false);
+
+} ());