Obst



Die Datei crafty.js kann man hier herunterladen. Es lohnt sich übrigens wirklich, sich mit diesem HTML5-Entwicklungssystem für Spiele zu beschäftigen.

Datei index.php



    1: <!DOCTYPE html5>
    2: <html>
    3: <head>
    4:         <script src="crafty.js" type="text/javascript"></script>
    5:        
    6: <style>
    7:         body { font-family:Verdana; color:#eee; font-weight:bold; text-shadow:1px 1px 1px #000 }
    8:         </style>
    9:     <meta charset="utf-8">
   10:    
   11: </head>
   12: <body>
   13:
   14:
   15: <script src="obst.js" type="text/javascript"></script>
   16:
   17: </body>
   18: </html>





Datei Obst.js



    1: window.onload = function() {
    2:
    3:     // Groesse des Spiels
    4:     var WIDTH = 600,
    5:         HEIGHT = 500;
    6:
    7:     // 6 Klickbereiche definieren
    8:     var p = new Array(6);
    9:
   10:     for (i = 0; i < 6; i++) {
   11:         var k = i * 100;
   12:         p[i] = new Crafty.polygon(
   13:                     [k, 0],
   14:                     [k, 100],
   15:                     [k + 100, 100],
   16:                     [k + 100, 0]
   17:                 );
   18:     }
   19:
   20:     var buchstaben = ["A", "B", "C", "D", "E", "F"];
   21:     var Letters = new Array(6);
   22:     var obstsorten = ["Apfel", "Banane", "Clementine", "Durian", "Erdbeere", "Feige"];
   23:
   24:
   25:     Crafty.init(WIDTH, HEIGHT);
   26:
   27:     Crafty.background("#deb887");
   28:
   29:     // Laden der Bilder (100 px x 100 px jeweils gross)
   30:     Crafty.sprite(100, "images/obst.png", {
   31:         Apfel: [0, 0],
   32:         Banane: [1, 0],
   33:         Clementine: [2, 0],
   34:         Durian: [3, 0],
   35:         Erdbeere: [4, 0],
   36:         Feige: [5, 0],
   37:         A: [0, 1],
   38:         B: [1, 1],
   39:         C: [2, 1],
   40:         D: [3, 1],
   41:         E: [4, 1],
   42:         F: [5, 1],
   43:     });
   44:
   45:     //------------------------------------------------------------
   46:    
   47:     // Komponente für die Obstsorte
   48:     Crafty.c("obst", {
   49:
   50:         init: function() {
   51:
   52:         },
   53:
   54:         // Parameter: Position (x, y), Obstsorte, Klickbereich k
   55:         makeBox: function(x, y, s, k) {
   56:             this.addComponent("2D, DOM, Mouse, Draggable, " + s);
   57:             this.x = x;
   58:             this.y = y;
   59:
   60:             this.css('cursor', 'hand');
   61:
   62:             // zerstoert sich selbst, wenn im richtigen Bereich
   63:             this.bind("StopDrag", function(e) {
   64:                 if (p[k].containsPoint(this.x + 50, this.y + 50)) {
   65:                     this.timeout(function() {
   66:                         this.destroy();
   67:                     }, 500);
   68:                 }
   69:             }),
   70:            
   71:             this.bind("Dragging", function(e) {
   72:                 if (p[k].containsPoint(this.x + 50, this.y + 50)) {
   73:                     un.destroy();
   74:                 }
   75:             }),
   76:            
   77:             // bei Mouseover Hilfetext
   78:             this.bind("MouseOver", function(e) {
   79:                 var un = Crafty.e("2D, DOM, Text")
   80:                     .attr({
   81:                         x: x,
   82:                         y: y,
   83:                         h: 20,
   84:                         w: 100
   85:                     })
   86:                     .text(s);
   87:                
   88:                 un.timeout(function() {
   89:                     un.destroy();
   90:                 }, 500);
   91:             });
   92:
   93:
   94:
   95:         },
   96:     });
   97:
   98:     //------------------------------------------------------------
   99:    
  100:     // Komponente für die Buchstaben
  101:     Crafty.c("letter", {
  102:
  103:         init: function() {
  104:
  105:         },
  106:
  107:         makeBox: function(x, y, s) {
  108:             this.addComponent("2D, DOM, Mouse, " + s);
  109:             this.x = x;
  110:             this.y = y;
  111:
  112:             this.bind("MouseOver", function(e) {
  113:                 un = Crafty.e("2D, DOM, Text").attr({
  114:                     x: x,
  115:                     y: y,
  116:                     h: 20,
  117:                     w: 100
  118:                 }).text("<h1>" + s + "</h1>").css({
  119:                     "text-align": "center"
  120:                 });
  121:             });
  122:
  123:             this.bind("MouseOut", function(e) {
  124:                 un.destroy();
  125:             });
  126:
  127:         }
  128:
  129:
  130:     });
  131:
  132:     //------------------------------------------------------------
  133:
  134:     // Erstellen der Buchstaben
  135:     for (i = 0; i < 6; i++) {
  136:         Letters[i] = Crafty.e("letter").makeBox(i * 100, 0, buchstaben[i]);
  137:     }
  138:
  139:
  140:     //Erstellen der Obstteile
  141:     for (i = 0; i < 6; i++) {
  142:         Crafty.e("obst")
  143:             .makeBox(
  144:                 Crafty.math.randomInt(0, 500),
  145:                 Crafty.math.randomInt(150, 400),
  146:                 obstsorten[i],
  147:                 i
  148:             );
  149:     }
  150:
  151: } // onload​

Schule macht Spaß