-
Player 1 uses W, A, S, D keys to control their snake (blue).
-
Player 2 uses U, H, J, K keys to control their snake (red).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Two-Player Snake Game</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; } #gameCanvas { border: 2px solid #333; } #scoreBoard { position: absolute; top: 10px; left: 10px; font-size: 18px; } </style> </head> <body>Player 1 Score: 0Player 2 Score: 0<script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const gridSize = 20; const tileCount = canvas.width / gridSize; let snake1 = [ {x: 10, y: 10}, {x: 9, y: 10}, {x: 8, y: 10} ]; let snake2 = [ {x: 30, y: 30}, {x: 31, y: 30}, {x: 32, y: 30} ]; let dx1 = 1; let dy1 = 0; let dx2 = -1; let dy2 = 0; let food = getRandomFood(); let score1 = 0; let score2 = 0; function getRandomFood() { return { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) }; } function drawGame() { clearCanvas(); moveSnake(snake1, dx1, dy1); moveSnake(snake2, dx2, dy2); checkCollision(); drawFood(); drawSnake(snake1, '#00f'); drawSnake(snake2, '#f00'); updateScore(); } function clearCanvas() { ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); } function moveSnake(snake, dx, dy) { const head = {x: snake[0].x + dx, y: snake[0].y + dy}; snake.unshift(head); if (head.x === food.x && head.y === food.y) { food = getRandomFood(); if (snake === snake1) score1++; else score2++; } else { snake.pop(); } } function checkCollision() { const head1 = snake1[0]; const head2 = snake2[0]; // Check wall collision if (head1.x < 0 || head1.x >= tileCount || head1.y < 0 || head1.y >= tileCount) gameOver(); if (head2.x < 0 || head2.x >= tileCount || head2.y < 0 || head2.y >= tileCount) gameOver(); // Check self-collision for (let i = 1; i < snake1.length; i++) { if (head1.x === snake1[i].x && head1.y === snake1[i].y) gameOver(); } for (let i = 1; i < snake2.length; i++) { if (head2.x === snake2[i].x && head2.y === snake2[i].y) gameOver(); } // Check collision between snakes for (let part of snake2) { if (head1.x === part.x && head1.y === part.y) gameOver(); } for (let part of snake1) { if (head2.x === part.x && head2.y === part.y) gameOver(); } } function drawFood() { ctx.fillStyle = 'green'; ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize); } function drawSnake(snake, color) { ctx.fillStyle = color; for (let part of snake) { ctx.fillRect(part.x * gridSize, part.y * gridSize, gridSize, gridSize); } } function updateScore() { document.getElementById('score1').textContent = score1; document.getElementById('score2').textContent = score2; } function gameOver() { alert('Game Over! Scores: Player 1 - ' + score1 + ', Player 2 - ' + score2); resetGame(); } function resetGame() { snake1 = [{x: 10, y: 10}, {x: 9, y: 10}, {x: 8, y: 10}]; snake2 = [{x: 30, y: 30}, {x: 31, y: 30}, {x: 32, y: 30}]; dx1 = 1; dy1 = 0; dx2 = -1; dy2 = 0; food = getRandomFood(); score1 = 0; score2 = 0; } document.addEventListener('keydown', (e) => { switch(e.key) { case 'w': if (dy1 === 0) { dx1 = 0; dy1 = -1; } break; case 's': if (dy1 === 0) { dx1 = 0; dy1 = 1; } break; case 'a': if (dx1 === 0) { dx1 = -1; dy1 = 0; } break; case 'd': if (dx1 === 0) { dx1 = 1; dy1 = 0; } break; case 'u': if (dy2 === 0) { dx2 = 0; dy2 = -1; } break; case 'j': if (dy2 === 0) { dx2 = 0; dy2 = 1; } break; case 'h': if (dx2 === 0) { dx2 = -1; dy2 = 0; } break; case 'k': if (dx2 === 0) { dx2 = 1; dy2 = 0; } break; } }); setInterval(drawGame, 150); </script>
双人贪吃蛇 HTML5 版
试剂界的爱马仕2024-10-14 8:20
相关推荐
cxr82815 小时前
SPARC方法论在Claude Code基于规则驱动开发中的应用风中的微尘15 小时前
39.网络流入门研梦非凡15 小时前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换前端君16 小时前
实现最大异步并发执行队列幂简集成16 小时前
Realtime API 语音代理端到端接入全流程教程(含 Demo,延迟 280ms)龙腾-虎跃16 小时前
FreeSWITCH FunASR语音识别模块智慧地球(AI·Earth)16 小时前
给AI配一台手机+电脑?智谱AutoGLM上线!Godspeed Zhao16 小时前
自动驾驶中的传感器技术46——Radar(7)西红柿维生素16 小时前
JVM相关总结limengshi13839217 小时前
机器学习面试:请介绍几种常用的学习率衰减方式