up

nikeedev · Feb 23, 2024 · 52d59cf · 52d59cf
1 parent 9be69f2
commit 52d59cf
Show file tree

Hide file tree

Showing 34 changed files with 262 additions and 8,469 deletions.
diff --git a/examples/ex1/example1.html b/examples/ex1/example1.html
@@ -5,11 +5,17 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PlayLib: Example 1</title>
+    <link rel="shortcut icon" href="/playlib_icon.png" type="image/png">
 </head>
 <body>
     <canvas style="border: 1px solid black;" id="canvas"></canvas>
     <script type="module" src="example1.js"></script>
 
     <p style="font-size: 15px; font-family: Arial;"> Back to <a style="font-size: 15px;" href="/">home &#8962;</a></p>
+    <script type="module">
+        import { example } from '../examples.js';
+
+        example("1");
+    </script>
 </body>
 </html>
diff --git a/examples/ex1/example1.js b/examples/ex1/example1.js
@@ -1,5 +1,5 @@
 
-import Playlib from "../../bin/playlib.js";
+import { Playlib } from "../../bin/playlib.js";
 
 
 /** 
@@ -15,21 +15,22 @@ import Playlib from "../../bin/playlib.js";
 const canvas = document.getElementById("canvas");
 
 
+const ScreenSize = new Playlib.Vec2(window.innerWidth - 30, window.innerHeight - 30);
 
-var config = {
+let config = {
     game_name: "Example 1",
     style: "border: 1px solid black; background-color: white;",
     useOwnCanvas: true,
     canvas: canvas,
-}    
-
+    width: ScreenSize.width,
+    height: ScreenSize.height,
+}
 
-class MainScene extends Playlib.Scene
-{
+class MainScene extends Playlib.Scene {
 
     constructor(canvas, ClearScreen) {
         super(canvas, ClearScreen);
-        
+
         //this.ClearScreen = true;
 
     }
@@ -44,27 +45,25 @@ class MainScene extends Playlib.Scene
     // Example 1: Game and Words variable: Rainbow text and rainbow box moving Rect. 
 
 
-    words = new Playlib.Text("Hello", new Playlib.Vector2(60, 88), ScreenSize);
+    words = new Playlib.Text("Hello", new Playlib.Vec2(60, 88), ScreenSize);
 
-    square = new Playlib.Rect(new Playlib.Vector2(43, 43), new Playlib.Vector2(65, 65), ScreenSize);
+    square = new Playlib.Rect(new Playlib.Vec2(43, 43), new Playlib.Vec2(65, 65), ScreenSize);
 
-    create()
-    {
+    create() {
 
     }
 
-    update(ctx, ts)
-    {
+    update(ctx, ts) {
         this.words.draw(ctx)
         this.words.color = this.colors[this.colorcount1];
         this.colorcount1++;
         if (this.colorcount1 > this.colors.length) this.colorcount1 = 0;
-    
+
         this.square.draw(ctx);
-        if (this.square.position.x < 167) { 
-    
+        if (this.square.position.x < 167) {
+
             this.square.position.x += 1;
-    
+
             this.square.color = this.colors[this.colorcount2];
             this.colorcount2++;
             if (this.colorcount2 > this.colors.length) this.colorcount2 = 0;
@@ -77,10 +76,6 @@ class MainScene extends Playlib.Scene
 
 }
 
-
 let game = new Playlib.Game(config, [new MainScene()]);
 
-var ScreenSize = new Playlib.Vector2(game.width, game.height);
-
-
 game.run();
diff --git a/examples/ex2/example2.html b/examples/ex2/example2.html
@@ -5,13 +5,19 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PlayLib: Example 2</title>
+    <link rel="shortcut icon" href="/playlib_icon.png" type="image/png">
 </head>
 <body>
     <canvas style="border: 1px solid black;" id="canvas"></canvas>
 
-    <script type="module" src="example2.js"></script>
-
     <p style="font-size: 15px; font-family: Arial;"> Back to <a style="font-size: 15px;" href="/">home &#8962;</a></p>
+
+    <script type="module">
+        import { example } from '../examples.js';
+
+        example("2");
+    </script>
+    <script type="module" src="example2.js"></script>
 </body>
 
 </html>
diff --git a/examples/ex2/example2.js b/examples/ex2/example2.js
@@ -17,81 +17,89 @@ const canvas = document.getElementById("canvas");
 
 canvas.width = window.innerWidth - 30;
 canvas.height = window.innerHeight - 20;
-const ScreenSize = new Playlib.Size(canvas.width, canvas.height);
+const ScreenSize = new Playlib.Vec2(canvas.width, canvas.height);
 
-const colors = ["#FFFFFF", "#C0C0C0", "#808080", "#000000", "#FF0000", "#800000", "#FFFF00", "#808000", "#00FF00", "#008000", "#00FFFF"]
 
-var colorcount = 0;
-var ActivateUp = false; 
-var ActivateDown = false;
-
-
-// Example 2: Canvas painting of rainbow rectangles that move around.
-
-var config = {
+let config = {
     game_name: "Example 2",
     style: "border: 1px solid black; background-color: white;",
     width: ScreenSize.width,
     height: ScreenSize.height,
     useOwnCanvas: true,
     canvas: canvas,
-    
+
 }
 
+class MainScene extends Playlib.Scene {
 
-var game = new Playlib.Game(config);
 
+    rect = new Playlib.Rect(new Playlib.Vec2(0, 0), new Playlib.Vec2(20, 20), ScreenSize)
 
+    colors = ["#FFFFFF", "#C0C0C0", "#808080", "#000000", "#FF0000", "#800000", "#FFFF00", "#808000", "#00FF00", "#008000", "#00FFFF"]
 
-var game2 = new Playlib.Rect(new Playlib.Vector2(0, 0), new Playlib.Size(1, 1), ScreenSize)
+    colorcount = 0;
+    ActivateUp = false;
+    ActivateDown = false;
 
+    constructor(canvas, ClearScreen) {
+        super(canvas, ClearScreen);
+        this.ClearScreen = false;
+    }
 
-game.update((ctx) => { 
-    game2.draw(ctx);
+    // Example 2: Canvas painting of rainbow rectangles that move around.
+
+    create() {
 
-    if (ActivateUp == false && canvas.height <= game2.position.y) {
-        ActivateUp = true;
-    }
-    if (ActivateDown == false && -2 >= game2.position.y) {
-        ActivateDown = true;
-        ActivateUp = false;
     }
 
-    if (ActivateUp) {
-        game2.position.x += 1;
-        game2.position.y -= 1;
-        game2.size.width -= 0.1;
-        game2.size.height -= 0.1;
+    update(ctx, ts) {
+        this.rect.draw(ctx);
 
+        if (this.ActivateUp == false && canvas.height <= this.rect.position.y) {
+            this.ActivateUp = true;
+        }
+        if (this.ActivateDown == false && -2 >= this.rect.position.y) {
+            this.ActivateDown = true;
+            this.ActivateUp = false;
+        }
 
-        game2.color = colors[colorcount];
-        colorcount--;
-        if (colorcount < 0) colorcount = colors.length;
-    }
-    else if (ActivateDown && game2.position.x >= 0) {
-
-        game2.position.x -= 1;
+        if (this.ActivateUp) {
+            this.rect.position.x += 1;
+            this.rect.position.y -= 1;
+            this.rect.size.width -= 0.1;
+            this.rect.size.height -= 0.1;
 
-
 
-        game2.color = colors[colorcount];
-        colorcount++;
-        if (colorcount > colors.length) colorcount = 0;
+            this.rect.color = this.colors[this.colorcount];
+            this.colorcount--;
+            if (this.colorcount < 0) this.colorcount = this.colors.length;
+        }
+        else if (this.ActivateDown && this.rect.position.x >= 0) {
 
-    }
-    else {
-        game2.position.x += 1;
-        game2.position.y += 1;
-        game2.size.width += 0.1;
-        game2.size.height += 0.1;
+            this.rect.position.x -= 1;
+
+            this.rect.color = colors[colorcount];
+            this.colorcount++;
+            if (this.colorcount > this.colors.length) this.colorcount = 0;
+
+        }
+        else {
+            this.rect.position.x += 1;
+            this.rect.position.y += 1;
+            this.rect.size.width += 0.1;
+            this.rect.size.height += 0.1;
 
 
 
-        game2.color = colors[colorcount];
-        colorcount++;
-        if (colorcount > colors.length) colorcount = 0;
+            this.rect.color = this.colors[this.colorcount];
+            this.colorcount++;
+            if (this.colorcount > this.colors.length) this.colorcount = 0;
+        }
+
     }
-
-}, false);
+}
+
+let game = new Playlib.Game(config, [new MainScene()]);
 
+game.run();
 
diff --git a/examples/ex3/example3.html b/examples/ex3/example3.html
@@ -12,5 +12,11 @@
     <script type="module" src="example3.js"></script>
 
     <p style="font-size: 15px; font-family: Arial;"> Back to <a style="font-size: 15px;" href="/">home &#8962;</a></p>
+
+    <script type="module">
+        import { example } from '../examples.js';
+
+        example("3");
+    </script>
 </body>
 </html>
diff --git a/examples/ex3/example3.js b/examples/ex3/example3.js
@@ -8,7 +8,7 @@ canvas.width = window.innerWidth - 30;
 canvas.height = window.innerHeight - 20;
 
 
-const ScreenSize = new Playlib.Size(canvas.width, canvas.height);
+const ScreenSize = new Playlib.Vec2(canvas.width, canvas.height);
 
 // Example 4: Drawing a using Sprite class: Black Circle
 
@@ -27,7 +27,7 @@ var config = {
 var game = new Playlib.Game(config);
 
 
-var spirit = new Playlib.Sprite("../../assets/Black_Square.png", new Playlib.Vector2(120, 120), ScreenSize);
+var spirit = new Playlib.Sprite("../../assets/Black_Square.png", new Playlib.Vec2(120, 120), ScreenSize);
 
 
 await spirit.init();

diff --git a/examples/ex4/example4.html b/examples/ex4/example4.html
@@ -11,5 +11,11 @@
     <!---canvas style="border: 1px solid black;" id="canvas"></canvas>--->
     <p style="font-size: 15px; font-family: Arial;"> Back to <a style="font-size: 15px;" href="/">home &#8962;</a></p>
     <script type="module" src="example4.js"></script>
+
+    <script type="module">
+        import { example } from '../examples.js';
+
+        example("4");
+    </script>
 </body>
 </html>
diff --git a/examples/ex4/example4.js b/examples/ex4/example4.js
@@ -19,7 +19,7 @@ class MainScene extends Playlib.Scene
     }
 
 
-    spirit = new Playlib.Sprite("../../assets/Black_Square.png", new Playlib.Vector2(120, 120), ScreenSize);
+    spirit = new Playlib.Sprite("../../assets/Black_Square.png", new Playlib.Vec2(120, 120), ScreenSize);
 
 
     // Example 4: Use Sprite class to draw a moving black square
@@ -45,7 +45,7 @@ class MainScene extends Playlib.Scene
 
 let game = new Playlib.Game(config, [new MainScene()]);
 
-var ScreenSize = new Playlib.Vector2(game.width, game.height);
+var ScreenSize = new Playlib.Vec2(game.width, game.height);
 
 
 game.run();

diff --git a/examples/ex5/example5.html b/examples/ex5/example5.html
@@ -12,5 +12,11 @@
     <script type="module" src="example5.js"></script>
 
     <p style="font-size: 6px; font-family: Arial;"> Back to <a style="font-size: 10px;" href="/">home &#8962;</a></p>
+
+    <script type="module">
+        import { example } from '../examples.js';
+
+        example("5");
+    </script>
 </body>
 </html>
diff --git a/examples/ex5/example5.js b/examples/ex5/example5.js
@@ -3,9 +3,7 @@ import { Playlib } from '../../bin/playlib.js';
 
 let canvas = document.getElementById("canvas");
 
-
-console.log(canvas);
-var config = {
+let config = {
     game_name: "Example 5",
     style: "border: 1px solid black; background-color: white;",
     canvas: canvas,
@@ -14,7 +12,7 @@ var config = {
 
 class MainScene extends Playlib.Scene
 {
-    spirit = new Playlib.Sprite("../../assets/Black_Square.png", new Playlib.Vector2(120, 120), ScreenSize);
+    spirit = new Playlib.Sprite("../../assets/Black_Square.png", new Playlib.Vec2(120, 120), ScreenSize);
 
     constructor(canvas, ClearScreen) {
         super(canvas, ClearScreen);
@@ -51,7 +49,7 @@ class MainScene extends Playlib.Scene
 
         else if (Playlib.Input.KeyPressed(Playlib.Keys.Up)) 
         {
-            spirit.position.y -= 0.9;
+            this.spirit.position.y -= 0.9;
         }    
     }
 
@@ -61,7 +59,7 @@ class MainScene extends Playlib.Scene
 
 let game = new Playlib.Game(config, [new MainScene()]);
 
-var ScreenSize = new Playlib.Vector2(game.width, game.height);
+var ScreenSize = new Playlib.Vec2(game.width, game.height);
 
 
 game.run();

diff --git a/examples/ex6/example6.html b/examples/ex6/example6.html
@@ -12,5 +12,11 @@
     <script type="module" src="example6.js"></script>
 
     <p style="font-size: 15px; font-family: Arial;"> Back to <a style="font-size: 15px;" href="/">home &#8962;</a></p>
+
+    <script type="module">
+        import { example } from '../examples.js';
+
+        example("6");
+    </script>
 </body>
 </html>