From c7f35ad2ceaf2338dcc18781362f1658634c0dc0 Mon Sep 17 00:00:00 2001
From: jrtechs <jeffery@jrtechs.net>
Date: Fri, 6 Jul 2018 19:53:41 -0400
Subject: [PATCH] Added single player version of game to git repo

---
 front end/singlePlayer.html | 393 ++++++++++++++++++++++++++++++++++++
 1 file changed, 393 insertions(+)
 create mode 100644 front end/singlePlayer.html

diff --git a/front end/singlePlayer.html b/front end/singlePlayer.html
new file mode 100644
index 0000000..6faf3c3
--- /dev/null
+++ b/front end/singlePlayer.html	
@@ -0,0 +1,393 @@
+<script src="/socket.io/socket.io.js"></script>
+
+<script>
+
+
+    window.addEventListener("keydown", function(e)
+    {
+        // space and arrow keys
+        if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1)
+        {
+            e.preventDefault();
+        }
+    }, false);
+
+    window.onload = function()
+    {
+        var canvas = document.getElementById("canvasZP");
+        var c = canvas.getContext('2d');
+        c.fillStyle= "black";
+        c.fillRect(0,0,canvas.width,canvas.height);
+    };
+    function playZP()
+    {
+
+        var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame || function (callback)
+        {
+            window.setTimeout(callback, 1000 / 60)
+        };
+        var canvas = document.getElementById("canvasZP");
+        var width = 700;
+        var height = 700;
+        canvas.style.textAlign = 'center';
+        var context = canvas.getContext('2d');
+        var keysDown = {};
+
+
+        var score = 0;
+        var dead = false;
+        //player
+        var Player = function(x,y)
+        {
+            this.x = x;
+            this.y = y;
+            this.width = 25;
+            this.height = 25;
+
+            this.speed = 3;
+
+            this.facing = 40;
+
+            this.updateDirection = function(key)
+            {
+                facing = key;
+            }
+
+            this.render = function()
+            {
+                context.fillStyle = "rgba(0, 45, 160, 1)"; //green
+                context.fillRect(this.x, this.y, this.width,this.height);
+            }
+
+            this.move = function()
+            {
+                for (var key in keysDown)
+                {
+                    var value = Number(key);
+                    if (value == 37) //left
+                    {
+                        this.x = this.x - this.speed;
+                    }
+                    else if (value == 39) //right
+                    {
+                        this.x = this.x + this.speed
+                    }
+                    else if(value == 38) //up
+                    {
+                        this.y = this.y - this.speed
+                    }
+                    else if(value == 40) //down
+                    {
+                        this.y = this.y + this.speed
+                    }
+                    else if(value == 32)
+                    {
+                        var added = false;
+
+                        for(i = 0; i< bullets.length; i++)
+                        {
+                            if(bullets[i] == -1)
+                            {
+                                bullets[i] = new Bullet();
+                                added = true;
+                                break;
+                            }
+
+                        }
+
+                        if(added == false)
+                        {
+                            bullets.push(new Bullet());
+                        }
+
+
+                    }
+                }
+
+            }
+
+        }
+        var p = new Player(350, 350);
+
+
+        //bullet
+        var Bullet = function()
+        {
+            this.x = p.x;
+            this.y = p.y;
+            this.width = 10;
+            this.height = 10;
+
+            this.speed = 4;
+            this.facing = p.facing;
+
+
+            this.move = function()
+            {
+
+                if (this.facing == 37) //left
+                {
+                    this.x = this.x - this.speed;
+                }
+                else if (this.facing == 39) //right
+                {
+                    this.x = this.x + this.speed
+                }
+                else if(this.facing == 38) //up
+                {
+                    this.y = this.y - this.speed
+                }
+                else if(this.facing == 40) //down
+                {
+                    this.y = this.y + this.speed
+                }
+
+            }
+
+            this.render = function()
+            {
+                context.fillStyle = "rgba(255, 0, 199, 1)"; //green
+                context.fillRect(this.x, this.y, this.width,this.height);
+
+            }
+        }
+        var bullets = [];
+
+
+        function getRandomIntInclusive(min, max) {
+            min = Math.ceil(min);
+            max = Math.floor(max);
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+
+        //zombie
+        var Zombie = function(x,y)
+        {
+            this.x = x;
+            this.y = y;
+            this.width = 25;
+            this.height = 25;
+            this.speed = 3;
+
+            var side = getRandomIntInclusive(0,3);
+            var mid = getRandomIntInclusive(0,700);
+            if(side === 1)
+            {
+                this.x = mid;
+                this.y = 0;
+            }
+            else if(side === 2)
+            {
+                this.x = 700;
+                this.y = mid;
+            }
+            else if(side === 3)
+            {
+                this.y = 700;
+                this.x = mid;
+            }
+            else
+            {
+                this.x = 0;
+                this.y = mid;
+            }
+
+            this.render = function()
+            {
+                context.fillStyle = "rgba(0, 160, 0, 1)"; //green
+                context.fillRect(this.x, this.y, this.width,this.height);
+            }
+
+            this.move = function()
+            {
+                if(this.x  > p.x + this.speed)
+                    this.x -= this.speed;
+                else if(this.x + this.speed < p.x )
+                    this.x += this.speed;
+
+
+                if(this.y > p.y + this.speed)
+                    this.y -= this.speed;
+                else if(this.y + this.speed < p.y )
+                    this.y += this.speed;
+            }
+        }
+        var zombies = [];
+        zombies.push(new Zombie());
+
+
+        var render = function()
+        {
+            context.fillStyle = "#000000";
+            context.fillRect(0, 0, width, height);
+
+
+            context.fillStyle = "rgba(255, 255, 255, 1)";
+            context.font= "20px Georgia";
+            context.fillText("Score: " + score,10,25);
+            for(i = 0; i< zombies.length; i++)
+            {
+                if(zombies[i] != -1)
+                {
+                    zombies[i].render();
+                }
+
+
+            }
+            for(i = 0; i< bullets.length; i++)
+            {
+                if(bullets[i] != -1)
+                {
+                    bullets[i].render();
+                }
+
+            }
+
+            p.render();
+        }
+
+        var update = function()
+        {
+            addZombie();
+            p.move();
+
+            for(i = 0; i< zombies.length; i++)
+            {
+
+                for(z = 0;z < bullets.length; z++)
+                {
+                    if(zombies[i] != -1 && bullets[z] != -1)
+                    {
+                        if(Math.abs(zombies[i].x - bullets[z].x) < 25 &&
+                            Math.abs(zombies[i].y - bullets[z].y) < 25)
+                        {
+                            score++;
+                            zombies[i] = -1;
+                            bullets[z] = -1;
+                        }
+                    }
+                }
+
+                if(zombies[i] != -1)
+                {
+                    zombies[i].move();
+                }
+
+            }
+            for(i = 0; i< bullets.length; i++)
+            {
+                //checks to see if goes out of bounds
+                if(bullets[i].x < 0 || bullets[i].y < 0 || bullets[i].x > 700 || bullets[i].y > 700)
+                {
+                    bullets[i] = -1;
+                }
+
+                if(bullets[i] != -1)
+                {
+
+                    bullets[i].move();
+                }
+
+            }
+
+            for(i=0; i<zombies.length; i++)
+            {
+                if(zombies[i] != -1 && Math.abs(p.x - zombies[i].x) < 25 &&
+                    Math.abs(p.y - zombies[i].y) < 25)
+                {
+                    dead = true;
+                }
+            }
+
+        }
+        var counter2 = 0;
+        var counter = 0;
+        var rate = 180;
+        var addZombie = function()
+        {
+            counter2++;
+            counter++;
+            var added = false;
+            if(counter >= rate)
+            {
+                for(i = 0; i< zombies.length; i++)
+                {
+                    if(zombies[i] == -1)
+                    {
+                        zombies[i] = new Zombie();
+                        added = true;
+                        break;
+                    }
+
+                }
+
+                if(added == false)
+                {
+                    zombies.push(new Zombie());
+                }
+
+                counter = 0;
+            }
+            if(counter2 >= 60)
+            {
+                if(rate > 30)
+                {
+                    rate = rate -5;
+                }
+                counter2 = 0;
+            }
+        }
+
+
+
+        var sent = false;
+
+        var tic = function()
+        {
+            if(dead)
+            {
+                context.fillStyle = "#000000";
+                context.fillRect(0, 0, width, height);
+
+                context.fillStyle = "rgba(255, 255, 255, 1)"; //green
+                context.font= "20px Georgia";
+                context.fillText("You died with a score of " + score,200,340);
+
+            }
+            else
+            {
+                update();
+                render()
+            }
+
+            animate(tic);
+        }
+
+        window.addEventListener("keydown", function (event)
+        {
+            if(event.keyCode >=37 && event.keyCode <=40)
+            {
+                p.facing = event.keyCode;
+            }
+
+            keysDown[event.keyCode] = true;
+        });
+
+        window.addEventListener("keyup", function (event)
+        {
+            delete keysDown[event.keyCode];
+        });
+        animate(tic);
+
+    }
+
+    var socket = io();
+
+
+</script>
+
+
+
+<div><canvas id="canvasZP" width="700" height="700"></canvas></div>
+<div><input type="submit" name="play" value="Play Game" onclick="this.blur();playZP()"/></div>
\ No newline at end of file