|
|
<!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>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
body {
|
|
|
font-family: Arial, sans-serif;
|
|
|
background-color: black;
|
|
|
color: white;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
height: 100vh;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.game-container {
|
|
|
position: relative;
|
|
|
width: 90%;
|
|
|
max-width: 600px;
|
|
|
aspect-ratio: 3 / 2;
|
|
|
background-color: #111;
|
|
|
border: 2px solid #00ff00;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
canvas {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
#pointer {
|
|
|
position: absolute;
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
background-color: rgba(255, 0, 0, 0.8);
|
|
|
border-radius: 50%;
|
|
|
pointer-events: none;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
.timer {
|
|
|
position: fixed;
|
|
|
top: 10px;
|
|
|
left: 10px;
|
|
|
font-size: 18px;
|
|
|
color: white;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
.score {
|
|
|
position: fixed;
|
|
|
top: 10px;
|
|
|
right: 10px;
|
|
|
font-size: 18px;
|
|
|
color: white;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
.popup {
|
|
|
position: fixed;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
background-color: #222;
|
|
|
color: white;
|
|
|
padding: 20px;
|
|
|
border: 2px solid #00ff00;
|
|
|
border-radius: 10px;
|
|
|
z-index: 10;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.popup button {
|
|
|
margin-top: 10px;
|
|
|
padding: 10px 20px;
|
|
|
background-color: #00ff00;
|
|
|
border: none;
|
|
|
border-radius: 5px;
|
|
|
cursor: pointer;
|
|
|
color: black;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
.popup button:hover {
|
|
|
background-color: #00cc00;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="timer" id="timer">Time: 0:00</div>
|
|
|
<div class="score" id="score">Score: 0</div>
|
|
|
<div class="game-container">
|
|
|
<canvas id="gameCanvas"></canvas>
|
|
|
<div id="pointer"></div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
const canvas = document.getElementById('gameCanvas');
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
const pointer = document.getElementById('pointer');
|
|
|
const timerDisplay = document.getElementById('timer');
|
|
|
const scoreDisplay = document.getElementById('score');
|
|
|
|
|
|
canvas.width = canvas.parentElement.clientWidth;
|
|
|
canvas.height = canvas.parentElement.clientHeight;
|
|
|
|
|
|
let snake = [{ x: 150, y: 150 }];
|
|
|
const snakeSize = 20;
|
|
|
let food = { x: Math.random() * (canvas.width - snakeSize), y: Math.random() * (canvas.height - snakeSize) };
|
|
|
let score = 0;
|
|
|
let timeLeft = 60;
|
|
|
let gameInterval, timerInterval;
|
|
|
|
|
|
|
|
|
const hands = new Hands({
|
|
|
locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,
|
|
|
});
|
|
|
|
|
|
hands.setOptions({
|
|
|
maxNumHands: 1,
|
|
|
modelComplexity: 1,
|
|
|
minDetectionConfidence: 0.8,
|
|
|
minTrackingConfidence: 0.8,
|
|
|
});
|
|
|
|
|
|
const videoElement = document.createElement('video');
|
|
|
const camera = new Camera(videoElement, {
|
|
|
onFrame: async () => {
|
|
|
await hands.send({ image: videoElement });
|
|
|
},
|
|
|
width: 1280,
|
|
|
height: 720,
|
|
|
});
|
|
|
camera.start();
|
|
|
|
|
|
hands.onResults((results) => {
|
|
|
if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
|
|
|
const landmarks = results.multiHandLandmarks[0];
|
|
|
const pointerX = landmarks[8].x * canvas.width;
|
|
|
const pointerY = landmarks[8].y * canvas.height;
|
|
|
|
|
|
pointer.style.left = `${pointerX}px`;
|
|
|
pointer.style.top = `${pointerY}px`;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
function drawSnake() {
|
|
|
ctx.fillStyle = 'green';
|
|
|
snake.forEach((segment) => {
|
|
|
ctx.fillRect(segment.x, segment.y, snakeSize, snakeSize);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function drawFood() {
|
|
|
ctx.fillStyle = 'red';
|
|
|
ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
|
|
|
}
|
|
|
|
|
|
function moveSnake() {
|
|
|
const head = { x: snake[0].x, y: snake[0].y };
|
|
|
head.x += (pointer.offsetLeft - head.x) * 0.1;
|
|
|
head.y += (pointer.offsetTop - head.y) * 0.1;
|
|
|
|
|
|
snake.unshift(head);
|
|
|
if (
|
|
|
Math.abs(head.x - food.x) < snakeSize &&
|
|
|
Math.abs(head.y - food.y) < snakeSize
|
|
|
) {
|
|
|
score += 10;
|
|
|
food = { x: Math.random() * (canvas.width - snakeSize), y: Math.random() * (canvas.height - snakeSize) };
|
|
|
} else {
|
|
|
snake.pop();
|
|
|
}
|
|
|
|
|
|
if (
|
|
|
head.x < 0 ||
|
|
|
head.x > canvas.width ||
|
|
|
head.y < 0 ||
|
|
|
head.y > canvas.height ||
|
|
|
snake.some((segment, index) => index !== 0 && head.x === segment.x && head.y === segment.y)
|
|
|
) {
|
|
|
endGame();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function updateTimer() {
|
|
|
if (timeLeft <= 0) {
|
|
|
endGame();
|
|
|
} else {
|
|
|
timeLeft--;
|
|
|
const minutes = Math.floor(timeLeft / 60);
|
|
|
const seconds = timeLeft % 60;
|
|
|
timerDisplay.textContent = `Time: ${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function endGame() {
|
|
|
clearInterval(gameInterval);
|
|
|
clearInterval(timerInterval);
|
|
|
const popup = document.createElement('div');
|
|
|
popup.classList.add('popup');
|
|
|
popup.innerHTML = `<h2>Game Over</h2><p>Your Score: ${score}</p><button onclick="restartGame()">Restart</button>`;
|
|
|
document.body.appendChild(popup);
|
|
|
}
|
|
|
|
|
|
function restartGame() {
|
|
|
document.location.reload();
|
|
|
}
|
|
|
|
|
|
function gameLoop() {
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
drawSnake();
|
|
|
drawFood();
|
|
|
moveSnake();
|
|
|
scoreDisplay.textContent = `Score: ${score}`;
|
|
|
}
|
|
|
|
|
|
gameInterval = setInterval(gameLoop, 100);
|
|
|
timerInterval = setInterval(updateTimer, 1000);
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
