Update games, add scores

author: Mark Powers <markppowers0@gmail.com> 2020-04-12 14:42:03 -0500
committer: Mark Powers <markppowers0@gmail.com> 2020-04-12 14:42:03 -0500
commit: 7e6648902b262484bc0aac824c3784b1ae4b8591 (patch)
tree: bc56275222a58228fd714af0dad58c660f004ab7
parent: 1bffb064e2414ced5b1924a4f9fbd822a09c718e (diff)
14 files changed, 624 insertions, 140 deletions
diff --git a/src/highscores.js b/src/highscores.js
new file mode 100644
index 0000000..e735eee
--- /dev/null
+++ b/src/highscores.js
@@ -0,0 +1,10 @@
+function submitScore(game, score, username){
+    if(username == undefined){
+        username = prompt("Enter a name to submit score", "");
+    }
+    if (!(username  == null || username == "")) {
+        const request = new Request(`/setScore?game=${game}&username=${username}&score=${score}`);
+        fetch(request);
+    } 
+    return username
+}
+\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 21b2dd2..17b9655 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,17 +10,23 @@
 
 <body>
     <div>
-        Arcade
+        <a href="/highscores">High score list</a>
+    </div>
+    
+    <div>
+        <h1>Games</h1>
+        <h2>Arcade</h2>
         <ul>
             <li><a href="/pinball">Pinball (demo)</a></li>
             <li><a href="/snake">Snake</a></li>
             <li><a href="/stacker">Stacker</a></li>
-            <li><a href="/math">Math mini agmes</a></li>
+            <li><a href="/math">Math mini games</a></li>
+            <li><a href="/pp/index.html">Picture pieces</a></li>
             <li><a href="https://seafarerscafe.itch.io/cosmic-cargo">Cosmic Cargo (itch.io)</a></li>
         </ul>
     </div>
     <div>
-        Multiplayer
+        <h2>Multiplayer</h2>
         <ul>
             <li><a href="/ur">Royal Game of Ur</a></li>
             <li><a href="/quadrowple">Quadrowple</a></li>
diff --git a/src/index.js b/src/index.js
index 647bf3e..176d432 100644
--- a/src/index.js
+++ b/src/index.js
@@ -46,6 +46,20 @@ async function sync(alter, force, callback) {
 
 function setUpModels() {
   const models = {
+    "scores": database.define('score', {
+      username: {
+        type: Sequelize.STRING,
+        allowNull: false,
+      },
+      score: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+      },
+      game: {
+        type: Sequelize.STRING,
+        allowNull: false,
+      }
+    })
   }
   return models;
 }
@@ -60,5 +74,6 @@ server.load("./snake/server", models, jwtFunctions, database)
 server.load("./stacker/server", models, jwtFunctions, database)
 server.load("./pinball/server", models, jwtFunctions, database)
 server.load("./math/server", models, jwtFunctions, database)
+server.load("./pp/server", models, jwtFunctions, database)
 server.listen(config.port);
 
