separate characer animations

diff --git a/index.html b/index.html
index 6d5514bf1391de6a0c2ad0597b06155c72f200d6..410b12969854b40ca1732d55159f9f73b0b6530a 100644 (file)
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
       <tile position="6" name="brick" blocking="1"></tile>
       <tile position="7" name="water" animated="1" fluid=".5"></tile>
     </tiles>
-    <img id="character" src="character.png" speed="4"/>
+    <img id="character" src="character.png" speed="1.4"/>
     <div id="map" columns="32" rows="32">
       6, 6, 6, 6, 4, 4, 4, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 
        6, 6, 6, 4, 4, 4, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 
@@ -179,6 +179,11 @@ player = {
   frame: 0, d: 's',
   x: 40, y: 40, z: 1,
   sprite: document.getElementById("character"),
+  anim: "stand",
+  anims: {
+    stand: { start:  0, length:  8, speed: 4 },
+    walk:  { start:  8, length: 16, speed: 2 }
+  },
 
   init: function(){
     this.w = this.sprite.getAttribute("width")  * 1 || map.tw || 32;
@@ -204,9 +209,6 @@ player = {
       case 'se': dy =  .45 * this.speed; dx =  .9 * this.speed; break;
     }
 
-    if (player.frame % 6 > 2) { dx *= 1.375; dy *= 1.375; }
-    else { dx *= .625; dy *= .625; }
-  
     var n = map.tile_at(this.x + dx, this.y + dy, this.z);
     var prop = map.props_of(n), head = map.props_of(n + map.rows * map.cols);
 
@@ -217,7 +219,7 @@ player = {
       this.x += dx; this.y += dy; this.n = n;
     }
 
-    this.frame += this.frame < 255 ? 1 : -127;
+    this.frame++; this.frame %= 255;
 
     map.offset_x = this.x - view.clientWidth / 2 |0;
     map.offset_y = this.y - view.clientHeight / 2 |0;
@@ -232,6 +234,7 @@ player = {
     this.z += this.zspeed -= map.gravity;
 
     if (this.z > zbase) {
+      // speed up when in air
       this.speed = this.ospeed * 2;
     } else if (props.fluid && !bottom.blocking) {
       this.n -= map.rows * map.cols;
@@ -245,7 +248,7 @@ player = {
 
 
   draw: function(){ // player.draw
-    var face = 0, state = 0;
+    var face = 0, state = 0, anim = this.anims[this.anim];
   
     switch (this.d){
       case  's': face = 0; break;
@@ -258,12 +261,9 @@ player = {
       case 'se': face = 7; break;
     }
   
-    state = 
-      (this.frame > 11) ? frame / 16 % 2 |0 :
-      (this.frame < 12) ? this.frame / 3 + 2 |0 :
-      0;
+    state = anim.start + this.frame / anim.speed % anim.length | 0;
   
-    canvas.drawImage( this.sprite, this.w * face, this.h * state,
+    canvas.drawImage( this.sprite, this.w * state, this.h * face,
                       this.w, this.h,
                       this.x - this.w / 2 - map.offset_x,
                       this.y - this.z * map.th - this.h + this.o - map.offset_y,
@@ -284,10 +284,11 @@ function get_input(){
   if ( keys[65] || keys[37] ) d += 'w';
   if ( keys[68] || keys[39] ) d += 'e';
 
-  if ( d == '' ) player.frame = 12
+  if ( d == '' ) player.anim = "stand"
   else {
+    if ( player.anim == "stand" ) player.frame = 0;
     player.d = d;
-    if ( player.frame > 11 ) player.frame = 0;
+    player.anim = "walk";
     player.move();
   }
 
@@ -303,7 +304,7 @@ function script(){
     get_input();
     player.fall();
     map.draw();
-    frame += frame < 255 ? 1 : -255;
+    frame++; frame %= 255;
   }, 1000 / fps);
 
   window.addEventListener('keydown', function(x){ keys[x.keyCode] = true; }, false );