function parameters() { screenWidth = window.innerWidth; screenHeight = window.innerHeight; size = (screenWidth/2)/13; buttonSize = (screenWidth/2)/2.25+"px"; snake_top = screenHeight/4-size/2; snake_left = screenWidth/2-size/2; up = down = left = false; right = true; tail_length = 0; food_top = 0; food_left = 0; timer = 0; score = 0; } // = = = = = = Start = = = = = = \\ function start() { parameters(); gameWindow(); controllsWindow(); scoreIni(); boundaries_init(); newFood(); snake(); fpsOn(); window.requestAnimationFrame(gameLoop); } // = = = = = = Menu = = = = = = \\ function mainMenu() { document.body.style.backgroundColor = "black"; let mm = newElement("div", "body", "menu mmScreen", screenWidth+"px", screenHeight+"px"); let title = newElement("h1", ".menu", "title", "auto", "auto"); title.innerHTML = "SNAKE"; let play = newElement("div", ".mmScreen", "button", "50%", "auto"); play.innerHTML = "PLAY"; play.setAttribute('onclick', 'vibrate(10); reset(); start();'); let opt = newElement("div", ".mmScreen", "button", "50%", "auto"); opt.innerHTML = "OPTIONS"; opt.setAttribute('onclick', 'vibrate(10); reset(); options();'); //let inf = newElement("div", ".mmScreen", "button", "50%", "auto"); //inf.innerHTML = "INFO"; //inf.setAttribute('onclick', 'vibrate(10); reset(); info();'); } //function info(){} // = = = = = Game Over = = = = = \\ function gameOver() { let gg = newElement("div", "body", "menu ggScreen", screenWidth+"px", screenHeight+"px"); let title = newElement("h2", ".ggScreen", "title", "auto", "50px"); title.innerHTML = "Game Over"; let highScoreDisplay = newElement("p", ".ggScreen", "highScore", "auto", "auto"); let scoreDisplay = ""; if(highScoreHighscore: "+highScore; highScoreDisplay.innerHTML = scoreDisplay; let retry = newElement("div", ".ggScreen", "button", "50%", "auto"); retry.innerHTML = "RETRY"; retry.setAttribute('onclick', 'vibrate(10); reset(); start();'); let menu = newElement("div", ".ggScreen", "button", "50%", "auto"); menu.innerHTML = "Main Menu" menu.setAttribute('onclick', 'vibrate(10); reset(); mainMenu();'); } // = = = = = Options = = = = = \\ function options() { newElement("div", "body", "menu optScreen", screenWidth+"px", screenHeight+"px"); let title = newElement("h2", ".optScreen", "optTitle", "auto", "auto"); title.innerHTML = "Options"; let speedTitle = newElement("p", ".optScreen", "option speedTitle", "auto","auto"); speedTitle.innerHTML = "Speed: "; let selectSpeed = newElement("select", ".optScreen", "option speed", "", ""); for(i=1; i<6; i++){ let speedName = "o"+1; let speedOpt = newElement("option", ".speed", speedName, "auto", "auto"); speedOpt.innerHTML = i; if(i==speed)speedOpt.selected=true; } newElement("br", ".optScreen","br","auto","auto"); let vibrationTitle = newElement("p", ".optScreen","option vbrTitle","auto","auto"); vibrationTitle.innerHTML = "Vibrations "; let vbrCheck = newElement("input", ".optScreen","option check","30px","30px"); vbrCheck.type = "checkbox"; if(vibration)vbrCheck.checked = true; newElement("br", ".optScreen","br","auto","auto"); let fpsTitle = newElement("p", ".optScreen","option fpsTitle","auto","auto"); fpsTitle.innerHTML = "Show fps "; let fpsCheck = newElement("input", ".optScreen","option check","30px","30px"); fpsCheck.type = "checkbox"; if(fps_display)fpsCheck.checked = true; newElement("br", ".optScreen","br","auto","auto"); let bndrTitle = newElement("p", ".optScreen","option fpsTitle","auto","auto"); bndrTitle.innerHTML = "Map boundaries "; let bndrCheck = newElement("input", ".optScreen","option check","30px","30px"); bndrCheck.type = "checkbox"; if(boundaries)bndrCheck.checked = true; let back = newElement("div", ".optScreen", "back button", "50%","auto"); back.innerHTML = "BACK" back.style.bottom = "15%"; back.style.left = "25%"; back.setAttribute('onclick', 'vibrate(10); reset(); mainMenu();'); selectSpeed.setAttribute('onChange','speedChange()'); vbrCheck.setAttribute('onClick','vibrationChange()'); fpsCheck.setAttribute('onClick','fpsChange()'); bndrCheck.setAttribute('onClick','bndrChange()'); } // = = = = = = SPEED = = = = = = \\ function speedChange() { speed=document.querySelector(".speed").value; } // = = = Reset = = = \\ function reset() { document.body.innerHTML = ' '; } // = = = SNAKE CREATION = = = \\ function snake() { let snake = newElement("div", ".gameWindow", "snake head", size+"px", size+"px"); snake.style.top = snake_top+"px"; snake.style.left = snake_left+"px"; } // = = = TAIL GROWTH = = = \\ function grow() { if(tail_length<5){ var tail = newElement("div", ".gameWindow", "snake tail", size+"px", size+"px"); }else{ var tail = newElement("div", ".gameWindow", "snake tail tailEnd", size+"px", size+"px"); } let tail_p = document.querySelectorAll(".snake"); tail_length = tail_p.length; score = boundaries ? ((tail_length-1)*50*(speed/2))*2 : (tail_length-1)*50*(speed/2); document.querySelector(".score").innerHTML = "Score: "+ score; tail.style.top = parseFloat( tail_p[tail_length - 2].style.top)+"px"; tail.style.left = parseFloat( tail_p[tail_length - 2].style.left)+"px"; tail_part[tail_length-1] = []; } // = = = Boundaries = = = \\ function boundaries_init() { if(boundaries){ let wall = newElement("div", ".gameWindow", "wall", screenWidth+"px", size/2+"px"); wall.style.left = "0px"; wall.style.top = "0px"; wall = newElement("div", ".gameWindow", "wall", size/2+"px", screenHeight/2+"px"); wall.style.left = "0px"; wall.style.top = "0px"; wall = newElement("div", ".gameWindow", "wall", screenWidth+"px", size/2+"px"); wall.style.top = screenHeight/2-size/2+"px"; wall.style.left = "0px"; wall = newElement("div", ".gameWindow", "wall", size/2+"px", screenHeight/2+"px"); wall.style.left = screenWidth-size/2+"px"; wall.style.top = "0px"; } } // = = = FOOD CREATION = = = \\ function newFood() { let foodName = "food f"+Math.round(Math.random()*4+1); let food = newElement("div", ".gameWindow", foodName, size+"px", size+"px"); food_top = random(screenHeight/2); food_left = random(screenWidth); food.style.top = food_top+"px"; food.style.left = food_left+"px"; if(collide(".food", ".tail") || collide(".food", ".wall")) { food.remove(); newFood(); } } // = = = food placement = = = \\ function random(place) { return Math.random()*(place-size); } // = = = Game window = = = \\ function gameWindow() { newElement("div", "body", "gameWindow", "100%", screenHeight/2+"px"); } // = = = SCORE = = = \\ function scoreIni() { let div = newElement("div", ".controllsWindow" , "score", "auto", "auto"); div.innerHTML = "Score: 0"; div.style.right = "2%"; } // = = = Controller creation = = = \\ function controllsWindow() { newElement("div", "body", "controllsWindow","100%", screenHeight/2+"px"); newElement("table", ".controllsWindow", "table", "auto", "auto"); // = Buttons 1st row = \\ newElement("tr", ".table", "tr1", "auto", "auto"); newElement("td", ".tr1", "td11", "0", "0"); let up = newElement("td", ".tr1", "key up", buttonSize, buttonSize); newElement("td", ".tr1", "td13", "0", "0"); // = Buttons 2nd row = \\ newElement("tr", ".table", "tr2", "auto", "auto"); let left = newElement("td", ".tr2", "key left", buttonSize, buttonSize); let down = newElement("td", ".tr2", "key down", buttonSize, buttonSize); let right = newElement("td", ".tr2", "key right", buttonSize, buttonSize); // = OnClick actions = \\ up.setAttribute('onclick', 'upKey(); vibrate(10);'); left.setAttribute('onclick', 'leftKey(); vibrate(10);'); down.setAttribute('onclick', 'downKey(); vibrate(10);'); right.setAttribute('onclick','rightKey(); vibrate(10);'); } document.addEventListener('keydown', press); function press(event) { if (event.keyCode === 87 || event.keyCode === 38) {upKey();} if (event.keyCode === 68 || event.keyCode === 39) {rightKey();} if (event.keyCode === 83 || event.keyCode === 40) {downKey();} if (event.keyCode === 65 || event.keyCode === 37) {leftKey();} } // = = = = = = KEYS = = = = = = \\ function upKey() { if(!up && !down){ up = true; down = left = right = false; } } function leftKey() { if(!left && !right) { left = true; up = down = right = false; } } function downKey() { if(!down && !up ) { down = true; up = left = right = false; } } function rightKey() { if(!right && !left){ right = true; up = down = left = false; } } // = = = Element creation = = = \\ function newElement(ele, where, name, width, height ) { let div = document.createElement(ele); if(where=="body") { document.body.appendChild(div); }else{ document.querySelector(where).appendChild(div); } div.className = name; div.style.width = width; div.style.height = height; return(div); } // = = = = = VIBRATION = = = = = \\ function vibrate(i) { if(vibration) navigator.vibrate(i); } // Vibration controller function vibrationChange() { if(vibration) vibration=false; else vibration=true; } // = = = = = = FPS = = = = = = = \\ function fpsOn(){ newElement("div", "body", "fps_game", "auto", "auto") } // Fps controller function fpsChange() { fps_display= fps_display==true? false:true; } // = = = = = Boundaries = = = = = \\ function bndrChange() { boundaries= boundaries == true? false:true; } // = = = = = Collision = = = = = \\ function collide (obj_1, obj_2) { let obj1 = document.querySelector(obj_1); obj1_left = parseFloat(obj1.style.left); obj1_top = parseFloat(obj1.style.top); obj1_width = parseFloat(obj1.style.width); obj1_height=parseFloat(obj1.style.height); let obj2 =document.querySelectorAll(obj_2); for(let i=0; i obj2_left && obj1_left < obj2_left + obj2_width && obj1_top + obj1_height > obj2_top && obj1_top < obj2_top + obj2_height) {return(true);}} } function kill() { let tail_p = document.querySelectorAll(".snake"); for(let i=0; i { const now = performance.now(); while (times.length > 0 && times[0] <= now - 1000) { times.shift(); } times.push(now); fps = times.length; document.querySelector(".fps_game").innerHTML = "Fps "+fps; });} // = MOVEMENT = \\ if(up){snake_top -= 2 + 0.4 * parseFloat(speed);} if(left){snake_left -= 2 + 0.4 * parseFloat(speed);} if(right){snake_left += 2 + 0.4 * parseFloat(speed);} if(down){snake_top += 2 + 0.4 * parseFloat(speed);} // = BOUNDARIES = \\ let snake = document.querySelector(".head"); if(boundaries){ if(collide(".head", ".wall")) { kill(); gameOver(); vibrate(200); return; } }else{ if(snake_top>screenHeight/2-size){ snake_top=0; }if(snake_top<0){ snake_top= screenHeight/2-size; }if(snake_left>screenWidth-size){ snake_left = 0; }if(snake_left<0){ snake_left= screenWidth-size; } } // = EAT = \\ if(collide(".head", ".food")) { let food = document.querySelector(".food"); food.remove(); grow(); newFood(); } // = TAIL COLLISION = \\ if(tail_length>=5){ if(collide(".snake", ".tailEnd")) { kill(); gameOver(); vibrate(200); return; } } // = Snake movement = \\ let tail_speed = speed>2?1:2; let tail_p = document.querySelectorAll(".snake"); tail_length = tail_p.length; if(tail_length>1){ for(let i=tail_length; i>1; i--){ if(timer==0){ if(!firstLaunch){ tail_p[i-1].style.top =tail_part[i-1][1]; tail_p[i-1].style.left=tail_part[i-1][2]; } tail_part[i-1][1] = tail_p[i-2].style.top; tail_part[i-1][2] =tail_p[i-2].style.left; } if(timer==tail_speed){ firstLaunch==false; tail_p[i-1].style.top =tail_part[i-1][1]; tail_p[i-1].style.left=tail_part[i-1][2]; tail_part[i-1][1] = tail_p[i-2].style.top; tail_part[i-1][2] =tail_p[i-2].style.left; } } if(timer==tail_speed){timer=0;} else{timer++;} } snake.style.top = snake_top+"px"; snake.style.left = snake_left+"px"; window.requestAnimationFrame(gameLoop); }

SNAKE (In progress...)