Snake Game GroupB Team P’Faiifu
✨ KALYARAK CHOOBPHA
<html> <body> <h1>Snake Game</h1> <h3 id="score_show">0</h3> <div class="row"> <div class="all_start"> <p1 class="txt_start1">PRESS AT KEY PAD</p1> <div class="the_blocks"> <div class="row"> <block> <p>🢁</p> <side class="side-1"></side> <side class="side-2"></side> </block> </div> <div class="row"> <block> <p>🢀</p> <side class="side-1"></side> <side class="side-2"></side> </block> <block> <p>🢃</p> <side class="side-1"></side> <side class="side-2"></side> </block> <block> <p>🢂</p> <side class="side-1"></side> <side class="side-2"></side> </block> </div> </div> <!-- <p1 class="txt_start2">TO START</p1> --> <canvas id="myCanvas"></canvas> </div> </div> <div> <a href="https://dev.to/consultashwani/how-to-create-a-snake-game-in-javascript-13ia" target="_blank" >CREDITS</a> </div> </div> <style type="text/css"> body { overflow: hidden; } </style> <script src="index.js"></script> <div class="hidden-Sound"> <audio class="background-sound"autoplay loop> <source src="https://ia601401.us.archive.org/5/items/bg-music_202102/bg-music.mp3"type="audio/mp3"> </audio> </div> <style> @import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap'); body { margin: 0; padding: 10; height: 100vh; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: url(https://i.pinimg.com/originals/b8/2f/28/b82f28a7e9c8fcb3868d3d94652c107c.gif); background-size: 200% 200%; min-height: 100vh; } canvas { display: block; border: 10px solid #1d1d1d; margin: auto; margin-left: -12em; margin-top: 20px; background: #282828; border-radius: 10px; } .all_start{ display: flex; width: 800px; justify-content: center; align-items: center; margin: 0 auto; } p{ text-align:center; margin: auto; font-size: 18px; } .the_blocks{ /* display:flex; */ width:400px; margin-top: 20em; /* margin: auto; */ flex-flow:row wrap; transform:rotateX(45deg) rotateZ(30deg); transform-style: preserve-3d; position:relative; } .the_blocks::before{ position:absolute; top:-1.5em; width:100%; text-align:center; transform: translateY(-90px); } .the_blocks::after{ position:absolute; left:-2.5em; top:1em; text-align:center; transform:rotate(-.25turn); } .the_blocks .row{ display:flex; justify-content:center; align-items:center; width:100%; } block{ --hue:335; width:12%; margin:1%; padding-top:7%; background-color:#ffffff; display:flex; position:relative; box-sizing:border-box; animation: kayub 5s backwards infinite; transform-style: preserve-3d; transition: 10s; } block side{ width:100%; height:100%; background-color:#b7e1ff; display:block; position:absolute; top:0; left:0; transform-origin:; transform-style: preserve-3d; /* animation: kayub 5s infinite; */ } side.side-1{ background:#b7e1ff; transform:rotateX(90deg); transform-origin: 100% 100%; } side.side-2{ background:#b7e1ff; transform:rotateY(270deg); transform-origin: 100% 0%; } h1{ font-size: 3.5em; font-family: 'Carter One', cursive; margin-bottom: 0em; margin-top: 0.1em; color: white; text-shadow: 5px 5px 10px #41a9f2; } h3{ font-size: 2em; font-family: 'Carter One', cursive; margin-top: 0em; margin-bottom: -0.5em; color: white; text-shadow: 5px 5px 10px #41a9f2; } a{ font-size: 2em; font-family: 'Carter One', cursive; margin-top: 0em; /* margin-bottom: -0.5em; */ color: white; text-shadow: 5px 5px 10px #41a9f2; } p1{ font-family: 'Carter One', cursive; font-size: 1.5em; margin-left: 3.5em; margin-bottom: 4em; color: #192471; text-shadow: 0px 0px 10px white; } p{ font-family: 'Carter One', cursive; color: #023d75; font-size: 15px; text-align: center; } .row{ margin-left: -15em; } @keyframes kayub{ 0% { transform: translateY(-90px); } 50%{ transform: translateX(0px); } 100% { transform: translateY(-90px); } } } .hidden-Sound { display: none; } </style> <script> const cvs = document.getElementById("myCanvas"); const ctx = cvs.getContext("2d"); cvs.width = 500; cvs.height = 500; cvs.style = "box-shadow: 0px 0px 15px 2px #89c7fc;'" let frames = 0; let foodEaten = false; let speed_move = 15; let score_count = document.getElementById('score_show'); let score = 0; const direction = { current : 0, idle : 0, right : 1, down : 2, left : 3, up : 4 } document.addEventListener("keydown", function(evt){ switch(evt.keyCode){ case 37: //move left if( direction.current != direction.right) direction.current = direction.left; gameIsWorked = true; break; case 38: //move up if(direction.current != direction.down) direction.current = direction.up; gameIsWorked = true; break; case 39: //move right if(direction.current != direction.left) direction.current = direction.right; gameIsWorked = true; break; case 40: //move down if(direction.current != direction.up) direction.current = direction.down; gameIsWorked = true; break; } }); function getDistance(pointX1, pointY1, pointX2, pointY2) { let distanceX = pointX2 - pointX1; let distanceY = pointY2 - pointY1; return Math.sqrt(Math.pow(distanceX,2) + Math.pow(distanceY,2)); } function count(){ score_count.textContent = `Score : ${score}`; } function snakeMove(e) { if (gameIsWorked) { document.querySelector('.background-sound').play(); document.querySelector('.background-sound').volume = 0.1; } } const food = { x : cvs.width/4, y : cvs.height/4, r : 10, draw : function(){ ctx.beginPath(); ctx.shadowBlur = 10; ctx.shadowOffset = 0.5; ctx.shadowColor = "#f7ffb5"; ctx.fillStyle = "#e4ff00"; ctx.arc(this.x, this.y, this.r, 0 , 2*Math.PI); ctx.fill(); ctx.closePath(); } } const snake = { radius : 10, position : [{ x : cvs.width/2, y : cvs.height/2}], draw : function() { ctx.shadowBlur = 10; ctx.shadowOffset = 0.5; ctx.shadowColor = "#75ffa9"; ctx.fillStyle = "lime"; for( let i = 0; i< this.position.length; i++){ let p = this.position[i]; ctx.beginPath(); ctx.arc(p.x, p.y, this.radius, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); } }, update : function() { if(frames % 6 == 0){ if(foodEaten == true){ this.position.push({ x : this.position[this.position.length -1].x, y : this.position[this.position.length -1].y }); score++; count() foodEaten = false; } if(this.position[0].x < 0 ) this.position[0].x = cvs.width - 10; if(this.position[0].x > cvs.width ) this.position[0].x = 10; if(this.position[0].y < 0 ) this.position[0].y = cvs.height - 10; if(this.position[0].y > cvs.height ) this.position[0].y = 10; for( let i = this.position.length -1; i > 0; i--){ if(this.position[0].x == this.position[i].x && this.position[0].y == this.position[i].y && this.position.length > 2) { this.position.splice(1); this.position[0].x = cvs.width/2; this.position[0].y = cvs.height/2; score = 0; count(); alert("GAME OVER!!!"); speed_move = 15; break; } this.position[i].x = this.position[i-1].x; this.position[i].y = this.position[i-1].y; } if(direction.current == direction.right) { this.position[0].x += speed_move; } if(direction.current == direction.left) { this.position[0].x -= speed_move; } if(direction.current == direction.up) { this.position[0].y -= speed_move; } if(direction.current == direction.down) { this.position[0].y += speed_move; } if(getDistance(food.x,food.y,this.position[0].x, this.position[0].y) <= 2*food.r){ food.x = Math.random() * cvs.width-1; food.y = Math.random() * cvs.height-1; foodEaten = true; speed_move += 0.25; } } } } function main() { ctx.clearRect(0, 0, cvs.width, cvs.height); snake.update(); snake.draw(); food.draw(); count(); frames ++; requestAnimationFrame(main); } requestAnimationFrame(main); </script> </body> </html>