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.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.dx = directions[direction].dx
+    this.dy = directions[direction].dy
+    this.dy = 0
     this.x += this.dx
     this.y += this.dy
   }
@@ -108,7 +101,7 @@ class Factory {
     for (var i = 0; i < this.items.length; i++) {
       this.items[i].move()
       if (this.items[i].x % 48 == 0 && this.items[i].y % 48 == 0) {
-        var tile = this.tiles [this.items[i].x / 48] [this.items[i].y / 48]
+        var tile = this.tiles[this.items[i].x / 48][this.items[i].y / 48]
         if (tile != 0) {
           tile.input.addItem(this.items[i])
         }
@@ -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()
@@ -21,7 +22,7 @@ function loadGameData() {
   factorys.push(new Factory())
 }
 
-function loadItems(){
+function loadItems() {
   var itemRequest = new XMLHttpRequest();
   itemRequest.open('GET', 'js/items.json', false)
   itemRequest.send(null)
@@ -53,45 +54,53 @@ function loop(timestamp) {
 
 function gametick(timestep) {
   //time gibt an in den Wievielten von 40 Ticks man sich befindet
-  time ++
-  time = time%48
+  time++
+  time = time % 48
   //Wird 40 mal in einer Sekunde aufgerufen
-  for(var i=0;i<factorys.length;i++){
+  for (var i = 0; i < factorys.length; i++) {
     factorys[i].moveItems()
   }
 
-  if(time%24==0){
-    for(var i=0;i<factorys.length;i++){
+  if (time % 24 == 0) {
+    for (var i = 0; i < factorys.length; i++) {
       factorys[i].workTiles()
     }
   }
 }
 
 function render() {
-	ctx.clearRect(0,0,innerWidth,innerHeight)
+  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]
     var img = new Image
-    img.src = "images/items/"+getItemFormId(item.id).name+".png"
-    ctx.drawImage(img,item.x,item.y,48,48)
+    img.src = "images/items/" + getItemFormId(item.id).name + ".png"
+    ctx.drawImage(img, item.x, item.y, 48, 48)
   }
   //RENDER TILE-LAYER1
 
 }
 
-function getItemFormId(id){
-  for(var i=0;i<items.length;i++){
-    if(items[i].id == id){
+function getItemFormId(id) {
+  for (var i = 0; i < items.length; i++) {
+    if (items[i].id == id) {
       return items[i]
     }
   }
 }
 
-function prepairRender(){
+function prepairRender() {
   var canvas = $('canvas')[0];
   ctx = canvas.getContext('2d')
   canvas.width = 1200

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
+  }
+}