Merge pull request #1 from caiofov/published

Published

Author: caiofov

project/favicon/android-chrome-192x192.png

@@ -0,0 +1,19 @@
+{
+    "name": "Jogo com WebGL",
+    "short_name": "Jogo - WebGL",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

project/favicon/android-chrome-512x512.png

@@ -1,24 +1,40 @@
 const GAME = {
     scores: 0,
-    isRunning: true
+    isRunning: false,
+    record: false
 }
 
+const RECORD = Number(localStorage.getItem('record')) ?? 0
 
-/**@type {HTMLParagraphElement} */
-const scoreboard = document.querySelector("#scoreboard")
-/**@type {HTMLParagraphElement} */
-const over = document.querySelector("#game-over")
+/**@type {HTMLParagraphElement[]} */
+const SCOREBOARD = document.querySelector("#live-scoreboard")
+/**@type {HTMLDivElement} */
+const GAME_OVER_MESSAGE = document.querySelector("#game-over-overlay")
 
 /**Atualiza a pontuação */
 function score() {
     GAME.scores += 1
-    scoreboard.innerHTML = GAME.scores
+    if (!GAME.record && GAME.scores > RECORD) {
+        GAME.record = true
+        document.querySelectorAll(".new-record").forEach(r => r.className = r.className.replace('d-none', 'd-flex'))
+    } else if (GAME.record) {
+        document.querySelector("#record").innerHTML = GAME.scores
+    }
+    SCOREBOARD.innerHTML = GAME.scores
 }
 
 /** Exibe mensagem de game over e para de rodar a animação */
 function gameOver() {
-    over.style.display = "block"
     GAME.isRunning = false
+    if (GAME.record) {
+        localStorage.setItem('record', GAME.scores)
+        document.querySelector("#record").innerHTML = GAME.scores
+    }
+
+    document.querySelector("#end-scoreboard").innerHTML = GAME.scores
+
+    document.querySelectorAll(".show-end").forEach(e => e.className = e.className.replace("d-none", "d-flex"))
+
     // var loseContextExtension = gl.getExtension('WEBGL_lose_context');
     // if (loseContextExtension) {
     //     loseContextExtension.loseContext();

project/favicon/apple-touch-icon.png

@@ -51,6 +51,7 @@ function init() {
     loadAllElements().then(() => {
         initGL();
         configScene();
+        GAME.isRunning = true
         draw();
     })
 

project/favicon/favicon-16x16.png

@@ -3,7 +3,7 @@ var gl;
 /** @type {WebGLProgram}*/
 var prog;
 /**@type {HTMLCanvasElement} */
-var canvas = document.getElementById("glcanvas1");
+const CANVAS = document.getElementById("glcanvas1");
 
 /**
  * Retorna o elemento do webgl
@@ -83,7 +83,7 @@ function createShader(gl, shaderType, shaderSrc) {
 }
 
 function initGL() {
-    gl = getGL(canvas);
+    gl = getGL(CANVAS);
 
     //Inicializa shaders
     var vtxShSrc = document.getElementById("vertex-shader").text;