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 /src/snake
parent: 1bffb064e2414ced5b1924a4f9fbd822a09c718e (diff)
1 files changed, 136 insertions, 75 deletions
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
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 /src/snake
parent	1bffb064e2414ced5b1924a4f9fbd822a09c718e (diff)