An Interest In:
Web News this Week
- April 3, 2024
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
Some of Our Sources
- Slashdot
- Spoon Graphics
- Six Revisions
- TutsPlus - Design
- Vandelay Design
- Crazy Leaf Design
- CSS Tricks
- Freelance Switch
- Android Headlines
- Hashedout
Help Webnuz
Referal links:
November 7, 2020 11:53 am GMT
Original Link: https://dev.to/backlinkn/how-to-make-snake-game-using-html-css-and-javascript-56l9
How To Make Snake Game Using HTML, CSS, and JavaScript
I will show you how you can easily create a snake game using simple HTML, CSS, and JavaScript programming code.
The game of snake is a very old and well-known game. Which you can build using common HTML, CSS, and JavaScript programming code.
JavaScript programming code is used to create a game. I also used only the JavaScript programming code in exactly the same way. And used a small amount of HTML and CSS code. Hopefully, this article can teach you how to make games. Basically, you can use different programming languages like c, c +, java, etc. to make games. However, with the help of JavaScript programming code, you can easily and generally create a professional game.
Hope you like this game.
Demo: Click Here
Download Code: Click Here
Some special information about this snake game
- This game is based on JavaScript programming language. It uses some HTML and a small amount of CSS programming code.
- Keeping in mind the new programmer, I have tried to write these corners as simple and simple as possible. So that everyone can understand and learn. Like ordinary snake games, this game is confined to a square box.
- As in the game of snakes, a snake will roam here and try to eat the food in front of it. But I have made some differences here. In general, you can work with the keyboard. But in this case, you can not use the board, only the mouse can do this. Here I have made the colors of snakes and food green and the background completely black.
- Ordinary snake games are basically seen eating together. But in this case, I have made some difference. Many foods can be seen here together and those foods will have a specific point. The sooner you can eat those foods, the more points you will get.
- When you try to get out of these four walls or hit the wall, you get out of the game. Then a pop-up box will open showing that you have exited the game.
All in all, this is a great and professional snake game. I'm sure you'll like this game. Below I show you how to make this game. Below are all the source code required for this game. You can download the code required to create this game by clicking the download button above, such as HTML, CSS, and JavaScript. You can watch the live demo of this game by clicking on the demo button above.
How to make this snake game
To create this game you first need to create an HTML file. To create an HTML file, you need to open Notepad and copy the code below and paste it into Notepad. Then add dot HTML with the rename of your choice and save. This way you can easily create an HTML file. Then you add the following three codes to that structure.
<html><head> <style> Add Css Code </style></head><body> Add HTML Code <script> Add JavaScript Code </script></body></html> Enter fullscreen mode Exit fullscreen mode
Below are all the instructions on how to add.
Add HTML Code
A small amount of one line HTML code has been used to create this project. You copy the HTML code below and paste it into the structure above where the ad HTML code is written.
<canvas height="512" width="512" id="gameCanvas"> </canvas> Enter fullscreen mode Exit fullscreen mode
Add CSS Code
Which of the following is the CSS code that helped make this game. Originally a very small amount of CSS programming code was used to make this game. You copy the CSS code given below and paste it in the upper structure where the ad CSS code is written. You can also create a separate CSS file if you want and paste the following codes there. But remember that you must attach your cis file to the HTML.
html, body { height: 100%;}body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;}/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/canvas { background: black; font-size: 2vw; box-shadow: 1em 1em 0.5em rgba(0, 0, 0, 0.25); outline: 1px solid white; outline-offset: -2px;} Enter fullscreen mode Exit fullscreen mode
Add JavaScript Code
The following codes are the JavaScript programming codes that have been used the most to create this game. Basically, JavaScript programming code is used to create any such game. To add these codes to your project, you need to copy the code from the bottom and paste it into the top structure where the ad javascript code is written.
var cnv = document.getElementById('gameCanvas'), ctx = cnv.getContext('2d'), segmentLength = 10, startingSegments = 20, spawn = { x: 0, y:cnv.height/2 }, snakeSpeed = 5, maxApples = 5, appleLife = 500, segmentsPerApple = 3, snakeWidth = 5, appleWidth = 5, cursorSize = 10, /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ snakeColor = [ 100, 255, 100, 1], appleColor = [ 0, 255, 0, 1], cursorColor = [ 255, 255, 255, 1], cursorColorMod = [ 0,-255,-255, 0], targetColor = [ 0, 0, 255, 1], targetColorMod = [ 255, 0,-255, 0], scoreColor = [ 255, 255, 255, 1], cursorSpin = 0.075, snake, cursor, target, apples, score, gameState, deathMeans;/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/function distance(p1,p2){ var dx = p2.x-p1.x; var dy = p2.y-p1.y; return Math.sqrt(dx*dx + dy*dy);}function lineIntersect(p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) { var s1_x = p1_x - p0_x, s1_y = p1_y - p0_y, s2_x = p3_x - p2_x, s2_y = p3_y - p2_y, s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y), t = ( s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y); if (s >= 0 && s <= 1 && t >= 0 && t <= 1) { return true; } return false;}/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/function SGM(angle, x, y) { this.x = x || 0; this.y = y || 0; this.angle = angle || 0; this.parent = null;};SGM.prototype.endX = function() { return this.x + Math.cos(this.angle) * segmentLength;};/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/SGM.prototype.endY = function() { return this.y + Math.sin(this.angle) * segmentLength;};SGM.prototype.pointAt = function(x, y) { var dx = x - this.x, dy = y - this.y; this.angle = Math.atan2(dy, dx);};SGM.prototype.target = function(x, y) { this.targetX = x; this.targetY = y; this.arrived = false; this.totalDist = distance({x:this.endX(), y: this.endY()}, {x: this.targetX, y: this.targetY}); this.currentDist = parseInt(this.totalDist);};/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/SGM.prototype.gotoTarget = function() { if(!this.arrived) { if(this.targetX > this.x + segmentLength || this.targetX < this.x - segmentLength || this.targetY > this.y + segmentLength || this.targetY < this.y - segmentLength) { this.pointAt(this.targetX, this.targetY); } else { this.arrived = true; } this.currentDist = distance({x:this.endX(), y: this.endY()}, {x: this.targetX, y: this.targetY}); } this.x += (this.endX() - this.x) / snakeSpeed; this.y += (this.endY() - this.y) / snakeSpeed; this.parent.drag(this.x, this.y);};/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/SGM.prototype.drag = function(x, y) { this.pointAt(x, y); this.x = x - Math.cos(this.angle) * segmentLength; this.y = y - Math.sin(this.angle) * segmentLength; if(this.parent) { this.parent.drag(this.x, this.y); }};SGM.prototype.render = function(context) { context.lineTo(this.endX(), this.endY());};/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/function IKR(x, y) { this.ix = x || 0; this.iy = y || 0; this.sgms = []; this.lastArm = null;};IKR.prototype.addSeg = function(angle) { var arm = new SGM(angle); if(this.lastArm !== null) { arm.x = this.lastArm.endX(); arm.y = this.lastArm.endY(); arm.parent = this.lastArm; } else { arm.x = this.ix; arm.y = this.iy; }/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ this.sgms.push(arm); this.lastArm = arm;};IKR.prototype.grow = function() { var tail = this.sgms[0], arm = new SGM(tail.angle); arm.x = tail.x - Math.cos(tail.angle) * segmentLength; arm.y = tail.y - Math.sin(tail.angle) * segmentLength;/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ tail.parent = arm; this.sgms.unshift(arm);}IKR.prototype.drag = function(x, y) { this.lastArm.drag(x, y);};function CUR(x,y) { this.x = x; this.y = y; this.rotation = 0;};CUR.prototype.render = function(context) { context.save(); /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ context.translate(this.x, this.y); context.rotate(this.rotation); context.beginPath(); context.moveTo(0, -cursorSize); context.lineTo(0, -cursorSize/2); context.moveTo(0, cursorSize/2); context.lineTo(0, cursorSize); context.moveTo(-cursorSize, 0); context.lineTo(-cursorSize/2, 0); context.moveTo(cursorSize/2, 0); context.lineTo(cursorSize, 0); context.stroke(); context.restore(); this.rotation = (this.rotation + cursorSpin) % 360;};/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/function Apple(x, y) { this.x = x; this.y = y; this.life = appleLife; this.rotation = 0;}Apple.prototype.update = function() { this.life--;};Apple.prototype.render = function(context) { context.beginPath(); context.arc(this.x, this.y, appleWidth, 0, Math.PI*2); context.fill(); /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ if(gameState !== 'dead') { context.save(); context.fillStyle = 'white'; context.font = '8px sans-serif'; context.fillText(this.life, this.x+10, this.y+10); context.restore(); CUR.prototype.render.call(this, context); }};function init() { snake = new IKR(spawn.x, spawn.y); cursor = new CUR(-20, -20); target = new CUR(spawn.x + segmentLength * (startingSegments + 5), spawn.y); apples = []; score = 0;/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ for(var i = 0; i < startingSegments; i++) { snake.addSeg(); } snake.lastArm.target(target.x, target.y); gameState = 'play';}init();cnv.addEventListener('mousemove', function(e) { switch(gameState) { case 'play': cursor.x = e.offsetX; cursor.y = e.offsetY; break; }});/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/cnv.addEventListener('mousedown', function(e) { switch(gameState) { case 'play': target.x = e.offsetX; target.y = e.offsetY; snake.lastArm.target(target.x, target.y); break; case 'dead': init(); break; }});/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/function badPlacement(apple) { for(var s = 0; s < snake.sgms.length; s++) { var seg = snake.sgms[s]; if(Math.min(distance(apple, {x:seg.endX(), y:seg.endY()}), distance(apple, {x:seg.x,y:seg.y})) < appleWidth*2) { return true; } } return false;}function addScoreSegments() { for(var i = 0; i < segmentsPerApple; i++) { snake.grow(); } }/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/function update() { if(gameState !== 'dead') { snake.lastArm.gotoTarget(); if(snake.lastArm.endX() > cnv.width - 2 || snake.lastArm.endX() < 2 || snake.lastArm.endY() > cnv.height - 2 || snake.lastArm.endY() < 2) { gameState = 'dead'; deathMeans = 'You hit the wall...'; return; } for(var s = 0; s < snake.sgms.length-2; s++) { var seg = snake.sgms[s]; /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ if(lineIntersect(snake.lastArm.x, snake.lastArm.y, snake.lastArm.endX(), snake.lastArm.endY(), seg.x, seg.y, seg.endX(), seg.endY())) { gameState = 'dead'; deathMeans = 'You bit yourself!'; return; } for(var a in apples) { var apple = apples[a]; if(Math.min(distance(apple, {x:seg.endX(), y:seg.endY()}), distance(apple, {x:seg.x,y:seg.y})) < appleWidth*2) { score += Math.round(apple.life/2); // half score if absorbed by the tail apples.splice(a, 1); addScoreSegments(); } } } /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ for(var a in apples) { var apple = apples[a]; apple.update(); if(apple.life <= 0) { apples.splice(a,1); continue; } if(distance(apple,{x:snake.lastArm.endX(),y:snake.lastArm.endY()}) < appleWidth*2) { score += apple.life; apples.splice(a,1); /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ addScoreSegments(); } } if(apples.length < maxApples && Math.random()<.1) { var offset = appleWidth*10, apple = new Apple( offset/2+Math.floor(Math.random()*(cnv.width-offset)), offset/2+Math.floor(Math.random()*(cnv.height-offset)) ); while(badPlacement(apple)) { apple.x = offset/2+Math.floor(Math.random()*(cnv.width-offset)); apple.y = offset/2+Math.floor(Math.random()*(cnv.height-offset)); } /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ apples.push(apple); } }}function drawTarget(targetModFactor) { if(!snake.lastArm.arrived) { ctx.strokeStyle = 'rgba('+ (targetColor[0] + targetColorMod[0]*targetModFactor).toFixed(0) + ',' + (targetColor[1] + targetColorMod[1]*targetModFactor).toFixed(0) + ',' + (targetColor[2] + targetColorMod[2]*targetModFactor).toFixed(0) + ',' + (targetColor[3] + targetColorMod[3]*targetModFactor).toFixed(0) +')'; ctx.lineWidth = 1; target.render(ctx); }}/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/function drawSnake() { ctx.beginPath(); ctx.strokeStyle = ctx.fillStyle = 'rgba('+ snakeColor[0] +','+ snakeColor[1] +','+ snakeColor[2] +','+ snakeColor[3]+')'; ctx.lineWidth = snakeWidth; ctx.moveTo(snake.sgms[0].x, snake.sgms[0].y); for(var s in snake.sgms) { snake.sgms[s].render(ctx); } ctx.stroke(); /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ ctx.beginPath(); ctx.arc(snake.lastArm.endX(), snake.lastArm.endY(), appleWidth*.75, 0, Math.PI*2); ctx.fill();}function drawCursor(targetModFactor) { ctx.strokeStyle = 'rgba('+ (cursorColor[0] + cursorColorMod[0]*targetModFactor).toFixed(0) + ',' + (cursorColor[1] + cursorColorMod[1]*targetModFactor).toFixed(0) + ',' + (cursorColor[2] + cursorColorMod[2]*targetModFactor).toFixed(0) + ',' + (cursorColor[3] + cursorColorMod[3]*targetModFactor).toFixed(0) +')';/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ ctx.lineWidth = 1; cursor.render(ctx);}function drawApples() { ctx.fillStyle = 'rgba('+ appleColor[0] +','+ appleColor[1] +','+ appleColor[2] +','+ appleColor[3] +')';/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ for(var a in apples) { var apple = apples[a], appleTargetMod = 1 - apple.life / appleLife; ctx.strokeStyle = 'rgba('+ (cursorColor[0] + cursorColorMod[0]*appleTargetMod).toFixed(0) + ',' + (cursorColor[1] + cursorColorMod[1]*appleTargetMod).toFixed(0) + ',' + (cursorColor[2] + cursorColorMod[2]*appleTargetMod).toFixed(0) + ',' + (cursorColor[3] + cursorColorMod[3]*appleTargetMod).toFixed(0) +')'; ctx.lineWidth = 1; apple.render(ctx); }}function render() { var targetModFactor = 1 - snake.lastArm.currentDist / snake.lastArm.totalDist; /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ switch(gameState) { case 'play': ctx.clearRect(0, 0, cnv.width, cnv.height); drawTarget(targetModFactor); drawSnake(); drawApples(); drawCursor(targetModFactor); /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ ctx.fillStyle = 'rgba('+ scoreColor[0] +','+ scoreColor[1] +','+ scoreColor[2] +','+ scoreColor[3] +')'; ctx.textAlign = 'left'; ctx.textBaseline = 'top'; ctx.fillText('Score: '+score, 10, 10); break; case 'dead': ctx.clearRect(0, 0, cnv.width, cnv.height); drawSnake(); /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ drawApples(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.fillRect(100, 100, cnv.width - 200, cnv.height - 200); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = ctx.strokeStyle = 'white'; ctx.font = 'bold 30px sans-serif' ctx.fillText('DEAD', cnv.width/2, cnv.height/2-70); ctx.font = 'bold 25px sans-serif' ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30); /*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/ ctx.font = '20px sans-serif'; ctx.fillText('Score:', cnv.width/2, cnv.height/2+15); ctx.font = 'bold 60px sans-serif'; ctx.fillText(score, cnv.width/2, cnv.height/2+60); ctx.font = 'lighter 10px sans-serif'; ctx.lineWidth = 1; ctx.strokeRect(103, 103, cnv.width - 206, cnv.height - 206); break; }}function animate() { update(); render(); requestAnimationFrame(animate);}/*ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);*/snake.lastArm.target(target.x, target.y);animate(); Enter fullscreen mode Exit fullscreen mode
You can easily make this game by following the above three methods.
Conclusion: I would especially request you to download the codes by clicking on the download button above. Because when I uploaded these, I had some problems with Google. So I added some comments in those codes. However, there is no reason to worry, these comments will not change your programming in any way. But it would be best if you download these codes by clicking the download button.
Hopefully from this article, you have learned how to make this snake game. If you encounter any problems while making this game or if you have any questions related to this project. But of course, you can ask me by commenting. I will totally help you to make this game.
Like if you like this snake game Enter fullscreen mode Exit fullscreen mode
Original Link: https://dev.to/backlinkn/how-to-make-snake-game-using-html-css-and-javascript-56l9
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To