Create A Snake Game in HTML CSS & JavaScript | JavaScript Game Tutorial

In this video, I've shown how to Create A Snake Game using HTML, CSS, and JavaScript. This game is designed to be played both on a PC using keyboard arrow keys and on a mobile device using touch-based arrow buttons.
🗂️ Get Source Code of this Snake Game
➤ buymeacoffee.com/codingnepal/...
🌐 Visit CodingNepal for helpful coding projects
➤ www.codingnepalweb.com
⭐ Hire me on Fiverr
➤ www.fiverr.com/prakashahi
📷 Follow me on Instagram
➤ / coding.np
🤝 Support my work with a coffee
➤ buymeacoffee.com/codingnepal
🕔 Timestamps:
0:00 Demo of Snake Game
2:24 HTML & CSS Start
5:46 JavaScript Start
06:09 Creating Snake Food & Head
10:41 Moving Snake on Arrow Key Click
15:20 Adding Snake Body Part After Eating Food
19:18 Showing Game Over Alert When Snake Collides with Wall
23:20 Showing Game Over Alert When Snake Hit the Body
24:40 Updating Current Score
26:00 Updating High Score
28: 50 Creating Arrows Button for Touch Devices
30:33 Moving Snake on Arrow Button Click
#javascript #html #css #javascriptprojects #js #javascriptgame
🎵 Music Credit:
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
Deep Sea by Vendredi
• Deep Sea - Vendredi (N...
Miss You - LiQWYD
• Miss You - LiQWYD (No ...

Пікірлер: 84

  • @CodingNepal
    @CodingNepal Жыл бұрын

    Play this Snake Game: codingnepalweb.com/demos/snake-game-javascript/

  • @noumanabegum

    @noumanabegum

    Жыл бұрын

    source code?

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Here is the source code: www.codingnepalweb.com/create-snake-game-htm-css-javascript/

  • @user-qj4qu7bb2i

    @user-qj4qu7bb2i

    Жыл бұрын

    Do u have Architecture diagram and module for this project

  • @rudra9535
    @rudra9535 Жыл бұрын

    absolutely loved it. amazing work. you rock man.

  • @namjotsingh
    @namjotsingh Жыл бұрын

    Amazing project. Very informative and I got to learn a lot about JavaScript and using logic. Thanks for such videos.

  • @mohammedalgourch3077
    @mohammedalgourch3077 Жыл бұрын

    Thank you.. You explained it clearly

  • @devsilva7155
    @devsilva7155 Жыл бұрын

    18:05 you can create a memory game, where when you reach a control point, which is the light blue dot, the screen will be filled with more light blue dots, the idea is to fill as many dots as possible, if you touch a dot that you already touched, you lose, if you touch the wall, you lose. and you just have to rely on what is in that minute.

  • @Stardippedd
    @Stardippedd9 ай бұрын

    thank you i had fun creating this and I learned a lot!

  • @davidconteh2231
    @davidconteh2231 Жыл бұрын

    This channel is going to be great. Thank for creating awesome contents.

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Glad you enjoy it!

  • @kingchobo
    @kingchobo Жыл бұрын

    스네이크 바이트 게임.. Whoo, what a trip down memory lane, huh?

  • @zillalsenmesrane1022
    @zillalsenmesrane1022 Жыл бұрын

    i love the way ur using logic .. thank you for your efforts bro

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    My pleasure

  • @daipayanbarman1266

    @daipayanbarman1266

    Жыл бұрын

    I am a logic bilder

  • @LuisMedina-dk3vc
    @LuisMedina-dk3vc4 ай бұрын

    Amazing. Thank you so much.

  • @nosibahassan8971
    @nosibahassan8971 Жыл бұрын

    Thank you very much 😍🥰

  • @CodingW3
    @CodingW38 ай бұрын

    Very good! 👏🏻👏🏻👏🏻👏🏻💚

  • @yubiroaster6285
    @yubiroaster6285 Жыл бұрын

    Most waited video ✨❤️

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Hope you enjoyed!

  • @Countdownseries193
    @Countdownseries193 Жыл бұрын

    Brillint thing sir

  • @AriqTech
    @AriqTech Жыл бұрын

    Can you create a chess game using HTML, CSS & JS? Function you may include: -User can select white side /Black black/Random -Can include 3 levels: Easy, Medium & Hard. Thanks!

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    I'll think on this topic!

  • @KOMAL_RAWAT_000

    @KOMAL_RAWAT_000

    Жыл бұрын

    ​@@CodingNepal i need your help 😢

  • @namjotsingh

    @namjotsingh

    Жыл бұрын

    chess game project will be amazing

  • @danzarifin
    @danzarifin Жыл бұрын

    amazing...

  • @mdms4549
    @mdms4549 Жыл бұрын

    It was great, I was excited😄🙂😊

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Glad to know :)

  • @studentimantha5345
    @studentimantha53459 ай бұрын

    Awesome

  • @TheLoona
    @TheLoona Жыл бұрын

    😂 love this video.

  • @S-Lomar
    @S-Lomar10 ай бұрын

    Well done 🥰🥰🥰🥰🥰🥰🥰🥰😍😍😍😍😍😍😍😍😍😍😍😍😍

  • @harunwarsame3027
    @harunwarsame3027 Жыл бұрын

    U r the best🥰

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thank you

  • @S-Lomar
    @S-Lomar11 ай бұрын

    Well done

  • @S-Lomar

    @S-Lomar

    11 ай бұрын

    🤯🤯🥰🥰🥰🥰🥰🥰🤯🤯🤯🤯🥰🥰🥰🥰🥰put in play store

  • @surajghimire7107
    @surajghimire7107 Жыл бұрын

    Best video, by the way voice ni rakhnu na !!

  • @shanmugarajkarthik9504
    @shanmugarajkarthik9504 Жыл бұрын

    Mindblowing

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks

  • @luissosa7685
    @luissosa7685 Жыл бұрын

    lo ví en español.esta bueno la forma que lo hace con grid

  • @GoldDiscover333
    @GoldDiscover333 Жыл бұрын

    Your all videos love it 💕. Dear can you upload complete HTML, CSS , JavaScript and PHP course with voice Urdu or Hindi . Like frontend and backend development full course. Bz I'm very excited for this course

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Okay, I'll think on it

  • @social.knowledge_0
    @social.knowledge_0 Жыл бұрын

    Thank you

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    You're welcome

  • @Jay-eg9mv
    @Jay-eg9mv Жыл бұрын

    Can anyone explain how the snake length expansion is working?

  • @gamingshorts2809
    @gamingshorts280911 ай бұрын

    Can you add difficulty levels please or can you tell me how to add it

  • @Solomonwo
    @Solomonwo Жыл бұрын

    Good

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks

  • @S-Lomar
    @S-Lomar10 ай бұрын

    You guys 're showing only how to create games what 'bout publishe in play store and start earning?????? Please please please please please guys 🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏

  • @LoopPool_YT
    @LoopPool_YT Жыл бұрын

    شكرًا

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thank you for your support

  • @LoopPool_YT

    @LoopPool_YT

    Жыл бұрын

    @@CodingNepal It's a little something for your effort🥰 Can you make more backend projects with php and mysql 🌹

  • @ThroubleMaker
    @ThroubleMaker Жыл бұрын

    Teach me how to make a thermometer

  • @pooja3339
    @pooja33394 ай бұрын

    How to make snake eyes ??

  • @Movieclipsevery2days
    @Movieclipsevery2days Жыл бұрын

    Hey, how do you see the result on browser on vsc?

  • @-dmytro-

    @-dmytro-

    Жыл бұрын

    live server

  • @alixerkmir2097
    @alixerkmir20979 ай бұрын

    😪 I didn't understand how exactly it works "for (let i = snakeBody.length - 1; i > 0; i--) { // Shifting forward the values of the elements in the snake body by one snakeBody[i] = snakeBody[i - 1]; }" 18:50

  • @alixerkmir2097
    @alixerkmir20979 ай бұрын

    😬When I put "if(gameOver) return handleGameOver();" A game simply does not run because of a message "alert("Game Over! Press OK to replay...");" 21:25 🥵

  • @asmet2701
    @asmet2701 Жыл бұрын

    Can you explain pls what is foodX/Y end why did you deleted its value

  • @gandhibarra3036

    @gandhibarra3036

    10 ай бұрын

    FoodX/Y is the position of where the food is going to be. He deleted the values because he wanted to make the food position as random{(Math.random() * 30) + 1}and not as a fixed position on the grid.

  • @asmet2701

    @asmet2701

    10 ай бұрын

    @@gandhibarra3036 thanks I even forgot about this project

  • @webPro_faizan
    @webPro_faizan Жыл бұрын

    Bro added you're sounds

  • @debabratagon7289
    @debabratagon72896 ай бұрын

    What if the food appears in the body of snake?

  • @thisishabib744
    @thisishabib744 Жыл бұрын

    Please start a react js projcet

  • @TheLoona

    @TheLoona

    Жыл бұрын

    👎 I don’t see the benefits of using react js

  • @Solomonwo

    @Solomonwo

    Жыл бұрын

    Yes

  • @AlexFetfa

    @AlexFetfa

    Жыл бұрын

    @@TheLoona better for getting a job

  • @sojibhasan4759
    @sojibhasan4759 Жыл бұрын

    Someone please explain the body segment for(i =snakebody.lenght-1,i > 0, i--){ snakebody[i]=snakebody[i-1]}

  • @baazigar5

    @baazigar5

    Жыл бұрын

    It was really hard to understand for me too but after trying very hard i understood. Suppose we have an array with 3 items, so by this for loop, 3rd item's value will be equal to 2nd item then 2nd item's value will be equal to 1st item and then after coming out of for loop, the value of 1st item will increase by one with velocity variable... I hope you understood 😅

  • @atandaoluwadamiloladavid7673
    @atandaoluwadamiloladavid7673 Жыл бұрын

    Thanks for the work done But your website cannot be reached please fix this. Thank you so much

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Can you check now: www.codingnepalweb.com/

  • @atandaoluwadamiloladavid7673

    @atandaoluwadamiloladavid7673

    Жыл бұрын

    @@CodingNepal not yet working probably you should always use Google drive for the source too but please fix the website

  • @nakulmittal9953
    @nakulmittal99539 ай бұрын

    18:00

  • @supriya_codes
    @supriya_codes11 ай бұрын

    changeFoodPosition is not working....help plzz

  • @supriya_codes

    @supriya_codes

    11 ай бұрын

    donee

  • @Gostosolucas
    @Gostosolucas Жыл бұрын

    no using: ' ' or " ". using: ` ` in Java Script!

  • @nguyentienkha2908
    @nguyentienkha290811 ай бұрын

    I dont know the meaning of this line : ${snakeBody[i][1]}/${snakeBody[i][0]

  • @S-Lomar
    @S-Lomar9 ай бұрын

    💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💓💕💕💓💓

  • @samoeurnartjr9535
    @samoeurnartjr9535 Жыл бұрын

    I don't success for this project

  • @razarukhsar8479
    @razarukhsar8479 Жыл бұрын

    SOURCECODE PLEASE

  • @L1CBot

    @L1CBot

    Жыл бұрын

    in the description

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Here is the source code: www.codingnepalweb.com/create-snake-game-htm-css-javascript/

  • @L1CBot

    @L1CBot

    Жыл бұрын

    @@CodingNepal Please make a video in realtime chat app with firebase in private mode with pure javascript

  • @razarukhsar8479

    @razarukhsar8479

    Жыл бұрын

    @@CodingNepal Thankyo so much I'm glad to here with your source really good vibe to do with this