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
Play this Snake Game: codingnepalweb.com/demos/snake-game-javascript/
@noumanabegum
Жыл бұрын
source code?
@CodingNepal
Жыл бұрын
Here is the source code: www.codingnepalweb.com/create-snake-game-htm-css-javascript/
@user-qj4qu7bb2i
Жыл бұрын
Do u have Architecture diagram and module for this project
absolutely loved it. amazing work. you rock man.
Amazing project. Very informative and I got to learn a lot about JavaScript and using logic. Thanks for such videos.
Thank you.. You explained it clearly
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.
thank you i had fun creating this and I learned a lot!
This channel is going to be great. Thank for creating awesome contents.
@CodingNepal
Жыл бұрын
Glad you enjoy it!
스네이크 바이트 게임.. Whoo, what a trip down memory lane, huh?
i love the way ur using logic .. thank you for your efforts bro
@CodingNepal
Жыл бұрын
My pleasure
@daipayanbarman1266
Жыл бұрын
I am a logic bilder
Amazing. Thank you so much.
Thank you very much 😍🥰
Very good! 👏🏻👏🏻👏🏻👏🏻💚
Most waited video ✨❤️
@CodingNepal
Жыл бұрын
Hope you enjoyed!
Brillint thing sir
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
Жыл бұрын
I'll think on this topic!
@KOMAL_RAWAT_000
Жыл бұрын
@@CodingNepal i need your help 😢
@namjotsingh
Жыл бұрын
chess game project will be amazing
amazing...
It was great, I was excited😄🙂😊
@CodingNepal
Жыл бұрын
Glad to know :)
Awesome
😂 love this video.
Well done 🥰🥰🥰🥰🥰🥰🥰🥰😍😍😍😍😍😍😍😍😍😍😍😍😍
U r the best🥰
@CodingNepal
Жыл бұрын
Thank you
Well done
@S-Lomar
11 ай бұрын
🤯🤯🥰🥰🥰🥰🥰🥰🤯🤯🤯🤯🥰🥰🥰🥰🥰put in play store
Best video, by the way voice ni rakhnu na !!
Mindblowing
@CodingNepal
Жыл бұрын
Thanks
lo ví en español.esta bueno la forma que lo hace con grid
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
Жыл бұрын
Okay, I'll think on it
Thank you
@CodingNepal
Жыл бұрын
You're welcome
Can anyone explain how the snake length expansion is working?
Can you add difficulty levels please or can you tell me how to add it
Good
@CodingNepal
Жыл бұрын
Thanks
You guys 're showing only how to create games what 'bout publishe in play store and start earning?????? Please please please please please guys 🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
شكرًا
@CodingNepal
Жыл бұрын
Thank you for your support
@LoopPool_YT
Жыл бұрын
@@CodingNepal It's a little something for your effort🥰 Can you make more backend projects with php and mysql 🌹
Teach me how to make a thermometer
How to make snake eyes ??
Hey, how do you see the result on browser on vsc?
@-dmytro-
Жыл бұрын
live server
😪 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
😬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 🥵
Can you explain pls what is foodX/Y end why did you deleted its value
@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
10 ай бұрын
@@gandhibarra3036 thanks I even forgot about this project
Bro added you're sounds
What if the food appears in the body of snake?
Please start a react js projcet
@TheLoona
Жыл бұрын
👎 I don’t see the benefits of using react js
@Solomonwo
Жыл бұрын
Yes
@AlexFetfa
Жыл бұрын
@@TheLoona better for getting a job
Someone please explain the body segment for(i =snakebody.lenght-1,i > 0, i--){ snakebody[i]=snakebody[i-1]}
@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 😅
Thanks for the work done But your website cannot be reached please fix this. Thank you so much
@CodingNepal
Жыл бұрын
Can you check now: www.codingnepalweb.com/
@atandaoluwadamiloladavid7673
Жыл бұрын
@@CodingNepal not yet working probably you should always use Google drive for the source too but please fix the website
18:00
changeFoodPosition is not working....help plzz
@supriya_codes
11 ай бұрын
donee
no using: ' ' or " ". using: ` ` in Java Script!
I dont know the meaning of this line : ${snakeBody[i][1]}/${snakeBody[i][0]
💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💓💕💕💓💓
I don't success for this project
SOURCECODE PLEASE
@L1CBot
Жыл бұрын
in the description
@CodingNepal
Жыл бұрын
Here is the source code: www.codingnepalweb.com/create-snake-game-htm-css-javascript/
@L1CBot
Жыл бұрын
@@CodingNepal Please make a video in realtime chat app with firebase in private mode with pure javascript
@razarukhsar8479
Жыл бұрын
@@CodingNepal Thankyo so much I'm glad to here with your source really good vibe to do with this