From 84471219edc6938da6b5683c6e02af61b947d62f Mon Sep 17 00:00:00 2001 From: OBJULL Date: Wed, 8 May 2024 13:35:02 -0400 Subject: [PATCH] Transferred from GitHub --- Readme.MD | 6 +++ _config.yml | 1 + index.html | 11 +++++ script.js | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 5 ++ 5 files changed, 151 insertions(+) create mode 100644 Readme.MD create mode 100644 _config.yml create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/Readme.MD b/Readme.MD new file mode 100644 index 0000000..a03dc72 --- /dev/null +++ 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. \ No newline at end of file diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c741881 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-slate \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..83fc327 --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + JSnake + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5947e99 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3fb84e0 --- /dev/null +++ b/style.css @@ -0,0 +1,5 @@ +#gameCanvas{ + box-shadow: 10px 10px rgba(0, 0, 0, 0.479); + + border-radius: 10px; +} \ No newline at end of file