Snake Game
How do I make an snake game?
Use arrow keys to move.. What is a snake game? How do you make a snake game? This script and codes were developed by Mihkel on 08 December 2022, Thursday.
Snake Game - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Snake Game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <h4 class="score-wrapper">Score: <span class="score">0</span></h4> <canvas id="canvas"></canvas>
</div> <script src="js/index.js"></script>
</body>
</html>
Snake Game - Script Codes CSS Codes
body { background-color: #333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center;
}
#canvas { margin: 0 auto; display: block; border: 1px solid rgba(0,0,0,0.5);
}
.score-wrapper { margin: 0 auto; margin-top: 3em; font-family: Helvetica, Arial, sans-serif; text-align: left; font-weight: 500; color: #888;
}
Snake Game - Script Codes JS Codes
var CANVAS_W = 640;
var CANVAS_H = 480;
var CELL_W = 10;
var CELL_H = 10;
var ROWS = CANVAS_H / CELL_H;
var CELLS = CANVAS_W / CELL_H;
var FPS = 15;
var EMPTY = 0;
var SNAKE = 1;
var FOOD = 2;
function Canvas() { this.canvas = document.getElementById("canvas"); this.ctx = canvas.getContext("2d"); this.canvas.width = CANVAS_W; this.canvas.height = CANVAS_H;
}
Canvas.prototype.draw = function (x, y) { this.ctx.fillRect(x * CELL_W, y * CELL_H, CELL_W, CELL_H);
};
function Snake() { this.direction = "right"; this.queue = [{ x: 0, y : 0 }];
}
Snake.prototype.add = function (x, y) { this.queue.unshift({ x: x, y: y });
};
Snake.prototype.removeLast = function () { return this.queue.pop();
};
Snake.prototype.first = function () { return this.queue[0];
};
Snake.prototype.reset = function () { this.queue = [{ x: 0, y: 0 }]; this.direction = "right";
}
function Game() { this.grid = []; this.snake = new Snake(); this.canvas = new Canvas(); this.score = 0;
}
Game.prototype.generateGrid = function () { for (var y = 0; y < ROWS; y++) { this.grid[y] = []; for (var x = 0; x < CELLS; x++) { this.grid[y][x] = EMPTY; } }
};
Game.prototype.collision = function (x, y) { if (y < 0 || y >= ROWS || x < 0 || x >= CELLS || this.grid[y][x] === SNAKE ) { return true; } return false;
};
Game.prototype.update = function () { var x = this.snake.queue[0].x; var y = this.snake.queue[0].y; switch (this.snake.direction) { case "top": y--; break; case "right": x++; break; case "bottom": y++; break; case "left": x--; break; } if (this.collision(x, y)) { this.reset(); return 0; } if (this.grid[y][x] === FOOD) { this.setFood(); this.drawScore(++this.score); } else { var last = this.snake.removeLast(); this.grid[last.y][last.x] = EMPTY; } this.grid[y][x] = SNAKE; this.snake.add(x, y);
};
Game.prototype.draw = function () { for (var y = 0; y < ROWS; y++) { for (var x = 0; x < CELLS; x++) { switch (this.grid[y][x]) { case EMPTY: this.canvas.ctx.fillStyle = "#333"; break; case SNAKE: this.canvas.ctx.fillStyle = "#000"; break; case FOOD: this.canvas.ctx.fillStyle = "#fff"; break; } this.canvas.draw(x, y); } }
};
Game.prototype.setFood = function () { var empty = []; for (var y = 0; y < ROWS; y++) { for (var x = 0; x < CELLS; x++) { if (this.grid[y][x] === EMPTY) { empty.push({ x: x, y: y }); } } } var random = empty[Math.floor(Math.random() * empty.length)]; this.grid[random.y][random.x] = FOOD;
};
Game.prototype.drawScore = function () { document.querySelector(".score").innerHTML = this.score;
};
Game.prototype.keydown = function (e) { if ([37, 38, 39, 40].indexOf(e.which) > -1) { e.preventDefault(); } var direction = this.direction; switch (e.which) { case 38: if (direction !== "bottom") direction = "top"; break; case 39: if (direction !== "left") direction = "right"; break; case 40: if (direction !== "top") direction = "bottom"; break; case 37: if (direction !== "right") direction = "left"; break; } this.direction = direction;
};
Game.prototype.init = function () { this.generateGrid(); window.addEventListener("keydown", this.keydown.bind(this.snake)); this.setFood(); game.play();
};
Game.prototype.reset = function () { this.generateGrid(); this.setFood(); this.score = 0; this.drawScore(); this.snake.reset();
};
Game.prototype.play = function () { setTimeout(function () { this.update(); this.draw(); requestAnimationFrame(this.play.bind(this)); }.bind(this), 1000 / FPS);
};
var game = new Game();
game.init();
Developer | Mihkel |
Username | Krokodill |
Uploaded | December 08, 2022 |
Rating | 3 |
Size | 2,941 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
React Weather Broadcast | 6,708 Kb |
Wikipedia Viewer | 3,078 Kb |
Twitch Status 2.0 | 4,245 Kb |
Local Weather | 3,340 Kb |
Game of Life | 2,922 Kb |
Form validation with jQuery | 2,641 Kb |
Mobile navigation bar | 2,549 Kb |
Random Quote Machine | 2,692 Kb |
Dungeon Crawler | 5,057 Kb |
Simon Game | 4,975 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
Experiment | Toddmoy | 2,849 Kb |
Drop Cap | Gsaiki | 1,571 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
About Us | Francescaedits | 1,902 Kb |
Lecture 1 | Law | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!