Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Snake Game (HTML) (Retro Game Entry)
ID	6100650097770496
Created	9 years ago, 1452190218628
Updated	9 years ago, 1452464460462
Code	<!DOCTYPE html> <!-- I am creating an HTML Tetris game that should be released the beginning of this week. If you would like to be notified when it comes out, just comment in the tips and thanks. Entered in Contest: Retro Game Years programming: 1.5 Learned: 100% of Computer Programming Courses on Khan Academy This is a recreation of the classic game Snake More info: https://en.wikipedia.org/wiki/Snake_(video_game) Note: I tried to comment the CSS and HTML as best as I could, but the JavaScript is well commented I could have used jQuery but thought it would be more of a challenge to use only JavaScript, no extra libraries --> <html> <head> <meta charset="utf-8"> <title>Snake Game (HTML) (Retro Game Entry)</title> <!--Get a cool font--> <link href='https://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'> <style> body{ font-family:'VT323', monospace;/Set the font of the page/ } /Center the game in the page and set the width and height/ #game-area{ width:486px; height:285px; left:0; right:0; top:0; bottom:0; position:absolute; margin:auto; } #game-info{ /Put the score container on the bottom of the game/ position:relative; height:20px; border:1px solid; margin-top:-1px; text-align:CENTER; font-size:21px; } #game{ /Add the game background and background/ border:1px solid; height:inherit; background:rgb(209, 209, 209); font-size:0; } .empty{ /Divs with the empty class/ margin-right:1px; margin-bottom:1px; height:10px; width:10px; display:inline-block; position:relative; } .snake{ /Divs with the snake class/ background:rgb(84, 219, 40); margin-right:1px; margin-bottom:1px; height:10px; width:10px; display:inline-block; position:relative; } .apple{ /Divs with the apple class/ background:rgb(224, 27, 27); margin-right:1px; margin-bottom:1px; height:10px; width:10px; display:inline-block; position:relative; } #reload{ /Center the reload button and do some more styling/ background:rgb(219, 219, 219); border:none; border-radius:40px; width:70px; height:70px; position:absolute; left:0; top:136px; right:0; margin:0 auto; background:rgb(33, 125, 0); } #reload-icon{ /The reload symbol has font size of 50px and transforms around the center/ font-size:50px; transform-origin:center center; } #reload-icon:hover{ /If you hover over the reload icon rotate the div/ cursor:POINTER; -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform:rotate(360deg); transition:transform 1s; } #game-over-text{ /Center the text and color it green/ text-align:CENTER; font-size:70px; color:rgb(33, 125, 0); } #game-over-screen{ /Center the game over screen/ position:absolute; background:gray; opacity:0; width:352px; height:255px; left:0; top:0; bottom:0; right:0; margin:auto; display:none; } #score-text{ /Center the score text and color it red/ text-align:CENTER; font-size:50px; color:rgb(224, 27, 27); } button:focus{ /Get rid of that ugly outline when you click on a button/ outline:none; } </style> </head> <body> <div id="game-area"> <!--Game area--> <div id="game"></div> <div id="game-info"> <!--Score area--> Score: <span id="score">0</span> </div> </div> <!--Game over screen--> <div id="game-over-screen"> <!--Game over text--> <div id="game-over-text">Game Over!</div> <!--Score text--> <div id="score-text">Score: <span id="end-score">0</span></div> <!--Reload button--> <button id="reload"> <div id="reload-icon">↻</div> </button> </div> <script> //Define all of the variables that will be used later on var div; var apple; var snakeParts; var dir; var snakeQueueAmt; var gameMap; //Get the elements that will be needed later on and store in variable var game = document.getElementById("game"); var gameEndScreen = document.getElementById("game-over-screen"); var finalScore = document.getElementById("end-score") var scoreEl = document.getElementById("score"); </script> <script> function gameOver() { //Stop updating the game window.clearInterval(timer) //Set the score text on the game over screen to your score finalScore.textContent = score.textContent; //Show the reload button document.getElementById("reload").hidden = false; //Show the gameEndScreen gameEndScreen.style.display = "block"; //Get the current opacity of the end screen var currentOpacity = window.getComputedStyle(gameEndScreen).getPropertyValue("opacity") //set the opacity of the end screen to the current opacity plus 0.02 gameEndScreen.style.opacity = parseFloat(currentOpacity) + 0.02; //As long as the opacity of the end screen is less than one if(gameEndScreen.style.opacity<0.9) window.requestAnimationFrame(gameOver)//Call this function again } function refresh() { //First check for if the snake is off the map if(snakeParts[0].x<0\|\|snakeParts[0].x>gameMap[0].length-1\|\|snakeParts[0].y<0\|\|snakeParts[0].y>gameMap.length-1) gameOver();//if it is, game over :( //Next check if the snake head is on an apple if(snakeParts[0].x===apple.x&&snakeParts[0].y===apple.y) { //Spawn new apple spawnApple(); //Increase score scoreEl.textContent = parseFloat(scoreEl.textContent) + 5; //Increase Queue Amount for adding snake parts snakeQueueAmt += 5; } //If more snake parts need to be added if(snakeQueueAmt>0) { //Add new snake part newSnakePart(snakeParts[snakeParts.length-1].x,snakeParts[snakeParts.length-1].y) //Lower the amount of snake parts needed to be added by 1 snakeQueueAmt--; } //Get rid of the snake head gameMap[snakeParts[0].y][snakeParts[0].x]=0; //Check which direction the snake is moving and move it accordingly if(dir === "right") snakeParts[0].x++; if(dir === "left") snakeParts[0].x--; if(dir === "up") snakeParts[0].y--; if(dir === "down") snakeParts[0].y++; //Re-add the snake head at the new position gameMap[snakeParts[0].y][snakeParts[0].x]=2; //If there are more than 1 snake part if(snakeParts.length>1) gameMap[snakeParts[snakeParts.length-1].y][snakeParts[snakeParts.length-1].x]=0;//Remove the last snakePart from the map so it doesn't get redrawn //Loop through all snake parts from last to first for(var i=snakeParts.length-1; i>0; i--) { //if the snake head is touching another part of the snake if(snakeParts[i].x===snakeParts[0].x&&snakeParts[i].y===snakeParts[0].y) gameOver();//GAME OVER!!! //Set the x of the current snake part to the next snake part's x snakeParts[i].x=snakeParts[i-1].x; //Set the y of the current snake part to the next snake part's y snakeParts[i].y=snakeParts[i-1].y; //Add the snake part to the map gameMap[snakeParts[i].y][snakeParts[i].x]=2; } //Loop through all indexes of the game map for(var i=0; i<gameMap.length; i++) { for(var j=0; j<gameMap[i].length; j++) { //if the current index's value is 2 it is a snake part if(gameMap[i][j]===2) game.children[i].children[j].className = "snake"; //if the current index's value is 1 it is an apple if(gameMap[i][j]===1) game.children[i].children[j].className = "apple"; //if the current index's value is 0 it is empty if(gameMap[i][j]===0) game.children[i].children[j].className = "empty"; } } //Reset key change keyChange=false; } //Random number function: http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function spawnApple(x,y) { /* @Pamela: You should really add a video on the do while loop. I just learned about in my Java class and found out it is in JavaScript too! */ //Calculate a random number for the x and y of the new apple do { y = randomInt(0,gameMap.length-1); x = randomInt(0,gameMap[0].length-1); } while (gameMap[y][x]===2)//if the coordinate of these numbers is already taken do it again //update game map gameMap[y][x] = 1; //set the apple x and y apple.x=x; apple.y=y; } function newSnakePart(x,y) { //update game map gameMap[y][x] = 2; //add new snake part to array snakeParts.push({ x:x, y:y }) } window.addEventListener("keydown",function(e){ e.preventDefault(); //as long as a key has not already been pressed since the last refresh if(!keyChange) { //change the direction based on the key pressed as long as it is not in the opposite direction of the current direction if(e.keyCode===37 && dir !== "right") { dir = "left" keyChange = true; } if(e.keyCode===38 && dir !== "down") { dir = "up" keyChange = true; } if(e.keyCode===39 && dir !== "left") { dir = "right" keyChange = true; } if(e.keyCode===40 && dir !== "up") { dir = "down" keyChange = true; } } }) //Listen for the reload button to be clicked document.getElementById("reload").addEventListener("click",function() { //Hid the reload button so it cannot be clicked on accident document.getElementById("reload").hidden = true; //Set the opacity of the end screen to 0 gameEndScreen.style.opacity = 0; //reset the score scoreEl.textContent = 0; //remove all children of the game element while (game.firstChild) { game.removeChild(game.firstChild); } //Generate a new game newGame(); }) function newGame() { //Create an array with length of 26 gameMap = new Array(26); //Loop through the array and at each index add another array with length 44 for(var i=0; i<gameMap.length; i++) { gameMap[i] = new Array(44); } //Loop through the game map and at each iteration add another div to the game for(var i=0; i<gameMap.length; i++) { div = document.createElement("div"); div.className = "col"; game.appendChild(div); } //get all of the column elements cols = document.getElementsByClassName("col"); //Loop through the columns adding a div at each one for(var i=0; i<cols.length; i++) { for(var j=0; j<gameMap[i].length; j++) { div = document.createElement("div"); div.className = "empty"; cols[i].appendChild(div) } } //Apple default value apple = { x:0, y:0, } //Emptry array of snake parts snakeParts = []; //Start direction of right dir = "right"; //No snake parts to add right now snakeQueueAmt = 0; //No key has been changed keyChange = false; //Spawn apple spawnApple(); //Make first snake part at the coordinates 0,13 newSnakePart(0,13); //Start the game! timer = window.setInterval(refresh,100); } //Create first game! newGame() </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOjPpJDrCgw
Votes	331
Spin-Offs	16
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	wowsk
Author Name	wowsk
Author ID	kaid_1049056766885583199769456
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739453512292
Updated	8 months ago, 1744828877707
Source Deleted	unknown