The latest articles on DEV Community by wiz-aiimages (@wizaiimages). https://dev.to/wizaiimages https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1074195%2Fe3f62267-2b78-46c0-8a58-91493dbd25be.png https://dev.to/wizaiimages en wiz-aiimages Sun, 30 Apr 2023 04:33:55 +0000 https://dev.to/wizaiimages/how-to-make-a-snake-game-in-javascript-a-beginners-guide-2fad https://dev.to/wizaiimages/how-to-make-a-snake-game-in-javascript-a-beginners-guide-2fad <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja9NUG-_bi2OouSmO91MMrkLVMq3TtBdaNek3aMG9QZIdI-wuF1E6o8b7wK7HPUEkKI95SdxqoRnhveYTUk_F7cI30PgahOj_yqtQNFQnoQAUy-pyxzBOUyIAbv2kFrg6kCT9SNs3fqqiMFRR2A_MHg0GBYI7mLCjH6nPsF7KwYc9OCnTYRl5vwyxh8A/s300/94984424-044e0a80-0509-11eb-903a-c114d5b6f061.png"><span></span></a><span><br></span></p> <p><span><br></span></p> <h1 id="basic-snake-html-and-javascript-game"><span>Basic Snake HTML and JavaScript Game<span></span></span></h1> <p><span>Snake is a fun game to make as it doesn't require a lot of code (less than 100 lines with all comments removed). This is a basic implementation of the snake game, but it's missing a few things intentionally and they're left as further exploration for the reader.</span></p> <p><span>Create a fun Snake game with &lt;100 lines of code using HTML and JavaScript. Basic version with room for exploration.</span></p> <p><span></span><span><br> <br><br> <br><br> </span></p> <h2 id="further-exploration"><span>Further Exploration<span>&lt;!--more--&gt;</span></span></h2> <ul> <li> <span>Score</span><ul> <li><span>When the snake eats an apple, the score should increase by one. Use <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText">context.fillText()</a> to display the score on the screen</span></li> </ul> </li> <li> <span>Mobile and touchscreen support</span><ul> <li><span>Allow the game to be scaled down to a phone size. See <a href="https://codepen.io/straker/pen/VazMaL"></a><a href="https://codepen.io/straker/pen/VazMaL"></a><a href="https://codepen.io/straker/pen/VazMaL">https://codepen.io/straker/pen/VazMaL</a></span></li> <li><span>Support <a href="https://developer.mozilla.org/en-US/docs/Web/API/Touch_events">touch controls</a></span></li> </ul> </li> <li> <span>Better apple spawning</span><ul> <li><span>Currently, the apple spawns in any random grid in the game, even if the snake is already on that spot. Improve it so it only spawns in empty grid locations</span></li> <p><a href="https://wiz-official.blogspot.com/2023/04/how-to-make-snake-game-in-javascript.html">READ MORE</a></p> </ul> </li> </ul>