demos folder

Olivine-Labs · Mar 1, 2012 · e4a89ba · e4a89ba
1 parent c1d1750
commit e4a89ba
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 0 deletions.
diff --git a/demos/crafty/diamond-isometric/game.js b/demos/crafty/diamond-isometric/game.js
@@ -0,0 +1,69 @@
+//pro tip: see also this work in progress by Hex http://jsfiddle.net/hexaust/HV4TX/
+window.onload = function() {
+  var width = 15,
+      height = 20;
+
+  Crafty.init();
+
+  Crafty.sprite(128, "./images/sprite.png?wat", {
+    grass: [0,0,1,1],
+    stone: [1,0,1,1],
+    bedrock:[2,0,1,1]
+  });
+
+  for(var i = 0; i < width; i++) {
+    for(var y = 0; y < height; y++) {
+      var stackHeight = (Math.random() * 3) >> 0;
+
+      for(var z = 0; z <= stackHeight; z++){
+        var tileSprite = ["bedrock", "stone", "grass"],
+            tile = Crafty.e("2D, DOM, DiamondIsometric, Mouse, " + tileSprite[z])
+                  .size(128)
+                  .areaMap([64,0],[128,32],[128,96],[64,128],[0,96],[0,32])
+                  .bind("Click", function(e) {
+                    //destroy on right click
+                    //right click seems not work in Mac OS
+                    //delete it
+                    console.log(e.button);
+                    /*if(e.button === 2)*/ this.destroy();
+                  }).bind("MouseOver", function() {
+                    if(this.has("grass")) {
+                      this.sprite(0,1,1,1);
+                    } else if(this.has("stone")) {
+                      this.sprite(1,1,1,1);
+                    } else{
+                      this.sprite(2,1,1,1);
+                    }
+                  }).bind("MouseOut", function() {
+                    if(this.has("grass")) {
+                      this.sprite(0,0,1,1);
+                    } else if(this.has("stone")) {
+                      this.sprite(1,0,1,1);
+                    } else{
+                      this.sprite(2,0,1,1);
+                    }
+                  })
+                  .place(i, y, z, width);
+      }
+    }
+  }
+
+  Crafty.addEvent(this, Crafty.stage.elem, "mousedown", function(e) {
+    if(e.button > 1) return;
+    var base = {x: e.clientX, y: e.clientY};
+
+    function scroll(e) {
+      var dx = base.x - e.clientX,
+        dy = base.y - e.clientY;
+        base = {x: e.clientX, y: e.clientY};
+      Crafty.viewport.x -= dx;
+      Crafty.viewport.y -= dy;
+    };
+
+    Crafty.addEvent(this, Crafty.stage.elem, "mousemove", scroll);
+
+    Crafty.addEvent(this, Crafty.stage.elem, "mouseup", function() {
+      Crafty.removeEvent(this, Crafty.stage.elem, "mousemove", scroll);
+    });
+  });
+};
diff --git a/demos/crafty/diamond-isometric/images/sprite.png b/demos/crafty/diamond-isometric/images/sprite.png
diff --git a/demos/crafty/diamond-isometric/isometric.htm b/demos/crafty/diamond-isometric/isometric.htm
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script type="text/javascript" src="../../crafty.js"></script>
+	<script type="text/javascript" src="game.js"></script>
+	<title>Iso</title>
+	<style>
+	body, html { margin:0; padding: 0; overflow:hidden }
+	</style>
+</head>
+<body>
+</body>
+</html>