Tile Textures

README.md

@@ -6,7 +6,7 @@ Das Ziel dieses Projektes ist es ein auf Javascript und HTML5 basierten "clon" v
 ## Features
 
 - Produktion von Items in Maschinen
-- Verkaufen Items für Geld
+- Verkaufen von Items für Geld
 - Bau von neuen Maschinen aus Items und Geld
 - Verbessern von Maschinen mit Items und Geld
 - Eröffnen von neuen Fabriken

index.html

@@ -7,7 +7,9 @@
   <script src="js/libs/jquery.js"></script>
   <!-- Own scripts-->
   <script src="js/resize.js"></script>
+  <script src="js/util.js"></script>
   <script src="js/baseclasses.js"></script>
+  <script src="js/tiles.js"></script>
   <script src="js/game.js"></script>
 </head>
 

js/baseclasses.js

@@ -4,6 +4,12 @@ class Tile {
     this.y = y
     this.direction = "right"
     this.input = new Inventory()
+    this.frames = 1
+    this.name = "base"
+  }
+
+  nextFrame(fulltime) {
+    return (fulltime % this.frames);
   }
 
   work() {
@@ -61,22 +67,9 @@ class Item {
   }
 
   setDFromDirection(direction) {
-    if (direction == "left") {
-      this.dx = -1
+    this.dx = directions[direction].dx
+    this.dy = directions[direction].dy
     this.dy = 0
-    } else if (direction == "right") {
-      this.dx = 1
-      this.dy = 0
-    } else if (direction == "up") {
-      this.dx = 0
-      this.dy = -1
-    } else if (direction == "down") {
-      this.dx = 0
-      this.dy = 1
-    } else {
-      this.dx = 0
-      this.dy = 0
-    }
     this.x += this.dx
     this.y += this.dy
   }
@@ -116,6 +109,18 @@ class Factory {
     }
   }
 
+  getTiles() {
+    var temp = []
+    for (var x = 0; x < 32; x++) {
+      for (var y = 0; y < 16; y++) {
+        if (this.tiles[x][y] != 0) {
+          temp.push(this.tiles[x][y])
+        }
+      }
+    }
+    return temp
+  }
+
   workTiles() {
     for (var x = 0; x < 32; x++) {
       for (var y = 0; y < 16; y++) {

js/game.js

@@ -8,6 +8,7 @@ var delta = 0
 var lastFrameTimeMs = 0
 var ctx = {}
 var currentFactory = 0
+var fulltime = 0
 
 $(document).ready(function() {
   loadGameData()
@@ -68,10 +69,18 @@ function gametick(timestep) {
 }
 
 function render() {
+  fulltime++
   ctx.clearRect(0, 0, innerWidth, innerHeight)
+  var tilesToRender = factorys[currentFactory].getTiles()
   //Hier wird das Spiel gerendert
   //RENDER TILE-LAYER0
-
+  for (var i = 0; i < tilesToRender.length; i++) {
+    var tile = tilesToRender[i]
+    var img = new Image
+    img.src = "images/tiles/"+tile.name+"0"+tile.nextFrame(fulltime)+".png"
+    img.style = "-ms-transform: rotate("+directions[tile.direction].degree+"deg);-webkit-transform: rotate("+directions[tile.direction].degree+"deg);transform: rotate("+directions[tile.direction].degree+"deg);"
+    ctx.drawImage(img,tile.x*48,tile.y*48,48,48)
+  }
   //RENDER Items
   for (var i = 0; i < factorys[currentFactory].items.length; i++) {
     var item = factorys[currentFactory].items[i]

js/tiles.js

@@ -0,0 +1,9 @@
+//Hier sind alle im Tiles welche im Spiel präsent sind
+
+class Conveyorbelt extends Tile {
+  constructor(x, y){
+    super(x,y)
+    this.frames = 7
+    this.name = "conveyorbelt"
+  }
+}

js/util.js

@@ -0,0 +1,22 @@
+var directions = {
+  "right": {
+    "degree": 0,
+    "dx": 1,
+    "dy": 0
+  },
+  "down": {
+    "degree": 90,
+    "dx": 0,
+    "dy": 1
+  },
+  "left": {
+    "degree": 180,
+    "dx": -1,
+    "dy": 0
+  },
+  "up": {
+    "degree": 270,
+    "dx": 0,
+    "dy": -1
+  }
+}