Skip to content

Instantly share code, notes, and snippets.

@ayaysir

ayaysir/snake.html

Created Nov 26, 2020
Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
</head>
<body>
<canvas id="game-canvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById("game-canvas")
const ctx = canvas.getContext("2d")
window.onload = () => {
document.addEventListener("keydown", keyPush)
// 게임 시작시 초당 15fps로 game 함수 호출
setInterval(game, 1000 / 15)
}
// 뱀의 위치
let positionX = 10, positionY = 10
// gridSize: 가로세로 20px , tileCount = 가로세로 20개씩 총 400개의 타일
const gridSize = 20, tileCount = 20
// 뱀이 움직이는 방향을 설정
let velocityX = 0, velocityY = 0
// 사과(먹이) 위치변수
let appleX = 15, appleY = 15
// 뱀의 몸통을 저장하는 배열
const trail = []
// 현재 뱀의 길이
let tailLength = 5
function game() {
// velocity 상황에 따라 positionXY의 위치를 결정
positionX += velocityX
positionY += velocityY
// 뱀 머리가 경계에 있을 떄 처리
if (positionX < 0) {
positionX = tileCount - 1
}
if (positionX > tileCount - 1) {
positionX = 0
}
if (positionY < 0) {
positionY = tileCount - 1
}
if (positionY > tileCount - 1) {
positionY = 0
}
ctx.fillStyle = "black"
ctx.fillRect(0, 0, canvas.width, canvas.height)
// 뱀 그리기
ctx.fillStyle = "lime"
for(let i = 0; i < trail.length; i++) {
// trail 배열만큼 그림
ctx.fillRect(trail[i].x * gridSize, trail[i].y * gridSize, gridSize - 2, gridSize - 2)
// 게임 오버 case 1
if(trail[i].x === positionX && trail[i].y === positionY) {
tail = 5
}
}
// 게임이 진행될 때마다 positionXY를 trail 배열에 삽입
trail.push({
x: positionX,
y: positionY
})
// 단, trail의 크기는 tailLength를 넘지 않게
while(trail.length > tailLength) {
trail.shift()
}
// 사과 먹었을 때
if(appleX === positionX && appleY === positionY) {
tailLength++
appleX = Math.floor(Math.random() * tileCount)
appleY = Math.floor(Math.random() * tileCount)
}
// 사과 그리기
ctx.fillStyle = "red"
ctx.fillRect(appleX * gridSize, appleY * gridSize, gridSize - 2, gridSize - 2)
}
// 방향키 이벤트
function keyPush(evt) {
// arrows keys and it's left and then clockwise
switch (evt.keyCode) {
case 37:
velocityX = -1;
velocityY = 0;
break;
case 38:
velocityX = 0;
velocityY = -1;
break;
case 39:
velocityX = 1;
velocityY = 0;
break;
case 40:
velocityX = 0;
velocityY = 1;
break;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment