-
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
相关推荐
遂心_1 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制IT_陈寒1 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%惯导马工1 小时前
【论文导读】ORB-SLAM3:An Accurate Open-Source Library for Visual, Visual-Inertial and王同学QaQ2 小时前
Vue3对接UE,通过MQTT完成通讯Juchecar2 小时前
一文讲清 PyTorch 中反向传播(Backpropagation)的实现原理黎燃2 小时前
游戏NPC的智能行为设计:从规则驱动到强化学习的演进机器之心2 小时前
高阶程序,让AI从技术可行到商业可信的最后一公里martinzh2 小时前
解锁RAG高阶密码:自适应、多模态、个性化技术深度剖析程序员鱼皮2 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大机器之心2 小时前
刚刚,李飞飞空间智能新成果震撼问世!3D世界生成进入「无限探索」时代