Mercurial > mhrok3

changeset 2:c8b4eda9019c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Simplify inheritance
author Radomir Dopieralski <sheep-devel@sheep.art.pl>
date Fri, 26 Oct 2012 11:22:26 +0200
parents d61dce5a1e75
children 7ea03c5f16bd
files hero.png mhrok.css mhrok.js
diffstat 3 files changed, 122 insertions(+), 61 deletions(-) [+]
line wrap: on
line diff
Binary file hero.png has changed
--- a/mhrok.css	Thu Oct 25 21:51:13 2012 +0200
+++ b/mhrok.css	Fri Oct 26 11:22:26 2012 +0200
@@ -1,7 +1,7 @@
 #mhrok {
     display: block;
     width: 640px;
-    height: 400px;
+    height: 480px;
     background: #666;
     position: relative;
 }
@@ -11,8 +11,56 @@
     width: 48px;
     height: 48px;
     position: absolute;
+    margin-top: -24px;
+    margin-left: -8px;
+}
+
+#mhrok .mhrok-sprite {
+    display: block;
+    width: 48px;
+    height: 48px;
+    position: absolute;
+}
+#mhrok .mhrok-hero .mhrok-sprite {
+    background-image: url('hero.png');
+}
+#mhrok .mhrok-shadow {
+    width: 32px;
+    height: 24px;
+    background-image: url('floor.png');
+    background-position: -128px -96px;
+    opacity: 0.25;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    margin-left: -16px;
 }
 
-#mhrok .mhrok-hero {
-    background-image: url('hero.png');
+#mhrok .mhrok-map {
+    display: block;
+    position: absolute;
+    width: 640px;
+    height: 480px;
+}
+
+#mhrok .mhrok-map div {
+    width: 640px;
+    height: 24px;
 }
+
+#mhrok .mhrok-map b {
+    display: inline-block;
+    width: 32px;
+    height: 24px;
+    background-image: url('floor.png');
+}
+
+#mhrok .mhrok-map .mhrok-X {
+    background-position: 0px -0;
+}
+#mhrok .mhrok-map .mhrok-a {
+    background-position: 0px -24px;
+}
+#mhrok .mhrok-map .mhrok-b {
+    background-position: 0px -48px;
+}
--- a/mhrok.js	Thu Oct 25 21:51:13 2012 +0200
+++ b/mhrok.js	Fri Oct 26 11:22:26 2012 +0200
@@ -1,37 +1,38 @@
 (function () {
-    var Mob = function () {
+    var Mob = function (game) {
         this.animation = 'stand';
-        this.classes = 'mhrok-mob';
+        this.element = window.document.createElement('i');
+        this.element.className = this.classes;
+        this.element.style.left = '0px';
+        this.element.style.top = '0px';
+        game.mobs.push(this);
+        game.element.appendChild(this.element);
+        this.shadow = window.document.createElement('b');
+        this.shadow.className = 'mhrok-shadow';
+        this.element.appendChild(this.shadow);
+        this.sprite = window.document.createElement('b');
+        this.sprite.className = 'mhrok-sprite';
+        this.element.appendChild(this.sprite);
     };
     Mob.prototype = {};
+    Mob.prototype.classes = 'mhrok-mob';
     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 = ('' +
+        this.sprite.style.backgroundPosition = ('' +
             (-tile[0] * 48) + 'px ' + (-tile[1] * 48) + 'px');
         this.element.style.left = ('' + 
             (parseInt(this.element.style.left) + motion[0]) + 'px');
@@ -42,11 +43,12 @@
 
 
     var Hero = function () {
+        Mob.apply(this, arguments);
         this.animation = 'stand_north';
         this.direction = 'north';
-        this.classes += ' mhrok-hero';
     };
-    Hero.prototype = new Mob();
+    Hero.prototype = Object.create(Mob.prototype);
+    Hero.prototype.classes += ' mhrok-hero';
     Hero.prototype.directions = {
         'west':  [-1, 0],
         'north': [0, -1],
@@ -62,41 +64,29 @@
             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]
             ]
         },
@@ -104,70 +94,50 @@
             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]
+                [1, 0], [-1, 0], [0, 0], [-2, 0],
+                [-3, 0], [0, 0], [3, 0], [2, 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]
+                [-1, 0], [1, 0], [0, 0], [2, 0],
+                [3, 0], [0, 0], [-3, 0], [-2, 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]
             ]
         }
     };
@@ -193,13 +163,35 @@
     };
 
 
+    var Level = function (game, map) {
+        this.map = map;
+        this.element = window.document.createElement('div');
+        this.element.className = 'mhrok-map';
+        game.element.appendChild(this.element);
+        var row;
+        var row_element;
+        this.elements = [];
+        for (var y=0; y < 20; ++y) {
+            row = [];
+            this.elements.push(row);
+            row_element = window.document.createElement('div');
+            this.element.appendChild(row_element);
+            for (var x=0; x < 20; ++x) {
+                var element = window.document.createElement('b');
+                element.className = 'mhrok-' + this.map[y][x];
+                row_element.appendChild(element);
+                row.push(element);
+            };
+        };
+    };
+    Level.prototype = {};
+
+
     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;
@@ -207,14 +199,35 @@
         this.mobs = [];
         this.keys = {};
         this.last_key = null;
-        this.hero = new Hero();
-        this.addMob(this.hero);
+
+        this.level = new Level(this, [
+            'XXXXXXXXXXXXXXXXXXXX',
+            'XabaaaaaaaaaaaaaaaaX',
+            'XaaaaaabaaaaaaaaaaaX',
+            'XaaaaabbaaaaaaaaaabX',
+            'XaababbbaaaaaaaaaabX',
+            'XaaaaabbaaabbaaaaabX',
+            'XaaaaaaabaabbaaaaaaX',
+            'XaaaaaaaaaaaaaaabaaX',
+            'XaaaaaaaaaaabaabaaaX',
+            'XaaaaaaaaaaaaaaaaaaX',
+            'XaaaaaaaaaaaaabbaabX',
+            'XaaaaaaaaaaaabbbbabX',
+            'XaaaabaaaaaaaaabaabX',
+            'XaabbbbaaaaaaaaaabbX',
+            'XaaabbaaaaaaaaaaabbX',
+            'XaaaabaaaaaaaaaaabbX',
+            'XaaaaaaaaaabaabbbbbX',
+            'XaaaaaabbabbbbbbbbbX',
+            'XaaaabbbbbbbbbbbbbbX',
+            'XXXXXXXXXXXXXXXXXXXX',
+        ]);
+        this.hero = new Hero(this);
 
         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;
         });
@@ -228,7 +241,7 @@
             // for instant reaction to key presses.
             this.frame_number = 0;
         } else {
-            this.frame_number = (this.frame_number + 1) % 16;
+            this.frame_number = (this.frame_number + 1) % 8;
         };
         if (!this.frame_number) {
             this.mobs.forEach(function (mob) {