Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    snake game miniproject

    Uploaded by

    Deeksha Verma
    rvfcdfg r rv

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    snake game miniproject

    Uploaded by

    Deeksha Verma
    3 views6 pages
    rvfcdfg r rv

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    rvfcdfg r rv

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    3 views6 pages

    snake game miniproject

    Uploaded by

    Deeksha Verma
    rvfcdfg r rv

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 6

    Conclusion:

    The Snake Game front-end project effectively demonstrates the use of HTML, CSS, and
    JavaScript to create a classic and engaging web-based game. It incorporates essential features
    such as snake movement, food collection, and collision detection, which form the core
    mechanics of the game. The scoring system adds a competitive element, encouraging players to
    aim for higher scores. The responsive design ensures the game runs seamlessly across different
    devices, while the CSS styling enhances its visual appeal. JavaScript serves as the backbone of
    the game, managing logic for snake movement, collision checks, and score tracking, as well as
    handling keyboard input for smooth and responsive gameplay. Together, these elements create
    an enjoyable and interactive user experience.

    This project is a valuable learning experience, reinforcing


    key concepts like DOM manipulation, event handling, and the implementation of a game loop.
    It highlights the importance of debugging and optimizing code for better performance. While
    the game is functional and fun, there is significant potential for further development, such as
    adding touch controls for mobile devices, introducing sound effects and animations for a more
    immersive experience, or implementing levels and increasing difficulty to enhance replayability.
    Overall, the Snake Game project not only showcases technical proficiency but also provides a
    solid foundation for exploring more advanced web development techniques.
    References:

    1. Mozilla Developer Network. (2023). HTML Documentation. Retrieved


    from https://developer.mozilla.org/en-US/docs/Web/HTML

    2. Mozilla Developer Network. (2023). CSS Documentation. Retrieved


    from https://developer.mozilla.org/en-US/docs/Web/CSS

    3. Mozilla Developer Network. (2023). JavaScript Documentation. Retrieved


    from https://developer.mozilla.org/en-US/docs/Web/JavaScript
    Source Code:
    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0">
    <title>snakeGame</title>
    <link rel="stylesheet" href="./style.css">
    </head>
    <body>
    <div class="container">
    <div class="score-container">Press any (left right up
    down) key to start</div>
    <div class="game-container">
    </div>
    </div>
    <script src="./script.js"></script>
    </body>
    </html>

    CSS:

    *{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    }

    body{
    height: 100vh;
    width: 100vw;
    background-color: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .container{
    height: 40rem;
    width: 36rem;
    background-color: white;
    box-shadow: 0 0 10px 1px lightgray;
    }

    .score-container{
    height: 4rem;
    width: 36rem;
    background-color: grey;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: larger;
    }

    .game-container{
    height: 36rem;
    width: 36rem;
    display: grid;
    grid-template: repeat(25,1fr) / repeat(25,1fr);
    }

    .food{
    background-color: green;
    border-radius: 50%;
    }

    .snake{
    background-color: red;
    }

    JAVASCRIPT:
    let gameContainer = document.querySelector(".game-
    container")
    let scoreContainer = document.querySelector(".score-
    container");

    let foodX,foodY;
    let headX = 12,headY = 12;
    let velocityX=0,velocityY=0;
    let snakeBody = [];
    let score = 0;

    function generateFood(){
    foodX = Math.floor(Math.random()*25) + 1;
    foodY = Math.floor(Math.random()*25) + 1;
    for(let i=0;i<snakeBody.length;i++){
    if(snakeBody[i][1] == foodY && snakeBody[i][0] ==
    foodX){
    generateFood();
    }
    }
    }

    function gameOver(){
    headX = 12;
    headY = 12;
    generateFood();
    velocityX = 0;
    velocityY = 0;
    snakeBody = [];
    score = 0;
    scoreContainer.innerHTML = "Score : " + score
    alert("Game Over");
    }

    // arr [ 1,2,3] --> [0,1,2,3] unshift


    //arr [1,2,3] --> [1,2,3,4] push()

    function renderGame(){
    console.log("Rendered ");
    let updatedGame = `<div class="food" style="grid-area:
    ${foodY}/${foodX};"></div>`;

    if(foodX == headX && headY == foodY){


    snakeBody.push([foodX,foodY]);
    generateFood();

    score+=10;
    scoreContainer.innerHTML = "Score : " + score
    }

    snakeBody.pop();
    headX+=velocityX;
    headY+=velocityY;
    snakeBody.unshift([headX,headY]);
    if(headX == 0 || headY == 0 || headX == 26 || headY == 26){
    gameOver();
    }
    for(let i=1;i<snakeBody.length;i++){
    if(snakeBody[0][0] == snakeBody[i][0] &&
    snakeBody[0][1] == snakeBody[i][1]){
    gameOver();
    }
    }

    for(let i=0;i<snakeBody.length;i++){
    updatedGame += `<div class="snake" style="grid-area:
    ${snakeBody[i][1]}/${snakeBody[i][0]};"></div>`
    }

    gameContainer.innerHTML = updatedGame;
    }

    generateFood();
    setInterval(renderGame,150);

    document.addEventListener("keydown",function(e){
    console.log(e.key);
    let key = e.key;
    if(key == "ArrowUp" && velocityY!=1){
    velocityX = 0;
    velocityY = -1;
    }else if(key == "ArrowDown" && velocityY!=-1){
    velocityX = 0;
    velocityY = 1;
    }else if(key == "ArrowLeft" && velocityX!=1){
    velocityY = 0;
    velocityX = -1;
    }else if(key == "ArrowRight" && velocityX!=-1){
    velocityY = 0;
    velocityX = 1;
    }
    })

    You might also like