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