| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Flappy Bird with Hand Tracking</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: linear-gradient(135deg, #74ebd5, #acb6e5);
|
| color: white;
|
| display: flex;
|
| flex-direction: column;
|
| justify-content: center;
|
| align-items: center;
|
| height: 100vh;
|
| overflow: hidden;
|
| }
|
|
|
| .header {
|
| width: 100%;
|
| background-color: rgba(0, 0, 0, 0.7);
|
| padding: 10px 0;
|
| text-align: center;
|
| position: fixed;
|
| top: 0;
|
| z-index: 100;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| padding: 0 20px;
|
| box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
|
| }
|
|
|
| .header div {
|
| color: white;
|
| font-size: 18px;
|
| font-weight: bold;
|
| }
|
|
|
| .game-container {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| width: 100%;
|
| height: 100%;
|
| padding-top: 70px;
|
| }
|
|
|
| canvas {
|
| border: 2px solid #fff;
|
| border-radius: 10px;
|
| background: #222;
|
| max-width: 90%;
|
| max-height: 70%;
|
| width: auto;
|
| height: auto;
|
| }
|
|
|
| video {
|
| display: none;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="header">
|
| <div id="score">Score: 0</div>
|
| <div id="timer">Time: 60</div>
|
| </div>
|
|
|
| <div class="game-container">
|
| <canvas id="gameCanvas" width="500" height="500"></canvas>
|
| </div>
|
|
|
| <video id="webcam" autoplay playsinline></video>
|
|
|
| <script>
|
| const canvas = document.getElementById('gameCanvas');
|
| const ctx = canvas.getContext('2d');
|
| const scoreDisplay = document.getElementById('score');
|
| const timerDisplay = document.getElementById('timer');
|
|
|
| let bird = {
|
| x: 50,
|
| y: canvas.height / 2,
|
| radius: 15,
|
| dy: 0,
|
| gravity: 0.6,
|
| lift: -10,
|
| color: 'yellow',
|
| };
|
|
|
| let pipes = [];
|
| let score = 0;
|
| let timeLeft = 60;
|
| let gameOver = false;
|
|
|
|
|
| function drawBird() {
|
| ctx.beginPath();
|
| ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
|
| ctx.fillStyle = bird.color;
|
| ctx.fill();
|
| ctx.closePath();
|
| }
|
|
|
|
|
| function drawPipes() {
|
| ctx.fillStyle = 'green';
|
| pipes.forEach(pipe => {
|
| ctx.fillRect(pipe.x, 0, pipe.width, pipe.top);
|
| ctx.fillRect(pipe.x, canvas.height - pipe.bottom, pipe.width, pipe.bottom);
|
| });
|
| }
|
|
|
|
|
| function updateBird() {
|
| bird.dy += bird.gravity;
|
| bird.y += bird.dy;
|
|
|
|
|
| if (bird.y + bird.radius > canvas.height) {
|
| bird.y = canvas.height - bird.radius;
|
| bird.dy = 0;
|
| }
|
| if (bird.y - bird.radius < 0) {
|
| bird.y = bird.radius;
|
| bird.dy = 0;
|
| }
|
| }
|
|
|
|
|
| function updatePipes() {
|
| if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - 200) {
|
| const gap = 100;
|
| const top = Math.random() * (canvas.height - gap - 100) + 50;
|
| const bottom = canvas.height - top - gap;
|
| pipes.push({ x: canvas.width, width: 50, top, bottom });
|
| }
|
|
|
| pipes.forEach(pipe => {
|
| pipe.x -= 2;
|
|
|
|
|
| if (
|
| bird.x + bird.radius > pipe.x &&
|
| bird.x - bird.radius < pipe.x + pipe.width &&
|
| (bird.y - bird.radius < pipe.top || bird.y + bird.radius > canvas.height - pipe.bottom)
|
| ) {
|
| gameOver = true;
|
| }
|
|
|
|
|
| if (pipe.x + pipe.width < bird.x - bird.radius && !pipe.passed) {
|
| score++;
|
| pipe.passed = true;
|
| }
|
| });
|
|
|
|
|
| pipes = pipes.filter(pipe => pipe.x + pipe.width > 0);
|
| }
|
|
|
|
|
| function startTimer() {
|
| const timerInterval = setInterval(() => {
|
| if (timeLeft > 0 && !gameOver) {
|
| timeLeft--;
|
| timerDisplay.textContent = `Time: ${timeLeft}`;
|
| } else {
|
| clearInterval(timerInterval);
|
| if (gameOver) {
|
| alert(`Game Over! Your score is ${score}`);
|
| } else {
|
| alert(`Time's up! Your score is ${score}`);
|
| }
|
| document.location.reload();
|
| }
|
| }, 1000);
|
| }
|
|
|
|
|
| function gameLoop() {
|
| if (gameOver) return;
|
|
|
| ctx.clearRect(0, 0, canvas.width, canvas.height);
|
| drawBird();
|
| drawPipes();
|
| updateBird();
|
| updatePipes();
|
| scoreDisplay.textContent = `Score: ${score}`;
|
| requestAnimationFrame(gameLoop);
|
| }
|
|
|
|
|
| const hands = new Hands({
|
| locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,
|
| });
|
|
|
| hands.setOptions({
|
| maxNumHands: 1,
|
| modelComplexity: 1,
|
| minDetectionConfidence: 0.7,
|
| minTrackingConfidence: 0.7,
|
| });
|
|
|
| const videoElement = document.getElementById('webcam');
|
| const camera = new Camera(videoElement, {
|
| onFrame: async () => {
|
| await hands.send({ image: videoElement });
|
| },
|
| width: 640,
|
| height: 480,
|
| });
|
| camera.start();
|
|
|
| hands.onResults((results) => {
|
| if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
|
| const landmarks = results.multiHandLandmarks[0];
|
| const indexFinger = landmarks[8];
|
|
|
|
|
| if (indexFinger.y * canvas.height < bird.y) {
|
| bird.dy = bird.lift;
|
| }
|
| }
|
| });
|
|
|
| startTimer();
|
| gameLoop();
|
| </script>
|
| </body>
|
| </html> |