diff --git a/src/pinball/server.js b/src/pinball/server.js
index 2bf88d5..ae215b2 100644
--- a/src/pinball/server.js
+++ b/src/pinball/server.js
@@ -1,6 +1,3 @@
-const path = require('path');
-const fs = require('fs');
-
 function setUpRoutes(server, models, jwtFunctions, database) {
     server.get('/pinball', (req, res) => res.sendFile(__dirname + "/index.html"))
     server.get('/pinball/styles.css', (req, res) => res.sendFile(__dirname + "/static/styles.css"))
diff --git a/src/pp/server.js b/src/pp/server.js
new file mode 100644
index 0000000..c1a5370
--- /dev/null
+++ b/src/pp/server.js
@@ -0,0 +1,10 @@
+const express = require('express');
+
+function setUpRoutes(server, models, jwtFunctions, database) {
+    // server.get('/pp', (req, res) => res.sendFile(__dirname + "/static/index.html"))
+    server.use('/pp', express.static(__dirname + "/static"))
+}
+
+module.exports = {
+    setUpRoutes
+};
diff --git a/src/pp/static/index.html b/src/pp/static/index.html
new file mode 100644
index 0000000..a245b6b
--- /dev/null
+++ b/src/pp/static/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+	<title>Picture Pieces</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<style>
+		canvas {
+			/* transform-origin: top left; */
+			/* transform: scale(4, 4); */
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+	</style>
+</head>
+
+<body style="padding:0; margin:0; overflow:hidden;">
+	<canvas id="canvas"></canvas>
+	<script src="/pp/templates.js"></script>
+	<script src="/pp/main.js"></script>
+	<div style="display: none">
+		<img src="/pp/tiles/0.png" id="img0">
+		<img src="/pp/tiles/1.png" id="img1">
+		<img src="/pp/tiles/2.png" id="img2">
+		<img src="/pp/tiles/3.png" id="img3">
+		<img src="/pp/tiles/4.png" id="img4">
+		<img src="/pp/tiles/5.png" id="img5">
+		<img src="/pp/tiles/6.png" id="img6">
+		<img src="/pp/tiles/7.png" id="img7">
+	</div>
+</body>
+
+</html>
diff --git a/src/pp/static/main.js b/src/pp/static/main.js
new file mode 100644
index 0000000..79d6414
--- /dev/null
+++ b/src/pp/static/main.js
@@ -0,0 +1,269 @@
+// The callbacks to be called each frame on update, 
+// and on draw
+// The interval object
+var gameInterval, selectedX, selectedY, timeElapsed, timeStart, frame;
+let width = 800;
+let height = 600;
+let fps = 30;
+let gameOver = false
+
+let mouseX, mouseY;
+
+let IMG_WIDTH = 33
+let IMG_HEIGHT = 39
+let TILE_WIDTH = 2 + IMG_WIDTH
+let TILE_HEIGHT = 2 + IMG_HEIGHT
+
+// leave first two blank
+var board
+
+window.onload = function () {
+    canvas = document.getElementById("canvas");
+    ctx = canvas.getContext("2d");
+    canvas.width = width;
+    canvas.height = height;
+    document.addEventListener("mousedown", mouseDownCallback);
+    document.addEventListener("mouseup", mouseUpCallback);
+    document.addEventListener("mousemove", function(e){
+        mouseX = e.x
+        mouseY = e.y
+    });
+    init();
+}
+
+function game() {
+    frame++
+    updateCallback();
+    drawCallback();
+}
+
+function init() {
+    gameInterval = setInterval(game, 1000 / fps);
+    timeStart = Math.floor(new Date().getTime() / 1000)
+    timeElapsed = 0
+    frame = 0
+    loadTemplate()
+}
+
+function shuffle(a) {
+    var j, x, i;
+    for (i = a.length - 1; i > 0; i--) {
+        j = Math.floor(Math.random() * (i + 1));
+        x = a[i];
+        a[i] = a[j];
+        a[j] = x;
+    }
+    return a;
+}
+
+function swapTiles(){
+    count = 0
+    template = []
+    for (var x = 0; x < board.length; x++) {
+        template.push([])
+        for (var y = 0; y < board[x].length; y++) {
+            template[x].push(undefined)
+            template[x][y] = board[x][y]
+            if(board[x][y] != undefined){
+                count++
+            }
+        }
+    }
+    for (var i = 0; i < count/2; i++) {
+        items.push(i)
+        items.push(i)
+    }
+    shuffle(items)
+    board = []
+    for (var x = 0; x < template.length; x++) {
+        board.push([])
+        for (var y = 0; y < template[x].length; y++) {
+            board[x].push(undefined)
+            if (template[x][y] != undefined) {
+                board[x][y] = items.pop()
+            }
+        }
+    }
+}
+
+function loadTemplate() {
+    template = dragon
+    items = []
+    for (var i = 0; i < 8; i++) {
+        items.push(i)
+        items.push(i)
+    }
+    shuffle(items)
+    board = []
+    for (var x = 0; x < template.length; x++) {
+        board.push([])
+        for (var y = 0; y < template[x].length; y++) {
+            board[x].push(undefined)
+            if (template[x][y]) {
+                board[x][y] = items.pop()
+            }
+        }
+    }
+}
+
+var updateCallback = function () {
+    timeElapsed = Math.floor(new Date().getTime() / 1000) - timeStart
+
+    var done = true
+    for (var x = 0; x < board.length; x++) {
+        for (var y = 0; y < board[x].length; y++) {
+            if (board[x][y] != undefined) {
+                done = false
+            }
+        }
+    }
+    if (done) {
+        clearInterval(gameInterval)
+        gameOver = true
+    }
+}
+
+var drawCallback = function () {
+    font(48);
+    ctx.fillStyle = "#99b3ff";
+    ctx.fillRect(0, 0, width, height);
+    ctx.fillStyle = "#b30000"
+    ctx.fillRect(0, 0, 800, 50)
+    ctx.fillRect(600, 0, 200, 600)
+    ctx.lineWidth = 2
+    ctx.strokeStyle = "#ffcc00"
+    ctx.fillStyle = "#ffcc00"
+    ctx.strokeRect(1, 50, 600, 549)
+    font(50)
+    ctx.fillText("Picture Pieces", 100, 36)
+
+    if(gameOver){
+        ctx.fillStyle = "#000080"
+        font(50)
+        ctx.fillText("Congratuations", 100, 200)
+        font(24)
+        var minutes = Math.floor(timeElapsed / 60)
+        var seconds = timeElapsed % 60
+        ctx.fillText("Your final time was " + minutes + ":" + seconds, 110, 240)
+        return
+    }
+
+    
+    for (var x = board.length-1; x >= 0; x--) {
+        for (var y = 0; y < board[x].length; y++) {
+            if (board[x][y] == undefined) {
+                continue
+            }
+            ctx.fillStyle = "#ffe6e6"
+            ctx.beginPath()
+            ctx.moveTo(x * TILE_WIDTH, y * TILE_HEIGHT)
+            ctx.lineTo(x * TILE_WIDTH-6, y * TILE_HEIGHT+6)
+            ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+            ctx.lineTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+            ctx.closePath()
+            ctx.fill();
+
+            ctx.fillStyle = '#ff9999'
+            ctx.beginPath()
+            ctx.moveTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+            ctx.lineTo((x+1) * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+            ctx.lineTo((x+1) * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+            ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+            ctx.closePath()
+            ctx.fill();
+
+            ctx.lineWidth
+            ctx.strokeStyle = "#ffcc00"
+            ctx.beginPath()
+            ctx.moveTo(x * TILE_WIDTH, y * TILE_HEIGHT)
+            ctx.lineTo(x * TILE_WIDTH-6, y * TILE_HEIGHT+6)
+            ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+            ctx.lineTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+            ctx.closePath()
+            ctx.stroke();
+            ctx.beginPath()
+            ctx.moveTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+            ctx.lineTo((x+1) * TILE_WIDTH, (y+1) * TILE_HEIGHT)
+            ctx.lineTo((x+1) * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+            ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6)
+            ctx.closePath()
+            ctx.stroke();
+
+            // ctx.strokeRect(x * TILE_WIDTH, y * TILE_HEIGHT, TILE_WIDTH, TILE_HEIGHT)
+        }
+    }
+
+    ctx.strokeStyle = "#ffcc00"
+    for (var x = 0; x < board.length; x++) {
+        for (var y = 0; y < board[x].length; y++) {
+            if (board[x][y] == undefined) {
+                continue
+            }
+            ctx.strokeRect(x * TILE_WIDTH, y * TILE_HEIGHT, TILE_WIDTH, TILE_HEIGHT)
+            ctx.drawImage(document.getElementById("img" + board[x][y]), 1 + x * TILE_WIDTH, 1 + y * TILE_HEIGHT)
+        }
+    }
+
+
+    ctx.strokeStyle = "#ffcc00"
+    ctx.fillStyle = "#ffcc00"
+    font(24)
+    ctx.fillText("Time: " + timeElapsed, 600, 36)
+    ctx.fillText("Shuffle", 650, 130)
+
+    if(650 - 10 < mouseX && mouseX < 700+10 && 150-10 < mouseY && mouseY < 150+10){
+        ctx.fillStyle = "#ffee22"
+    } else {
+        ctx.fillStyle = "#ffcc00"
+    }
+    ctx.beginPath();
+    ctx.moveTo(700, 150+10)
+    ctx.arc(650, 150, 10, Math.PI/2, 3*Math.PI/2)
+    ctx.lineTo(700, 150-10)
+    ctx.arc(700, 150, 10, 3*Math.PI/2, Math.PI/2)
+    ctx.fill(); 
+    // ctx.fillRect(625, 125, 150, 20)
+
+    ctx.strokeStyle = "red"
+    if (selectedX != undefined && selectedY != undefined && board[selectedX][selectedY] != undefined) {
+        ctx.beginPath();
+        let rad = TILE_WIDTH / 2 + Math.cos(frame / 7) * 2
+        ctx.arc(selectedX * TILE_WIDTH + TILE_WIDTH / 2, selectedY * TILE_HEIGHT + TILE_HEIGHT / 2, rad, 0, 2 * Math.PI)
+        ctx.stroke()
+    }
+}
+
+var mouseDownCallback = function (e) {
+    if(650 - 10 < mouseX && mouseX < 700+10 && 150-10 < mouseY && mouseY < 150+10){
+        swapTiles(board)
+        return
+    }
+
+    var tileX = Math.floor(e.x / TILE_WIDTH)
+    var tileY = Math.floor(e.y / TILE_HEIGHT)
+    if (board[tileX] != undefined && board[tileX][tileY] != undefined) {
+        if (selectedX != undefined &&
+            selectedY != undefined) {
+            if (board[selectedX][selectedY] != undefined &&
+                (tileX != selectedX || tileY != selectedY) &&
+                (board[tileX + 1][tileY] == undefined || board[tileX - 1][tileY] == undefined)) {
+                if (board[selectedX][selectedY] == board[tileX][tileY]) {
+                    board[selectedX][selectedY] = undefined
+                    board[tileX][tileY] = undefined
+                }
+            }
+        }
+        if (board[tileX + 1][tileY] == undefined || board[tileX - 1][tileY] == undefined) {
+            selectedX = tileX
+            selectedY = tileY
+        }
+    }
+}
+
+var mouseUpCallback = function (e) {
+
+}
+
+function font(size) {
+    ctx.font = size + "px Courier";
+}
diff --git a/src/pp/static/templates.js b/src/pp/static/templates.js
new file mode 100644
index 0000000..8e4c032
--- /dev/null
+++ b/src/pp/static/templates.js
@@ -0,0 +1,18 @@
+dragon = [
+    [],
+    [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, true     , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, true     , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, true     , undefined, undefined, true     , undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, true     , undefined, true     , true     , undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, true     , true     , true     , true     , true     , undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, true     , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, true     , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, true     , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, true     , undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+    [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
+]
+\ No newline at end of file
diff --git a/src/pp/tiles.png b/src/pp/tiles.png
new file mode 100644
index 0000000..e381837
--- /dev/null
+++ b/src/pp/tiles.png
diff --git a/src/quadrowple/server.js b/src/quadrowple/server.js
index b44c055..3474c6b 100644
--- a/src/quadrowple/server.js
+++ b/src/quadrowple/server.js
@@ -1,5 +1,4 @@
-const path = require('path');
-const fs = require('fs');
+const uuidv4 = require('uuid/v4');
 
 function setUpRoutes(server, models, jwtFunctions, database) {
 
diff --git a/src/scores.html b/src/scores.html
new file mode 100644
index 0000000..f3b1050
--- /dev/null
+++ b/src/scores.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>High Scores</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- <link rel="stylesheet" type="text/css" href="/css/styles.css"> -->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+</head>
+
+<body>
+    <script>
+        window.onload = function () {
+            var transactionData = new Vue({
+                el: '#main',
+                data: {
+                    scores: [],
+                },
+                created() {
+                    fetch(new Request(`/scores`)).then(response => response.json())
+                        .then(response => this.scores = response);
+
+                },
+            });
+        }
+    </script>
+    <div id="main">
+        <h1>High Scores</h1>
+        <div v-for="game in Object.keys(scores)">
+            <h2>{{game}}</h2>
+            <table class="table">
+                <tr>
+                    <th>Rank</th>
+                    <th>Score</th>
+                    <th>Username</th>
+                    <th>Date</th>
+                </tr>
+                <tr v-for="(item, i) in scores[game]">
+                    <td>{{i+1}}</td>
+                    <td>{{item.score}}</td>
+                    <td>{{item.username}}</td>
+                    <td>{{item.createdAt.substring(0, 16).replace("T", " ")}}</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/src/server.js b/src/server.js
index ba5cff9..0fe5b29 100644
--- a/src/server.js
+++ b/src/server.js
@@ -1,24 +1,18 @@
 const express = require('express');
 const bodyParser = require('body-parser');
 const cookieParser = require('cookie-parser');
-//const request = require('request');
-const crypto = require('crypto');
-const uuidv4 = require('uuid/v4');
 
-const path = require('path');
-const fs = require('fs');
-const config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json')));
+const Op = require('sequelize').Op;
 
 const server = express();
 server.use(cookieParser())
 server.use(bodyParser.json());
-//server.use(bodyParser.urlencoded({ extended: true }));
 
 function listen(port) {
     server.listen(port, () => console.info(`Listening on port ${port}!`));
 }
 
-function load(gamePath, models, jwtFunctions, database){
+function load(gamePath, models, jwtFunctions, database) {
     const game = require(gamePath);
     game.setUpRoutes(server, models, jwtFunctions, database);
 }
@@ -30,6 +24,28 @@ function setUpRoutes(models, jwtFunctions, database) {
     })
 
     server.get('/', (req, res) => res.sendFile(__dirname + "/index.html"))
+    server.get('/setScore', (req, res, next) => {
+        let game = req.query.game
+        let username = req.query.username
+        let score = req.query.score
+        console.log(game, username, score)
+        models.scores.create({ 
+            game: req.query.game, 
+            username: req.query.username, 
+            score: req.query.score 
+        })
+        res.status(200)
+    })
+    server.get('/scores', async (req, res, next) => {
+        var games = await database.query(`SELECT DISTINCT game FROM scores`, { type: database.QueryTypes.SELECT });
+        var scoresByGames = {}
+        for(var i = 0; i < games.length; i++){
+            scoresByGames[games[i].game] = await models.scores.findAll({ atttributes: ["username", "score", "createdAt"], where : {game: {[Op.eq]: games[i].game}}, order: [['score', 'DESC']], limit: 15}).map(x => x.get({ plain: true }))
+        };
+        res.status(200).send(scoresByGames);
+    })
+    server.get('/highscore.js', (req, res) => res.sendFile(__dirname + "/highscores.js"))
+    server.get('/highscores', (req, res) => res.sendFile(__dirname + "/scores.html"))
 }
 
 module.exports = {
diff --git a/src/snake/index.html b/src/snake/index.html
index eb11f86..ea982cf 100644
--- a/src/snake/index.html
+++ b/src/snake/index.html
@@ -1,83 +1,144 @@
-<center>
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Snake</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- <link rel="stylesheet" type="text/css" href="/css/styles.css"> -->
+</head>
+
+<body style="padding:0; margin:0; overflow:hidden;">
     <canvas width="400" height="400" id="canvas"></canvas>
-</center>
-<script>
-    window.onload = function(){
-        canvas = document.getElementById("canvas");
-        ctx = canvas.getContext("2d");
-//        canvas.height = 300;
-//        canvas.width = 400;    
-        document.addEventListener("keydown",keyPush);
-        setInterval(game, 1000/10);
-    }
-    var tileCountWidth = 40;
-    var tileCountHeight = 40;
-    var tileWidth = canvas.width/tileCountWidth;
-    var tileHeight = canvas.height/tileCountHeight;
-    var snake = [];
-    var x = randomInt(tileWidth);
-    var y = randomInt(tileHeight);
-    var vx = 1;
-    var vy = 0;
-    var apple = {}; 
-    console.log(apple);
-    setRandomCoords(apple);
-    console.log(apple);
-    var length = 5;
-    function game(){
-        color("black"); 
-        ctx.fillRect(0,0,canvas.width, canvas.height);
-        color("white"); 
-        for(var i = 0; i < snake.length; i++){
-            ctx.fillRect(snake[i].x*tileWidth, snake[i].y*tileHeight, tileWidth, tileHeight);
+    <script src="/highscore.js"></script>
+    <script>
+        var tileCountWidth = 40;
+        var tileCountHeight = 40;
+        var tileWidth = canvas.width / tileCountWidth;
+        var tileHeight = canvas.height / tileCountHeight;
+        var x, y;
+        var vx, vy;
+        var snake, apple;
+        var isGameOver;
+        var length, gameInterval, score;
+        var username = undefined
+        var inputThisFrame = false
+        window.onload = function () {
+            canvas = document.getElementById("canvas");
+            ctx = canvas.getContext("2d");
+            document.addEventListener("keydown", keyPush);
+            init();
         }
-        color("red");
-        ctx.fillRect(apple.x*tileWidth, apple.y*tileHeight, tileWidth, tileHeight);
-
-        x+=vx;
-        y+=vy;
-        snake.push({"x": x, "y": y});
-        if(x==apple.x && y==apple.y){
-            length++;
+        function init() {
+            snake = [];
+            x = randomInt(10);
+            y = randomInt(40);
+            vx = 1;
+            vy = 0;
+            apple = {};
+            isGameOver = false;
             setRandomCoords(apple);
+            length = 5;
+            score = 0
+            if(gameInterval != undefined){
+                clearInterval(gameInterval)
+            }
+            gameInterval = setInterval(game, 1000 / 10);
         }
+        function game() {
+            inputThisFrame = false
+            // DRAW
+            color("black");
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            color("white");
+            for (var i = 0; i < snake.length; i++) {
+                ctx.fillRect(snake[i].x * tileWidth, snake[i].y * tileHeight, tileWidth, tileHeight);
+            }
+            color("red");
+            ctx.fillRect(apple.x * tileWidth, apple.y * tileHeight, tileWidth, tileHeight);
+            if (isGameOver) {
+                color("blue");
+                font(32);
+                ctx.fillText("Game over!", 160, 200);
+                font(24);
+                ctx.fillText("(press any key)", 160, 240)
+                return // don't update
+            }
+
+            // UPDATE
+            x += vx;
+            y += vy;
+            for (var i = 0; i < snake.length; i++) {
+                if(snake[i].x == x && snake[i].y == y){
+                    gameOver()
+                }
+            }
+            snake.push({ "x": x, "y": y });
+            if (x < 0 || y < 0 || x >= 40 || y >= 40) {
+                gameOver();
+            } else if (x == apple.x && y == apple.y) {
+                score++;
+                length++;
+                setRandomCoords(apple);
+            }
+
+            while (snake.length > length) {
+                snake.shift();
+            }
 
-        while(snake.length > length){
-            snake.shift();
         }
+        function keyPush(e) {
+            if (isGameOver) {
+                init()
+                return
+            }
+            if (inputThisFrame) {
+                return
+            }
 
-    }
-    function keyPush(e){
-        switch(e.keyCode){
-            case 37:
-                vx = -1;
-                vy = 0;
-                break;
-            case 38:
-                vx = 0;
-                vy = -1;
-                break;
-            case 39:
-                vx = 1;
-                vy = 0;
-                break;
-            case 40:
-                vx = 0;
-                vy = 1;
-                break;
+            switch (e.keyCode) {
+                case 37:
+                    if (vx == 1) return
+                    vx = -1;
+                    vy = 0;
+                    break;
+                case 38:
+                    if (vy == 1) return
+                    vx = 0;
+                    vy = -1;
+                    break;
+                case 39:
+                    if (vx == -1) return
+                    vx = 1;
+                    vy = 0;
+                    break;
+                case 40:
+                    if (vy == -1) return
+                    vx = 0;
+                    vy = 1;
+                    break;
+            }
+            inputThisFrame = true
+        }
+        function gameOver() {
+            isGameOver = true;
+            // clearInterval(gameInterval);
+            username = submitScore("snake", score, username);
         }
-    }
-    function setRandomCoords(item){
-        item.x = randomInt(tileWidth);
-        item.y = randomInt(tileHeight);
-    }
-    function randomInt(max){
-        return Math.floor(Math.random()*max);
-    }
-    function font(size){
-        ctx.font=size+"px Courier";
-    }
-    function color(c){
-        ctx.fillStyle=c;
-    }
-</script>
+        function setRandomCoords(item) {
+            item.x = randomInt(40);
+            item.y = randomInt(40);
+        }
+        function randomInt(max) {
+            return Math.floor(Math.random() * max);
+        }
+        function font(size) {
+            ctx.font = size + "px Courier";
+        }
+        function color(c) {
+            ctx.fillStyle = c;
+        }
+    </script>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/src/stacker/index.html b/src/stacker/index.html
index eb256a6..1a76e2b 100644
--- a/src/stacker/index.html
+++ b/src/stacker/index.html
@@ -10,15 +10,17 @@
 
 <body style="padding:0; margin:0; overflow:hidden;">
     <canvas id="canvas"></canvas>
+    <script src="/highscore.js"></script>
     <script>
         var gameInterval, canvas, ctx;
         var score, t, isGameOver, mouseX, mouseY, scaleX, scaleY, selected, stack, next, v, perfect;
-        let VELOCITY = 15;
+        var username = undefined;
+        let VELOCITY = 3;
 
         function init() {
-            next = {left: 0, width:200};
+            next = { left: 0, width: 200 };
             v = VELOCITY;
-            stack = [{left: 100, width:200}];
+            stack = [{ left: 100, width: 200 }];
 
             score = 0;
             isGameOver = false;
@@ -27,7 +29,7 @@
             t = 0;
             selected = -1;
             perfect = 0;
-            gameInterval = setInterval(game, 1000 / 10);
+            gameInterval = setInterval(game, 1000 / 60);
         }
 
         window.onload = function () {
@@ -47,10 +49,10 @@
         function resizeCanvas() {
             canvas.width = window.innerWidth;
             canvas.height = window.innerHeight;
-            scaleX = window.innerWidth/400; 
-            scaleY = window.innerHeight/600;
+            scaleX = window.innerWidth / 400;
+            scaleY = window.innerHeight / 600;
 
-            if(scaleX/scaleY > 1.3){
+            if (scaleX / scaleY > 1.3) {
                 scaleX = scaleY = 1;
             }
             ctx.scale(scaleX, scaleY);
@@ -61,41 +63,41 @@
         }
         function draw() {
             color("white");
-            ctx.fillRect(0, 0, canvas.width,canvas.height);
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
             color("black");
-            ctx.fillRect(0, 0, 400,400);
-            
+            ctx.fillRect(0, 0, 400, 400);
+
             // Draw moving block
-            if(stack.length % 2 == 0){
+            if (stack.length % 2 == 0) {
                 color("white");
             } else {
                 color("red")
             }
             var y;
-            if(stack.length < 10){
-                y = 380-stack.length*20;
+            if (stack.length < 10) {
+                y = 380 - stack.length * 20;
             } else {
-                y = 380-10*20;
+                y = 380 - 10 * 20;
             }
             ctx.fillRect(next.left, y, next.width, 20)
 
 
             // Draw stack
-            var index = max(stack.length-10, 0);
+            var index = max(stack.length - 10, 0);
             stack.slice(-10).forEach((element, i) => {
-                if(index % 2 == 0){
+                if (index % 2 == 0) {
                     color("white");
                 } else {
                     color("red")
                 }
-                
-                let y = 380-i*20
+
+                let y = 380 - i * 20
                 ctx.fillRect(element.left, y, element.width, 20)
                 index++;
             });
-            
+
             // Draw "perfect" marker
-            if(perfect > 0 ){
+            if (perfect > 0) {
                 font(20);
                 color("red");
                 let last = stack[stack.length - 1]
@@ -110,12 +112,12 @@
 
             // Draw touch controls
             color("#ff9900");
-            if(selected) {
+            if (selected) {
                 color("#cc9900")
             }
             ctx.beginPath();
             ctx.moveTo(200, 500);
-            ctx.arc(200, 500, 100, 0, 2*Math.PI);
+            ctx.arc(200, 500, 100, 0, 2 * Math.PI);
             ctx.fill();
             selected = 0;
 
@@ -124,17 +126,18 @@
                 font(32);
                 ctx.fillText("Game over!", 160, 200);
                 font(24);
+                ctx.fillText("(press any key)", 160, 240)
             }
         }
 
         function update() {
             t++;
             next.left += v;
-            if(next.left + next.width >= 400) {
+            if (next.left + next.width >= 400) {
                 let diff = next.left + next.width - 400;
                 next.left -= diff;
                 v = -1 * VELOCITY;
-            } else if(next.left <= 0) {
+            } else if (next.left <= 0) {
                 let diff = 0 - next.left;
                 next.left += diff;
                 v = VELOCITY;
@@ -150,44 +153,44 @@
             return a < b ? a : b;
         }
         function keyPush(e) {
-            if(isGameOver){
+            if (isGameOver) {
                 init();
                 return;
             }
-            if(e.keyCode == 32){
-                let last = stack[stack.length -1];
+            if (e.keyCode == 32) {
+                let last = stack[stack.length - 1];
                 var left = max(next.left, last.left);
-                let right = min(next.left + next.width, last.left+last.width);
-                var width = right-left;
+                let right = min(next.left + next.width, last.left + last.width);
+                var width = right - left;
 
-                if(stack[stack.length -1 ].width - width < 10){
-                    width = stack[stack.length -1 ].width
-                    left = stack[stack.length -1 ].left
-                    perfect = 5;
+                if (stack[stack.length - 1].width - width < 6) {
+                    width = stack[stack.length - 1].width
+                    left = stack[stack.length - 1].left
+                    perfect = 15;
                 }
 
-                if(width > 0){
-                    stack.push({left: left, width: width})
+                if (width > 0) {
+                    stack.push({ left: left, width: width })
                     score += 1;
                 }
-                
-                if(v < 0) {
-                    next = {left: 0, width: width}
+
+                if (v < 0) {
+                    next = { left: 0, width: width }
                     v = VELOCITY
                 } else {
-                    next = {left: 400-width, width: width}
+                    next = { left: 400 - width, width: width }
                     v = -1 * VELOCITY
                 }
             }
         }
         function mousePush(e) {
-            mouseX = e.clientX/scaleX - 200;
-            mouseY = e.clientY/scaleY - 500;
+            mouseX = e.clientX / scaleX - 200;
+            mouseY = e.clientY / scaleY - 500;
             if (Math.sqrt(mouseX * mouseX + mouseY * mouseY) > 100) {
                 return;
             }
             selected = 1;
-            keyPush({keyCode:  32})
+            keyPush({ keyCode: 32 })
         }
         function randomInt(max) {
             return Math.floor(Math.random() * max);
@@ -201,13 +204,7 @@
         function gameOver() {
             isGameOver = true;
             clearInterval(gameInterval);
-            
-            const urlParams = new URLSearchParams(window.location.search);
-            const uid = urlParams.get('uid');
-            const mid = urlParams.get('mid');
-
-            const request = new Request(`/setScore?uid=${uid}&mid=${mid}&score=${score}`);
-            fetch(request).then(response => console.log("response"));
+            username = submitScore("stacker", score, username);
         }
     </script>
 </body>
author	Mark Powers <markppowers0@gmail.com>	2020-04-12 14:42:03 -0500
committer	Mark Powers <markppowers0@gmail.com>	2020-04-12 14:42:03 -0500
commit	7e6648902b262484bc0aac824c3784b1ae4b8591 (patch)
tree	bc56275222a58228fd714af0dad58c660f004ab7
parent	1bffb064e2414ced5b1924a4f9fbd822a09c718e (diff)