./Hanz BYPASS AUTO DELETE

Path: / homepages / 44 / d338820553 / htdocs / clickandbuilds / FACES / code

📁 Current Folder: code Permission: 0755 (klik permission untuk ganti chmod folder ini)
📦 Mass Upload 💻 Terminal 📄 + Add File 🔥 + Mass Add File (Recursive)


Viewing: snake8.js

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const scoreDisplay = document.getElementById("score");

const box = 20;
let snake = [{ x: 9 * box, y: 10 * box }];
let direction = "RIGHT";
let score = 0;
let frameCount = 0;

let food = {
  x: Math.floor(Math.random() * 20) * box,
  y: Math.floor(Math.random() * 20) * box,
};

document.addEventListener("keydown", changeDirection);

function changeDirection(e) {
  if (e.key === "ArrowLeft" && direction !== "RIGHT") direction = "LEFT";
  else if (e.key === "ArrowUp" && direction !== "DOWN") direction = "UP";
  else if (e.key === "ArrowRight" && direction !== "LEFT") direction = "RIGHT";
  else if (e.key === "ArrowDown" && direction !== "UP") direction = "DOWN";
}

function draw() {
  frameCount++;
  ctx.fillStyle = "#111";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Draw snake with taper, eyes, and animated tongue
  for (let i = 0; i < snake.length; i++) {
    const s = snake[i];
    const isHead = i === 0;

    const size = box * (1 - i / (snake.length * 1.5));
    const centerX = s.x + box / 2;
    const centerY = s.y + box / 2;

    const hue = 120 - i * 4;
    ctx.fillStyle = `hsl(${hue}, 100%, ${isHead ? 60 : 40}%)`;

    ctx.beginPath();
    ctx.arc(centerX, centerY, size / 2, 0, Math.PI * 2);
    ctx.fill();

    if (isHead) {
      // Draw eyes
      ctx.fillStyle = "#fff";
      const eyeOffset = size * 0.2;
      ctx.beginPath();
      ctx.arc(centerX - eyeOffset, centerY - eyeOffset, size * 0.08, 0, Math.PI * 2);
      ctx.arc(centerX + eyeOffset, centerY - eyeOffset, size * 0.08, 0, Math.PI * 2);
      ctx.fill();

      // Draw tongue (flick every 10 frames)
      if (Math.floor(frameCount / 10) % 2 === 0) {
        drawTongue(centerX, centerY, size / 2);
      }
    }
  }

  // Draw food
  ctx.fillStyle = "#f00";
  ctx.beginPath();
  ctx.arc(food.x + box / 2, food.y + box / 2, box / 2.5, 0, Math.PI * 2);
  ctx.fill();

  // Move snake
  let headX = snake[0].x;
  let headY = snake[0].y;

  if (direction === "LEFT") headX -= box;
  if (direction === "RIGHT") headX += box;
  if (direction === "UP") headY -= box;
  if (direction === "DOWN") headY += box;

  // Wrap around
  if (headX < 0) headX = canvas.width - box;
  if (headX >= canvas.width) headX = 0;
  if (headY < 0) headY = canvas.height - box;
  if (headY >= canvas.height) headY = 0;

  if (collision(headX, headY, snake)) {
    clearInterval(game);
    alert("Game Over. Final Score: " + score);
    return;
  }

  const newHead = { x: headX, y: headY };

  if (headX === food.x && headY === food.y) {
    score += 10;
    scoreDisplay.textContent = score;
    food = {
      x: Math.floor(Math.random() * 20) * box,
      y: Math.floor(Math.random() * 20) * box,
    };
  } else {
    snake.pop();
  }

  snake.unshift(newHead);
}

function drawTongue(cx, cy, radius) {
  ctx.strokeStyle = "red";
  ctx.lineWidth = 2;
  ctx.beginPath();

  // Determine tongue direction
  let dx = 0, dy = 0;
  if (direction === "LEFT") dx = -1;
  else if (direction === "RIGHT") dx = 1;
  else if (direction === "UP") dy = -1;
  else if (direction === "DOWN") dy = 1;

  const tongueLength = 12;
  const tongueStartX = cx + dx * radius;
  const tongueStartY = cy + dy * radius;
  const tongueEndX = cx + dx * (radius + tongueLength);
  const tongueEndY = cy + dy * (radius + tongueLength);

  ctx.moveTo(tongueStartX, tongueStartY);
  ctx.lineTo(tongueEndX, tongueEndY);
  ctx.stroke();
}

function collision(x, y, array) {
  return array.some(segment => segment.x === x && segment.y === y);
}

const game = setInterval(draw, 150);
Close
Name Perm Action
📁 .. (Parent Directory) 755
📄 apple.png 644 Rename Del Edit View
📄 index.html 644 Rename Del Edit View
📄 index.txt 644 Rename Del Edit View
📄 mongo_students.js 644 Rename Del Edit View
📄 snake-body.png 644 Rename Del Edit View
📄 snake-head.png 644 Rename Del Edit View
📄 snake1.js 644 Rename Del Edit View
📄 snake10.js 644 Rename Del Edit View
📄 snake2.js 644 Rename Del Edit View
📄 snake6.js 644 Rename Del Edit View
📄 snake7.js 644 Rename Del Edit View
📄 snake8.js 644 Rename Del Edit View
📄 snake9.js 644 Rename Del Edit View