add javascript snake game v1

juliana-kim · Jun 21, 2024 · baee5d7 · baee5d7
commit baee5d7
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/javascript_snake_game/index.html b/javascript_snake_game/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Snake</title>
+  </head>
+  <body>
+    <canvas id="game-canvas" width="400" height="400"></canvas>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/javascript_snake_game/index.js b/javascript_snake_game/index.js
@@ -0,0 +1,122 @@
+const canvas = document.getElementById("game-canvas");
+const ctx = canvas.getContext("2d");
+
+window.onload = () => {
+  document.addEventListener("keydown", keyPush);
+
+  setInterval(game, 1000 / 10); // fps
+};
+
+let positionX = 0,
+  positionY = 0;
+const gridSize = 20,
+  tileCount = 20;
+
+let velocityX = 0,
+  velocityY = 0;
+
+let appleX = 15;
+appleY = 15;
+
+const trails = [];
+let score = 1;
+
+function drawSnake() {
+  ctx.fillStyle = "lime";
+  trails.forEach((tail) => {
+    ctx.fillRect(
+      tail.x * gridSize,
+      tail.y * gridSize,
+      gridSize - 2, // -2: 구분선 표시
+      gridSize - 2
+    );
+
+    // 뱀이 자신 몸에 부딪히면 게임오버
+    if (tail.x === positionX && tail.y === positionY) {
+      score = 5;
+    }
+  });
+
+  // 게임이 진행될 때마다 positionXY를 trail 배열에 삽입
+  trails.push({
+    x: positionX,
+    y: positionY,
+  });
+  // 단 tails 크기는 tailLength를 넘지 않게
+  while (trails.length > score) {
+    trails.shift();
+  }
+}
+
+function createApple() {
+  // 사과를 먹었을 경우 사과 위치 랜덤으로 생성하기
+  if (appleX === positionX && appleY === positionY) {
+    // 뱀 길이 늘이기
+    score++;
+    // 다음 사과 랜덤 위치 정하기
+    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 game() {
+  // 키를 누른 방향으로 계속 이동
+  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);
+
+  // 뱀 그리기
+  drawSnake();
+
+  // 사과 그리기
+  createApple();
+}
+
+function keyPush(event) {
+  switch (event.keyCode) {
+    case 37: // left
+      velocityX = -1;
+      velocityY = 0;
+      break;
+    case 38: // top
+      velocityX = 0;
+      velocityY = -1;
+      break;
+    case 39: // right
+      velocityX = 1;
+      velocityY = 0;
+      break;
+    case 40: // down
+      velocityX = 0;
+      velocityY = 1;
+      break;
+  }
+}