ippa · shootTheLuck · Dec 1, 2017
diff --git a/examples/example0.html b/examples/example0.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html> 
+<!DOCTYPE html>
 <html>
   <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <script src="../jaws.js"></script>
     <link type="text/css" rel="stylesheet" href="style.css" />
-    <title>Jaws Example #12 - As minimalistic as JawsJS can get</title>
+    <title>Jaws Example #0 - As minimalistic as JawsJS can get</title>
   </head>
 <body>
   <div id="info">
@@ -17,22 +18,22 @@
       player = new jaws.Sprite({image: "plane.png", x: jaws.width/2, y:jaws.height/2, anchor: "center"})
       jaws.preventDefaultKeys(["up", "down", "left", "right"])
     }
-    
+
     function update() {
       if(jaws.pressed("left"))  { player.x -= 2 }
       if(jaws.pressed("right")) { player.x += 2 }
       if(jaws.pressed("up"))    { player.y -= 2 }
       if(jaws.pressed("down"))  { player.y += 2 }
     }
-    
+
     function draw() {
       jaws.clear()
       player.draw()
     }
 
     // Looks for <canvas> or <div id="canvas"> to draw on. Creates <canvas> if niether is found.
     // Then load predined-assets, call setup(), then loop update() and draw() in 60 FPS.
-    jaws.start()  
+    jaws.start()
   </script>
 
 </body>

diff --git a/examples/example1.html b/examples/example1.html
@@ -1,6 +1,7 @@
-<!DOCTYPE html> 
+<!DOCTYPE html>
 <html>
   <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <script src="../jaws.js"></script>
     <link type="text/css" rel="stylesheet" href="style.css" />
     <title>Jaws Example #1 - Sprite(), pressed(), basic game loop</title>
@@ -18,10 +19,10 @@ <h1>Basic example</h1>
     We make our own canvas, instead of having jaws generate one (or several) for us.
     We get the canvas-tag from the DOM, fetch its context and send it to Sprite.
     If you for some reason want to have your own canvas tag this is the way to do it.
-    Add "?debug=1" to the URL and jaws will create a small window with debuginfo: 
+    Add "?debug=1" to the URL and jaws will create a small window with debuginfo:
     <a href="example1.html?debug=1">Switch to debug mode</a> | <a href="example1.html">Remove debug window</a>
   </div>
- 
+
   <script>
     var player
     var canvas
@@ -43,7 +44,7 @@ <h1>Basic example</h1>
       jaws.on_keydown("esc", setup)
       jaws.preventDefaultKeys(["up", "down", "left", "right", "space"])
     }
-    
+
     /* step1. execute the game logic */
     function update() {
       if(jaws.pressed("left"))  { player.x -= 2 }
@@ -56,18 +57,18 @@ <h1>Basic example</h1>
       forceInsideCanvas(player)
       bullets.removeIf(isOutsideCanvas)
     }
-    
+
     /* step2. draw the update state on screen */
     function draw() {
       jaws.clear()        // Same as: context.clearRect(0,0,jaws.width,jaws.height)
-       
+
       player.draw()
       bullets.draw()  // will call draw() on all items in the list
 
       info_tag.innerHTML = "FPS: " + jaws.game_loop.fps + " Player position: " + player.x + "/" + player.y + ". W/H: " + canvas.width + "/" + canvas.height
       fps.innerHTML = jaws.game_loop.fps
     }
-    
+
     /* 2 functions that will help us remove bullets outside the canvas + keep the plane within the canvas. */
     function isOutsideCanvas(item) { return (item.x < 0 || item.y < 0 || item.x > canvas.width || item.y > canvas.height) }
     function forceInsideCanvas(item) {
@@ -84,7 +85,7 @@ <h1>Basic example</h1>
       this.draw = function() {
         this.x += 4
         context.beginPath();
-        context.arc(this.x, this.y, 4, 0, Math.PI*2, true); 
+        context.arc(this.x, this.y, 4, 0, Math.PI*2, true);
         context.stroke();
       }
     }

diff --git a/examples/example10.html b/examples/example10.html
@@ -1,6 +1,7 @@
-<!DOCTYPE html> 
+<!DOCTYPE html>
 <html>
   <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <script src="../jaws-dynamic.js"></script>
     <script src="../game_states/edit.js"></script>
     <link type="text/css" rel="stylesheet" href="style.css" />
@@ -11,7 +12,7 @@
   <canvas width=500 height=400></canvas>
 
   <div id="jaws-edit">Editor output will show here.</div>
-  
+
   <div id="info">
     <h1>press SPACE to start editor</h1>
     <h2 style="color: red">** This example is WIP and currently doesn't work as intended ***</h2><br /><br />
@@ -24,15 +25,15 @@ <h2 style="color: red">** This example is WIP and currently doesn't work as inte
     DEL: removes selected items <br />
     +: Adds new object (exprimental)<br/>
   </div>
-  
+
   <h3>jaws log</h3>
   <div id="jaws-log"></div>
- 
+
 i  <script>
     function Example() {
       var blocks = new jaws.SpriteList()
       var title = window.location.href  // Use URL as unique identifier when saving/fetching game objects from localStorage
-     
+
       this.setup = function() {
         // blocks.load(localStorage[title])  // Load  saved sprites from localStorage
         blocks.load( jaws.assets.get("/game_objects.json") )  // Load
@@ -44,13 +45,13 @@ <h3>jaws log</h3>
           }
         }
 
-        jaws.on_keydown(["esc","space"], function() { 
+        jaws.on_keydown(["esc","space"], function() {
           /*
           * Start editor by switching game state to a new isntance of jaws.game_states.Edit
           * By specing an url, editor will POST a dump of all sprites to that url when saving.
           *
           * Example backend in sinatra (Ruby web framework):
-          *  
+          *
           * post "/game_objects.json" do
           *   File.open("public/game_objects.json", "w") do |fh|
           *     fh.puts params[:game_objects]
@@ -62,7 +63,7 @@ <h3>jaws log</h3>
         })
         jaws.preventDefaultKeys(["space"])
       }
-      
+
       this.draw = function() {
         jaws.clear()
         blocks.draw()
@@ -71,11 +72,11 @@ <h3>jaws log</h3>
 
     var Grass = function(options) { options.image = "grass.png"; jaws.Sprite.call(this, options) }
     var Block = function(options) { options.image = "block.bmp"; jaws.Sprite.call(this, options) }
-    
+
     jaws.onload = function() {
       Grass.prototype = new jaws.Sprite({})
       Grass.prototype.constructor = Grass
-      
+
       Block.prototype = new jaws.Sprite({})
       Block.prototype.constructor = Block
 

diff --git a/examples/example11.html b/examples/example11.html
@@ -1,6 +1,7 @@
-<!DOCTYPE html> 
+<!DOCTYPE html>
 <html>
   <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <script src="../jaws-dynamic.js"></script>
     <link type="text/css" rel="stylesheet" href="style.css" />
     <title>Jaws Example #11 - Sprite(), pressed(), basic game loop</title>
@@ -18,32 +19,32 @@ <h1>jaws.gfx.retroScaleImage() and Literal Notion game state</h1>
     This will pre-scale player.png using a nearest neighbor algo (blocky retro style).
     NOTE: Scaling Big images can make browser "hang" for 2-3-4 seconds.
   </div>
- 
+
   <script>
     var player
     var info_tag
     var fps
 
     play_state = {
-      setup: function() {  
+      setup: function() {
         fps = document.getElementById("fps")
         info_tag = document.getElementsByTagName('info')
 
         var prescaled_image = jaws.retroScaleImage( jaws.assets.get("plane.png"), 3)
         player = jaws.Sprite({image: prescaled_image, x: 50, y:50, anchor: "center"}) // jaws.Sprite also works without 'new'
         jaws.preventDefaultKeys("up", "down", "left", "right", "space")
       },
-      
+
       update: function() {
         jaws.forceInsideCanvas(player)
         if(jaws.pressed("left"))  { player.x -= 2 }
         if(jaws.pressed("right")) { player.x += 2 }
         if(jaws.pressed("up"))    { player.y -= 2 }
         if(jaws.pressed("down"))  { player.y += 2 }
       },
-      
+
       draw: function() {
-        jaws.clear()        
+        jaws.clear()
         player.draw()
         info_tag.innerHTML = "FPS: " + jaws.game_loop.fps + " Player position: " + player.x + "/" + player.y
         fps.innerHTML = jaws.game_loop.fps

diff --git a/examples/example12.html b/examples/example12.html
@@ -1,6 +1,7 @@
-<!DOCTYPE html> 
+<!DOCTYPE html>
 <html>
   <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <script src="../jaws-dynamic.js"></script>
     <link type="text/css" rel="stylesheet" href="style.css" />
     <title>Jaws Example #12 - TileMap() and ViewPort()</title>
@@ -9,16 +10,16 @@
 
   <canvas width=500 height=320></canvas>
   FPS: <span id="fps"></span>. Move with arrow keys.
-  
+
   <div id="info">
     <h1>TileMap and ViewPort optimizations</h1>
     Here we have a Huge game world consisting of 700 x 700 tiles ( ~half a million sprites ).
     We don't want to draw them all so we use viewport.drawTileMap( tile_map )
   </div>
-  
+
   <h3>jaws log</h3>
   <div id="jaws-log"></div>
- 
+
   <script>
     function Example() {
       var player
@@ -39,7 +40,7 @@ <h3>jaws log</h3>
             blocks.push( new Sprite({image: "grass.png", x: i*32, y: i2*32}) )
           }
         }
-        
+
         //blocks.push( new Sprite({image: "grass.png", x: 0, y: 0}) )
         viewport = new jaws.Viewport({max_x: width*32, max_y: height*32})
 
@@ -51,7 +52,7 @@ <h3>jaws log</h3>
         tile_map.push(blocks)
 
         player = new jaws.Sprite({x:10, y:10, scale: 2, anchor: "center"})
-        
+
         var anim = new jaws.Animation({sprite_sheet: "droid_11x15.png", frame_size: [11,15], frame_duration: 100})
         player.anim_default = anim.slice(0,5)
         player.anim_up = anim.slice(6,8)
@@ -78,8 +79,8 @@ <h3>jaws log</h3>
       /* Directly after each update draw() will be called. Put all your on-screen operations here. */
       this.draw = function() {
         jaws.clear()
-        /* 
-        * blocks & tile_map  = ~500.000 sprites 
+        /*
+        * blocks & tile_map  = ~500.000 sprites
         */
 
         // Slow
@@ -94,7 +95,7 @@ <h3>jaws log</h3>
         viewport.draw( player )
       }
     }
-    
+
     jaws.onload = function() {
       jaws.unpack()
       jaws.assets.add(["droid_11x15.png","block.bmp","grass.png"])

diff --git a/examples/example13.html b/examples/example13.html
@@ -1,6 +1,7 @@
-<!DOCTYPE html> 
+<!DOCTYPE html>
 <html>
   <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <script src="../jaws-dynamic.js"></script>
     <script src="../game_states/edit.js"></script>
     <link type="text/css" rel="stylesheet" href="style.css" />
@@ -11,19 +12,19 @@
   <canvas width=500 height=400></canvas>
 
   <div id="jaws-edit">Editor output will show here.</div>
-  
+
   <div id="info">
     <h1>press SPACE to start editor</h1>
   </div>
-  
+
   <h3>jaws log</h3>
   <div id="jaws-log"></div>
- 
+
   <script>
     var blocks;
     function Example() {
       blocks = new jaws.SpriteList()
-     
+
       this.setup = function() {
         // blocks.load(localStorage[title])  // Load  saved sprites from localStorage
 
@@ -37,29 +38,29 @@ <h3>jaws log</h3>
         jaws.preventDefaultKeys(["space"])
         startEdit();
       }
-      
+
       this.draw = function() {
         jaws.clear()
         blocks.draw()
       }
     }
 
     function startEdit() {
-      jaws.switchGameState( 
+      jaws.switchGameState(
         new jaws.game_states.Edit({constructors: [Grass, Dirt], game_objects: blocks, grid_size: [30,15], isometric: true, title: window.location.href})
       )
     }
 
     var Grass = function(options) { options.image = "isometric_grass.bmp"; options.scale_image=2; jaws.Sprite.call(this, options) }
     var Dirt = function(options)  { options.image = "isometric_dirt.bmp"; options.scale_image=2; jaws.Sprite.call(this, options) }
-    
+
     jaws.onload = function() {
       Grass.prototype = new jaws.Sprite({})
       Grass.prototype.constructor = Grass
-      
+
       Dirt.prototype = new jaws.Sprite({})
       Dirt.prototype.constructor = Dirt
-     
+
       jaws.assets.add(["isometric_grass.bmp", "isometric_dirt.bmp"])
       jaws.start(Example)
     }