Transferred from GitHub

2024-05-08 13:35:02 -04:00 · 2024-05-08 13:35:02 -04:00 · 84471219ed
commit 84471219ed
5 changed files with 151 additions and 0 deletions
--- a/Readme.MD
+++ b/Readme.MD
@ -0,0 +1,6 @@
+# JSnake-Demo
+Just a simple Javascript Snake game. Horrendis code, I understand. But
+
+## IT'S FREE
+So don't expect a full on Quake game. However, I need to catch up
+on some work and release an iOS game before my deadline is reached.
--- a/_config.yml
+++ b/_config.yml
@ -0,0 +1 @@
+theme: jekyll-theme-slate
--- a/index.html
+++ b/index.html
@ -0,0 +1,11 @@
+<html>
+    <head>
+        <title>JSnake</title>
+        <link rel="Stylesheet" href="./style.css">
+    </head>
+    <body>
+        <canvas width="800" height="600" id="gameCanvas">
+    </body>
+
+    <script src="./script.js"></script>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,128 @@
+// Variables
+var canvas = document.querySelector("#gameCanvas");
+var GFX = canvas.getContext('2d');
+
+let stepSize = 50;
+
+// Player
+var headposition = {
+    0:[400,300],
+    1:[400,300],
+    2:[400,300],
+    3:[400,300]
+};
+var blength = 3;
+
+var direction = [0,0];
+
+// Food
+var foodpos = [400,200];
+
+// Events
+window.addEventListener('load', start);
+window.addEventListener('keydown', rinput);
+
+// Functions
+function start(){
+    window.setInterval(loop, 250);
+
+    // Gameplay
+    direction = [1,0];
+}
+
+function loop(){
+    movement();
+    draw();
+}
+
+function rinput(event){
+    if(event.key == 'g'){
+        grow();
+    }
+
+    if(event.key == 'd'
+    && direction[0] != -1){
+        direction = [1,0];
+    }
+    if(event.key == 's'
+    && direction[1] != -1){
+        direction = [0,1];
+    }
+    if(event.key == 'a'
+    && direction[0] != 1){
+        direction = [-1,0];
+    }
+    if(event.key == 'w'
+    && direction[1] != 1){
+        direction = [0,-1];
+    }
+}
+
+// Game Funcs
+function draw(){
+    // Draw the background
+    GFX.fillStyle = 'black';
+    GFX.fillRect(0,0, 800,600)
+
+    // Drawing the body
+    GFX.fillStyle = 'lime';
+
+    for(var i = 0; i < blength; i++){
+        GFX.fillRect(headposition[i][0], headposition[i][1], 
+            stepSize, stepSize);
+    }
+
+    // Food
+    GFX.fillStyle = 'red';
+    GFX.fillRect(foodpos[0], foodpos[1], stepSize, stepSize);
+}
+
+function movement(){
+    // Moving
+
+    /*
+        Wait, You're actually reading my code?
+        Want it? It's yours. I made it in about,
+        15 minutes? It was not that difficult haha.
+        You can have it!
+
+        GITHUB - https://github.com/Maddox-Werts/JSnake
+    */
+
+    for(var i = blength; i >= 0; i--){
+        if(i != 0){
+            console.log("TRYING TO:", (i-1).toString());
+            headposition[i][0] = headposition[i-1][0];
+            headposition[i][1] = headposition[i-1][1];
+        }
+        else{
+            headposition[i][0] += stepSize * direction[0];
+            headposition[i][1] += stepSize * direction[1];
+
+            // Wrapping
+            if(headposition[i][0] < 0)   {headposition[i][0] = 800;}
+            if(headposition[i][0] > 800) {headposition[i][0] = 0;  }
+
+            if(headposition[i][1] < 0)   {headposition[i][1] = 600;}
+            if(headposition[i][1] > 600) {headposition[i][1] = 0;  }
+        }
+    }
+
+    // Food
+    if(headposition[0][0] == foodpos[0]
+    && headposition[0][1] == foodpos[1]){
+        grow();
+        moveFood();
+    }
+}
+
+function grow(){
+    headposition[blength + 1] = [headposition[blength][0], headposition[blength][1]];
+
+    blength += 1;
+}
+
+function moveFood(){
+    foodpos[0] = parseInt((Math.random() * 800) / stepSize) * stepSize;
+    foodpos[1] = parseInt((Math.random() * 600) / stepSize) * stepSize;
+}
--- a/style.css
+++ b/style.css
@ -0,0 +1,5 @@
+#gameCanvas{
+    box-shadow: 10px 10px rgba(0, 0, 0, 0.479);
+
+    border-radius: 10px;
+}