percobaan game 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snake Xenzia</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
canvas {
background-color: #000;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>Snake Xenzia</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const box = 20;
let snake = [{x: 9 * box, y: 10 * box}];
let direction = null;
let food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 3) * box
};
let score = 0;
document.addEventListener('keydown', setDirection);
function setDirection(event) {
if (event.keyCode == 37 && direction != 'RIGHT') {
direction = 'LEFT';
} else if (event.keyCode == 38 && direction != 'DOWN') {
direction = 'UP';
} else if (event.keyCode == 39 && direction != 'LEFT') {
direction = 'RIGHT';
} else if (event.keyCode == 40 && direction != 'UP') {
direction = 'DOWN';
}
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x == array[i].x && head.y == array[i].y) {
return true;
}
}
return false;
}
function drawGame() {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = (i == 0) ? 'green' : 'white';
ctx.fillRect(snake[i].x, snake[i].y, box, box);
ctx.strokeStyle = 'red';
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction == 'LEFT') snakeX -= box;
if (direction == 'UP') snakeY -= box;
if (direction == 'RIGHT') snakeX += box;
if (direction == 'DOWN') snakeY += box;
if (snakeX == food.x && snakeY == food.y) {
score++;
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 3) * box
};
} else {
snake.pop();
}
let newHead = {
x: snakeX,
y: snakeY
};
if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(game);
alert('Game Over');
}
snake.unshift(newHead);
ctx.fillStyle = 'white';
ctx.font = '45px Changa one';
ctx.fillText(score, 2 * box, 1.6 * box);
}
let game = setInterval(drawGame, 100);
</script>
</body>
</html>
Komentar
Posting Komentar