Rotation + better fps

js/baseclasses.js

@@ -6,10 +6,14 @@ class Tile {
     this.input = new Inventory()
     this.frames = 1
     this.name = "base"
+    this.texture = {
+      "0": [],
+      "1": []
+    }
   }
 
-  nextFrame(fulltime) {
+  getTexture(fulltime,layer) {
-    return (fulltime % this.frames);
+    return (fulltime % this.texture[layer].length);
   }
 
   work() {
@@ -69,7 +73,6 @@ class Item {
   setDFromDirection(direction) {
     this.dx = directions[direction].dx
     this.dy = directions[direction].dy
-    this.dy = 0
     this.x += this.dx
     this.y += this.dy
   }

js/game.js

@@ -30,7 +30,7 @@ function loadItems() {
   items = json.items
 }
 
-function loop(timestamp) {
+function loopp(timestamp) {
   //Check Gametick Rate
   if (timestamp < lastFrameTimeMs + (1000 / 48)) {
     requestAnimationFrame(loop)
@@ -52,6 +52,17 @@ function loop(timestamp) {
   requestAnimationFrame(loop);
 }
 
+var lastRender = 0
+function loop(timestamp) {
+  var progress = timestamp - lastRender
+
+  gametick(progress)
+  render()
+
+  lastRender = timestamp
+  window.requestAnimationFrame(loop)
+}
+
 function gametick(timestep) {
   //time gibt an in den Wievielten von 40 Ticks man sich befindet
   time++
@@ -63,6 +74,7 @@ function gametick(timestep) {
 
   if (time % 24 == 0) {
     for (var i = 0; i < factorys.length; i++) {
+      factorys[i].moveItems()
       factorys[i].workTiles()
     }
   }
@@ -78,8 +90,8 @@ function render() {
     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)
-    ctx.drawImage(img,tile.x*48,tile.y*48,48,48)
+    drawRotatedImage(img,tile.x*48+24,tile.y*48+24,directions[tile.direction].degree)
   }
   //RENDER Items
   for (var i = 0; i < factorys[currentFactory].items.length; i++) {
@@ -87,6 +99,7 @@ function render() {
     var img = new Image
     img.src = "images/items/" + getItemFormId(item.id).name + ".png"
     ctx.drawImage(img, item.x, item.y, 48, 48)
+    console.log(item.x)
   }
   //RENDER TILE-LAYER1
 

js/tiles.js

@@ -1,9 +1,12 @@
 //Hier sind alle im Tiles welche im Spiel präsent sind
 
 class Conveyorbelt extends Tile {
-  constructor(x, y){
+  constructor(x, y) {
-    super(x,y)
+    super(x, y)
-    this.frames = 7
     this.name = "conveyorbelt"
+    this.texture = {
+      "0": ["conveyorbelt00", "conveyorbelt01", "conveyorbelt02", "conveyorbelt03", "conveyorbelt04", "conveyorbelt05", "conveyorbelt06"],
+      "1": []
+    }
   }
 }

js/util.js

@@ -20,3 +20,14 @@ var directions = {
     "dy": -1
   }
 }
+
+//Umrechnung von Grad zu Bogenmaß
+var TO_RADIANS = Math.PI/180;
+
+function drawRotatedImage(image, x, y, angle) {
+	ctx.save();
+	ctx.translate(x, y);
+	ctx.rotate(angle * TO_RADIANS);
+	ctx.drawImage(image, -(image.width/2), -(image.height/2));
+	ctx.restore();
+}