<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
canvas {
background-color: #000;
border: 1px solid #fff;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scale = 20;
const rows = canvas.height / scale;
const columns = canvas.width / scale;
let snake;
let food;
(function setup() {
snake = new Snake();
food = new Food();
food.pickLocation();
window.setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snake.update();
snake.draw();
if (snake.eat(food)) {
food.pickLocation();
}
food.draw();
snake.checkCollision();
}, 100);
})();
window.addEventListener('keydown', evt => {
const direction = evt.key.replace('Arrow', '');
snake.changeDirection(direction);
});
function Snake() {
this.x = 0;
this.y = 0;
this.xSpeed = scale * 1;
this.ySpeed = 0;
this.total = 0;
this.tail = [];
this.draw = function() {
ctx.fillStyle = "#FFF";
for (let i = 0; i < this.tail.length; i++) {
ctx.fillRect(this.tail[i].x, this.tail[i].y, scale, scale);
}
ctx.fillRect(this.x, this.y, scale, scale);
};
this.update = function() {
for (let i = 0; i < this.tail.length - 1; i++) {
this.tail[i] = this.tail[i + 1];
}
this.tail[this.total - 1] = { x: this.x, y: this.y };
this.x += this.xSpeed;
this.y += this.ySpeed;
if (this.x >= canvas.width) {
this.x = 0;
}
if (this.y >= canvas.height) {
this.y = 0;
}
if (this.x < 0) {
this.x = canvas.width - scale;
}
if (this.y < 0) {
this.y = canvas.height - scale;
}
};
this.changeDirection = function(direction) {
switch (direction) {
case 'Up':
if (this.ySpeed === 0) {
this.xSpeed = 0;
this.ySpeed = -scale * 1;
}
break;
case 'Down':
if (this.ySpeed === 0) {
this.xSpeed = 0;
this.ySpeed = scale * 1;
}
break;
case 'Left':
if (this.xSpeed === 0) {
this.xSpeed = -scale * 1;
this.ySpeed = 0;
}
break;
case 'Right':
if (this.xSpeed === 0) {
this.xSpeed = scale * 1;
this.ySpeed = 0;
}
break;
}
};
this.eat = function(food) {
if (this.x === food.x && this.y === food.y) {
this.total++;
return true;
}
return false;
};
this.checkCollision = function() {
for (let i = 0; i < this.tail.length; i++) {
if (this.x === this.tail[i].x && this.y === this.tail[i].y) {
this.total = 0;
this.tail = [];
}
}
};
}
function Food() {
this.x;
this.y;
this.pickLocation = function() {
this.x = Math.floor(Math.random() * rows) * scale;
this.y = Math.floor(Math.random() * columns) * scale;
};
this.draw = function() {
ctx.fillStyle = "#F00";
ctx.fillRect(this.x, this.y, scale, scale);
};
}
</script>
</body>
</html>
Guja
-
Guja
Snake Game
