Some work

2018-08-20 17:22:33 +02:00 · 2018-08-20 17:22:33 +02:00 · 61ca6e1817
parent 445d143c13
commit 61ca6e1817
10 changed files with 112 additions and 22 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+www/js/escalator.js
--- a/10
+++ b/10
@ -0,0 +1,10 @@
+.PHONY: www/js/escalator.js
+
+www/js/escalator.js: $(shell find src -name "*.js")
+	cat \
+		src/open.js \
+		src/box.js \
+		src/main.js \
+		src/close.js \
+		> www/js/escalator.js
+
--- a/js/main.js
+++ b/js/main.js
@ -1,13 +0,0 @@
-"use strict";
-let canvas = document.getElementById('canvas');
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
-
-console.log(canvas.width, canvas.height);
-
-let context = canvas.getContext("2d");
-context.fillStyle = "rgb(0.0, 0.0, 0.0)";
-context.rect(canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);
-context.stroke();
-
-console.log(canvas);
--- a/src/box.js
+++ b/src/box.js
@ -0,0 +1,48 @@
+const MAX_SPEED = 20;
+const MAX_JUMP = 2;
+const G = 500;
+
+class Box {
+    constructor() {
+        this.position = 0;
+        this.speed = 0;
+        this.size = 100;
+        this.jumpCounter = MAX_JUMP;
+    }
+
+    drawOn(canvas) {
+        let ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = 'rgb(0, 0, 0)';
+        ctx.beginPath();
+        ctx.rect(
+            canvas.width / 2.0 - this.size / 2.0,
+            canvas.height - this.size - this.position,
+            this.size,
+            this.size
+        );
+
+        ctx.fill();
+
+    }
+
+    update(time = 0.002) {
+        this.speed -= G * time;
+        this.speed = Math.max(this.speed, -MAX_SPEED);
+        this.position += this.speed;
+
+        if (this.position <= 0) {
+            this.position = 0;
+            this.speed = 0;
+            this.jumpCounter = MAX_JUMP;
+        }
+
+    }
+
+    jump() {
+        if (this.jumpCounter > 0) {
+            this.jumpCounter--;
+            this.speed = MAX_SPEED;
+        }
+    }
+}
--- a/src/close.js
+++ b/src/close.js
@ -0,0 +1 @@
+})();
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,40 @@
+let canvas, ctx, box;
+
+init();
+render();
+
+function init() {
+    // Initialize canvas
+    canvas = document.getElementById('canvas');
+    document.body.style.margin = '0px';
+    onWindowResize();
+    ctx = canvas.getContext('2d');
+
+    // Initialize listeners
+    window.addEventListener('resize', onWindowResize);
+    document.addEventListener('touchstart', () => box.jump());
+
+    // Initialize game
+    box = new Box();
+}
+
+function render() {
+    // Manage physics
+    box.update();
+
+    // Do rendering
+    // canvas.width = canvas.width
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.fillStyle = 'rgb(255, 0, 0)';
+    ctx.rect(0, 0, canvas.width, canvas.height);
+    ctx.fill();
+
+    box.drawOn(canvas);
+    requestAnimationFrame(render);
+}
+
+function onWindowResize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
--- a/src/object.js
+++ b/src/object.js
@ -0,0 +1,3 @@
+class Object {
+
+}
--- a/src/open.js
+++ b/src/open.js
@ -0,0 +1,2 @@
+"use strict";
+(function() {
--- a/watch.sh
+++ b/watch.sh
@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+inotifywait -r -q -e close_write src/ -m | while read line; do
+    make www/js/escalator.js
+done
--- a/www/index.html
+++ b/www/index.html
@ -4,19 +4,13 @@
        <title>Escalator</title>
        <meta charset="utf-8" />
        <style>
-            * {
-                margin: 0px;
-                padding: 0px;
-            }
-
-            body {
-                overflow: hidden;
-            }
+            * { padding: 0; margin: 0; }
+            canvas { display: block; margin: 0 auto; }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
-        <script src="js/main.js"></script>
+        <script src="js/escalator.js"></script>
    </body>
 </html>