\u4fdd\u5b58\u4ee3\u7801\u4e3ahtml\u6587\u4ef6，\u53cc\u51fb\u6253\u5f00\u5373\u53ef<\/p>\n
<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n <meta charset="UTF-8">
\n <meta name="viewport" content="width=device-width, initial-scale=1.0">
\n <title>\u73b0\u4ee3\u8d2a\u5403\u86c7 | Snake Game<\/title>
\n <script src="https:\/\/cdn.tailwindcss.com"><\/script>
\n <link href="https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css" rel="stylesheet"><\/p>\n
<script>
\n tailwind.config = {
\n theme: {
\n extend: {
\n colors: {
\n primary: '#4ADE80', \/\/ \u86c7\u7684\u989c\u8272-\u7eff\u8272
\n secondary: '#EF4444', \/\/ \u98df\u7269\u989c\u8272-\u7ea2\u8272
\n dark: '#1E293B',
\n light: '#F8FAFC'
\n },
\n fontFamily: {
\n game: ['"Press Start 2P"', 'cursive', 'sans-serif'],
\n sans: ['Inter', 'system-ui', 'sans-serif']
\n },
\n }
\n }
\n }
\n <\/script><\/p>\n
<style type="text\/tailwindcss">
\n @layer utilities {
\n .game-shadow {
\n box-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
\n }
\n .btn-hover {
\n @apply transition-all duration-200 hover:scale-105 active:scale-95;
\n }
\n .control-btn {
\n @apply w-14 h-14 md:w-16 md:h-16 rounded-lg bg-dark flex items-center justify-center text-light text-xl md:text-2xl btn-hover;
\n }
\n }<\/p>\n
\/* \u5f15\u5165\u6e38\u620f\u98ce\u683c\u5b57\u4f53 *\/
\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap');
\n <\/style>
\n<\/head>
\n<body class="bg-gradient-to-br from-dark to-slate-800 min-h-screen text-light flex flex-col items-center justify-center p-4 font-sans">
\n <div class="max-w-4xl w-full mx-auto">
\n <!– \u6e38\u620f\u6807\u9898\u548c\u5206\u6570 –>
\n <header class="flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
\n <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-game text-primary text-center">\u8d2a\u5403\u86c7<\/h1><\/p>\n
<div class="flex gap-4 w-full md:w-auto justify-center">
\n <div class="bg-slate-700\/50 backdrop-blur-sm px-4 py-2 rounded-lg flex items-center">
\n <i class="fa fa-star text-yellow-400 mr-2"><\/i>
\n <span class="font-bold">\u5206\u6570:<\/span>
\n <span id="score" class="ml-2 text-primary">0<\/span>
\n <\/div><\/p>\n
<div class="bg-slate-700\/50 backdrop-blur-sm px-4 py-2 rounded-lg flex items-center">
\n <i class="fa fa-trophy text-yellow-500 mr-2"><\/i>
\n <span class="font-bold">\u6700\u9ad8\u5206:<\/span>
\n <span id="highScore" class="ml-2 text-primary">0<\/span>
\n <\/div>
\n <\/div>
\n <\/header><\/p>\n
<!– \u6e38\u620f\u5bb9\u5668 –>
\n <div class="relative mx-auto">
\n <!– \u6e38\u620f\u753b\u5e03 –>
\n <canvas id="gameCanvas" class="bg-slate-900 rounded-lg game-shadow"><\/canvas><\/p>\n
<!– \u5f00\u59cb\u6e38\u620f\u906e\u7f69 –>
\n <div id="startScreen" class="absolute inset-0 bg-dark\/80 backdrop-blur-sm rounded-lg flex flex-col items-center justify-center gap-6 z-10">
\n <h2 class="text-2xl md:text-3xl font-game text-primary text-center">\u5f00\u59cb\u6e38\u620f<\/h2>
\n <p class="text-center px-6 max-w-md">\u4f7f\u7528\u65b9\u5411\u952e\u6216\u5c4f\u5e55\u6309\u94ae\u63a7\u5236\u86c7\u79fb\u52a8，\u5403\u5230\u98df\u7269\u5f97\u5206，\u649e\u5230\u5899\u58c1\u6216\u81ea\u5df1\u5219\u6e38\u620f\u7ed3\u675f<\/p>
\n <button id="startBtn" class="bg-primary text-dark font-bold px-6 py-3 rounded-lg btn-hover">
\n <i class="fa fa-play mr-2"><\/i>\u5f00\u59cb
\n <\/button>
\n <\/div><\/p>\n
<!– \u6e38\u620f\u7ed3\u675f\u906e\u7f69 –>
\n <div id="gameOverScreen" class="absolute inset-0 bg-dark\/80 backdrop-blur-sm rounded-lg flex flex-col items-center justify-center gap-6 z-10 hidden">
\n <h2 class="text-2xl md:text-3xl font-game text-secondary text-center">\u6e38\u620f\u7ed3\u675f<\/h2>
\n <p class="text-xl">\u6700\u7ec8\u5f97\u5206: <span id="finalScore" class="text-primary font-bold">0<\/span><\/p>
\n <button id="restartBtn" class="bg-primary text-dark font-bold px-6 py-3 rounded-lg btn-hover">
\n <i class="fa fa-refresh mr-2"><\/i>\u518d\u6765\u4e00\u5c40
\n <\/button>
\n <\/div>
\n <\/div><\/p>\n
<!– \u6e38\u620f\u63a7\u5236\u533a –>
\n <div class="mt-8 flex flex-col gap-6">
\n <!– \u96be\u5ea6\u9009\u62e9 –>
\n <div class="flex justify-center gap-4">
\n <span class="text-center self-center">\u96be\u5ea6:<\/span>
\n <button class="difficulty-btn bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg btn-hover" data-speed="150">\u7b80\u5355<\/button>
\n <button class="difficulty-btn bg-primary text-dark font-bold px-4 py-2 rounded-lg btn-hover" data-speed="100">\u4e2d\u7b49<\/button>
\n <button class="difficulty-btn bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg btn-hover" data-speed="60">\u56f0\u96be<\/button>
\n <\/div><\/p>\n
<!– \u79fb\u52a8\u63a7\u5236\u6309\u94ae (\u4e3b\u8981\u7528\u4e8e\u79fb\u52a8\u8bbe\u5907) –>
\n <div class="md:hidden flex flex-col items-center gap-2">
\n <div class="control-btn" data-direction="up">
\n <i class="fa fa-chevron-up"><\/i>
\n <\/div>
\n <div class="flex gap-2">
\n <div class="control-btn" data-direction="left">
\n <i class="fa fa-chevron-left"><\/i>
\n <\/div>
\n <div class="control-btn" data-direction="down">
\n <i class="fa fa-chevron-down"><\/i>
\n <\/div>
\n <div class="control-btn" data-direction="right">
\n <i class="fa fa-chevron-right"><\/i>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<!– \u6e38\u620f\u8bf4\u660e –>
\n <div class="text-center text-sm text-slate-400">
\n <p>\u7535\u8111\u7aef\u4f7f\u7528\u65b9\u5411\u952e\u63a7\u5236，\u79fb\u52a8\u7aef\u4f7f\u7528\u5c4f\u5e55\u6309\u94ae\u63a7\u5236<\/p>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<script>
\n \/\/ \u6e38\u620f\u53d8\u91cf
\n const canvas = document.getElementById('gameCanvas');
\n const ctx = canvas.getContext('2d');
\n const scoreElement = document.getElementById('score');
\n const highScoreElement = document.getElementById('highScore');
\n const startScreen = document.getElementById('startScreen');
\n const gameOverScreen = document.getElementById('gameOverScreen');
\n const finalScoreElement = document.getElementById('finalScore');
\n const startBtn = document.getElementById('startBtn');
\n const restartBtn = document.getElementById('restartBtn');
\n const difficultyBtns = document.querySelectorAll('.difficulty-btn');<\/p>\n
\/\/ \u8bbe\u7f6e\u753b\u5e03\u5c3a\u5bf8
\n function setCanvasSize() {
\n \/\/ \u786e\u4fdd\u753b\u5e03\u5728\u4e0d\u540c\u8bbe\u5907\u4e0a\u6709\u5408\u9002\u7684\u5927\u5c0f
\n const maxWidth = window.innerWidth > 768 ? 600 : window.innerWidth – 40;
\n const size = Math.min(maxWidth, 600);
\n canvas.width = size;
\n canvas.height = size;
\n }<\/p>\n
\/\/ \u521d\u59cb\u5316\u753b\u5e03\u5c3a\u5bf8
\n setCanvasSize();
\n window.addEventListener('resize', setCanvasSize);<\/p>\n
\/\/ \u6e38\u620f\u53c2\u6570
\n let snake = [];
\n let food = {};
\n let direction = '';
\n let nextDirection = '';
\n let score = 0;
\n let highScore = localStorage.getItem('snakeHighScore') || 0;
\n let gameSpeed = 100; \/\/ \u6beb\u79d2
\n let gameInterval;
\n let isGameRunning = false;
\n const gridSize = 20; \/\/ \u7f51\u683c\u5927\u5c0f<\/p>\n
\/\/ \u66f4\u65b0\u9ad8\u5206\u663e\u793a
\n highScoreElement.textContent = highScore;<\/p>\n
\/\/ \u521d\u59cb\u5316\u86c7
\n function initSnake() {
\n const center = Math.floor(canvas.width \/ gridSize \/ 2) * gridSize;
\n snake = [
\n { x: center, y: center },
\n { x: center – gridSize, y: center },
\n { x: center – gridSize * 2, y: center }
\n ];
\n direction = 'right';
\n nextDirection = 'right';
\n }<\/p>\n
\/\/ \u968f\u673a\u751f\u6210\u98df\u7269\u4f4d\u7f6e
\n function generateFood() {
\n \/\/ \u786e\u4fdd\u98df\u7269\u4e0d\u4f1a\u51fa\u73b0\u5728\u86c7\u8eab\u4e0a
\n let newFood;
\n do {
\n newFood = {
\n x: Math.floor(Math.random() * (canvas.width \/ gridSize)) * gridSize,
\n y: Math.floor(Math.random() * (canvas.height \/ gridSize)) * gridSize
\n };
\n } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));<\/p>\n
food = newFood;
\n }<\/p>\n
\/\/ \u7ed8\u5236\u86c7
\n function drawSnake() {
\n snake.forEach((segment, index) => {
\n \/\/ \u86c7\u5934\u4f7f\u7528\u4e0d\u540c\u7684\u989c\u8272
\n if (index === 0) {
\n ctx.fillStyle = '#22c55e'; \/\/ \u6df1\u7eff\u8272
\n } else {
\n \/\/ \u86c7\u8eab\u9010\u6e10\u53d8\u8272
\n const greenValue = 174 – index * 5;
\n ctx.fillStyle = `rgb(74, ${Math.max(greenValue, 100)}, 128)`;
\n }<\/p>\n
ctx.fillRect(segment.x, segment.y, gridSize – 1, gridSize – 1);<\/p>\n
\/\/ \u86c7\u5934\u7ed8\u5236\u773c\u775b
\n if (index === 0) {
\n ctx.fillStyle = '#fff';
\n const eyeSize = gridSize \/ 5;<\/p>\n
switch (direction) {
\n case 'right':
\n ctx.fillRect(segment.x + gridSize – eyeSize * 2, segment.y + eyeSize, eyeSize, eyeSize);
\n ctx.fillRect(segment.x + gridSize – eyeSize * 2, segment.y + gridSize – eyeSize * 2, eyeSize, eyeSize);
\n break;
\n case 'left':
\n ctx.fillRect(segment.x + eyeSize, segment.y + eyeSize, eyeSize, eyeSize);
\n ctx.fillRect(segment.x + eyeSize, segment.y + gridSize – eyeSize * 2, eyeSize, eyeSize);
\n break;
\n case 'up':
\n ctx.fillRect(segment.x + eyeSize, segment.y + eyeSize, eyeSize, eyeSize);
\n ctx.fillRect(segment.x + gridSize – eyeSize * 2, segment.y + eyeSize, eyeSize, eyeSize);
\n break;
\n case 'down':
\n ctx.fillRect(segment.x + eyeSize, segment.y + gridSize – eyeSize * 2, eyeSize, eyeSize);
\n ctx.fillRect(segment.x + gridSize – eyeSize * 2, segment.y + gridSize – eyeSize * 2, eyeSize, eyeSize);
\n break;
\n }
\n }
\n });
\n }<\/p>\n
\/\/ \u7ed8\u5236\u98df\u7269
\n function drawFood() {
\n ctx.fillStyle = '#EF4444'; \/\/ \u7ea2\u8272\u98df\u7269<\/p>\n
\/\/ \u7ed8\u5236\u82f9\u679c\u5f62\u72b6
\n ctx.beginPath();
\n ctx.arc(
\n food.x + gridSize \/ 2,
\n food.y + gridSize \/ 2,
\n gridSize \/ 2 – 1,
\n 0,
\n Math.PI * 2
\n );
\n ctx.fill();<\/p>\n
\/\/ \u7ed8\u5236\u82f9\u679c\u67c4
\n ctx.fillStyle = '#8B4513';
\n ctx.beginPath();
\n ctx.moveTo(food.x + gridSize \/ 2, food.y);
\n ctx.lineTo(food.x + gridSize \/ 2 + 5, food.y – 5);
\n ctx.lineTo(food.x + gridSize \/ 2 + 3, food.y – 5);
\n ctx.lineTo(food.x + gridSize \/ 2, food.y – 1);
\n ctx.fill();
\n }<\/p>\n
\/\/ \u79fb\u52a8\u86c7
\n function moveSnake() {
\n \/\/ \u66f4\u65b0\u65b9\u5411
\n direction = nextDirection;<\/p>\n
\/\/ \u521b\u5efa\u65b0\u7684\u5934\u90e8
\n const head = { …snake[0] };<\/p>\n
\/\/ \u6839\u636e\u65b9\u5411\u79fb\u52a8\u5934\u90e8
\n switch (direction) {
\n case 'up':
\n head.y -= gridSize;
\n break;
\n case 'down':
\n head.y += gridSize;
\n break;
\n case 'left':
\n head.x -= gridSize;
\n break;
\n case 'right':
\n head.x += gridSize;
\n break;
\n }<\/p>\n
\/\/ \u68c0\u67e5\u78b0\u649e
\n if (
\n head.x < 0 ||
\n head.x >= canvas.width ||
\n head.y < 0 ||
\n head.y >= canvas.height ||
\n snake.some(segment => segment.x === head.x && segment.y === head.y)
\n ) {
\n gameOver();
\n return;
\n }<\/p>\n
\/\/ \u5c06\u65b0\u5934\u90e8\u6dfb\u52a0\u5230\u86c7
\n snake.unshift(head);<\/p>\n
\/\/ \u68c0\u67e5\u662f\u5426\u5403\u5230\u98df\u7269
\n if (head.x === food.x && head.y === food.y) {
\n \/\/ \u52a0\u5206
\n score += 10;
\n scoreElement.textContent = score;<\/p>\n
\/\/ \u66f4\u65b0\u9ad8\u5206
\n if (score > highScore) {
\n highScore = score;
\n highScoreElement.textContent = highScore;
\n localStorage.setItem('snakeHighScore', highScore);
\n }<\/p>\n
\/\/ \u751f\u6210\u65b0\u98df\u7269
\n generateFood();<\/p>\n
\/\/ \u64ad\u653e\u5403\u98df\u7269\u97f3\u6548
\n playSound('eat');
\n } else {
\n \/\/ \u79fb\u9664\u5c3e\u90e8
\n snake.pop();
\n }
\n }<\/p>\n
\/\/ \u7ed8\u5236\u6e38\u620f
\n function drawGame() {
\n \/\/ \u6e05\u7a7a\u753b\u5e03
\n ctx.fillStyle = '#0F172A'; \/\/ \u6df1\u8272\u80cc\u666f
\n ctx.fillRect(0, 0, canvas.width, canvas.height);<\/p>\n
\/\/ \u7ed8\u5236\u7f51\u683c（\u8f7b\u5fae\u7684\u7f51\u683c\u7ebf）
\n ctx.strokeStyle = 'rgba(148, 163, 184, 0.1)';
\n ctx.lineWidth = 1;<\/p>\n
\/\/ \u7ed8\u5236\u6c34\u5e73\u7ebf
\n for (let y = 0; y < canvas.height; y += gridSize) {
\n ctx.beginPath();
\n ctx.moveTo(0, y);
\n ctx.lineTo(canvas.width, y);
\n ctx.stroke();
\n }<\/p>\n
\/\/ \u7ed8\u5236\u5782\u76f4\u7ebf
\n for (let x = 0; x < canvas.width; x += gridSize) {
\n ctx.beginPath();
\n ctx.moveTo(x, 0);
\n ctx.lineTo(x, canvas.height);
\n ctx.stroke();
\n }<\/p>\n
\/\/ \u7ed8\u5236\u86c7\u548c\u98df\u7269
\n drawSnake();
\n drawFood();
\n }<\/p>\n
\/\/ \u6e38\u620f\u5faa\u73af
\n function gameLoop() {
\n moveSnake();
\n drawGame();
\n }<\/p>\n
\/\/ \u5f00\u59cb\u6e38\u620f
\n function startGame() {
\n if (isGameRunning) return;<\/p>\n
\/\/ \u91cd\u7f6e\u6e38\u620f\u72b6\u6001
\n score = 0;
\n scoreElement.textContent = score;
\n startScreen.classList.add('hidden');
\n gameOverScreen.classList.add('hidden');<\/p>\n
\/\/ \u521d\u59cb\u5316\u6e38\u620f
\n initSnake();
\n generateFood();<\/p>\n
\/\/ \u5f00\u59cb\u6e38\u620f\u5faa\u73af
\n isGameRunning = true;
\n clearInterval(gameInterval);
\n gameInterval = setInterval(gameLoop, gameSpeed);<\/p>\n
\/\/ \u64ad\u653e\u5f00\u59cb\u97f3\u6548
\n playSound('start');
\n }<\/p>\n
\/\/ \u6e38\u620f\u7ed3\u675f
\n function gameOver() {
\n isGameRunning = false;
\n clearInterval(gameInterval);<\/p>\n
\/\/ \u663e\u793a\u6e38\u620f\u7ed3\u675f\u753b\u9762
\n finalScoreElement.textContent = score;
\n gameOverScreen.classList.remove('hidden');<\/p>\n
\/\/ \u64ad\u653e\u6e38\u620f\u7ed3\u675f\u97f3\u6548
\n playSound('gameOver');
\n }<\/p>\n
\/\/ \u5904\u7406\u65b9\u5411\u63a7\u5236
\n function handleDirection(newDirection) {
\n \/\/ \u9632\u6b62180\u5ea6\u8f6c\u5411
\n if (
\n (newDirection === 'up' && direction === 'down') ||
\n (newDirection === 'down' && direction === 'up') ||
\n (newDirection === 'left' && direction === 'right') ||
\n (newDirection === 'right' && direction === 'left')
\n ) {
\n return;
\n }<\/p>\n
nextDirection = newDirection;
\n }<\/p>\n
\/\/ \u64ad\u653e\u7b80\u5355\u97f3\u6548（\u4f7f\u7528Web Audio API）
\n function playSound(type) {
\n try {
\n const audioContext = new (window.AudioContext || window.webkitAudioContext)();
\n const oscillator = audioContext.createOscillator();
\n const gainNode = audioContext.createGain();<\/p>\n
oscillator.connect(gainNode);
\n gainNode.connect(audioContext.destination);<\/p>\n
\/\/ \u6839\u636e\u4e0d\u540c\u7c7b\u578b\u8bbe\u7f6e\u4e0d\u540c\u7684\u97f3\u6548
\n switch (type) {
\n case 'start':
\n oscillator.type = 'sine';
\n oscillator.frequency.setValueAtTime(330, audioContext.currentTime);
\n oscillator.frequency.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.5);
\n gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
\n oscillator.start();
\n oscillator.stop(audioContext.currentTime + 0.5);
\n break;
\n case 'eat':
\n oscillator.type = 'sine';
\n oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime);
\n oscillator.frequency.exponentialRampToValueAtTime(783.99, audioContext.currentTime + 0.1);
\n gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
\n gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.1);
\n oscillator.start();
\n oscillator.stop(audioContext.currentTime + 0.1);
\n break;
\n case 'gameOver':
\n oscillator.type = 'sine';
\n oscillator.frequency.setValueAtTime(220, audioContext.currentTime);
\n oscillator.frequency.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.8);
\n gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
\n oscillator.start();
\n oscillator.stop(audioContext.currentTime + 0.8);
\n break;
\n }
\n } catch (e) {
\n \/\/ \u6d4f\u89c8\u5668\u4e0d\u652f\u6301Web Audio API\u65f6\u4e0d\u505a\u5904\u7406
\n console.log('\u97f3\u6548\u64ad\u653e\u5931\u8d25:', e);
\n }
\n }<\/p>\n
\/\/ \u4e8b\u4ef6\u76d1\u542c
\n startBtn.addEventListener('click', startGame);
\n restartBtn.addEventListener('click', startGame);<\/p>\n
\/\/ \u952e\u76d8\u63a7\u5236
\n document.addEventListener('keydown', (e) => {
\n switch (e.key) {
\n case 'ArrowUp':
\n handleDirection('up');
\n break;
\n case 'ArrowDown':
\n handleDirection('down');
\n break;
\n case 'ArrowLeft':
\n handleDirection('left');
\n break;
\n case 'ArrowRight':
\n handleDirection('right');
\n break;
\n case ' ': \/\/ \u7a7a\u683c\u952e\u5f00\u59cb\/\u6682\u505c\u6e38\u620f
\n if (isGameRunning) {
\n clearInterval(gameInterval);
\n isGameRunning = false;
\n } else if (!startScreen.classList.contains('hidden') || !gameOverScreen.classList.contains('hidden')) {
\n startGame();
\n }
\n break;
\n }
\n });<\/p>\n
\/\/ \u5c4f\u5e55\u63a7\u5236\u6309\u94ae
\n document.querySelectorAll('.control-btn').forEach(btn => {
\n btn.addEventListener('click', () => {
\n handleDirection(btn.dataset.direction);
\n });
\n });<\/p>\n
\/\/ \u96be\u5ea6\u9009\u62e9
\n difficultyBtns.forEach(btn => {
\n btn.addEventListener('click', () => {
\n \/\/ \u66f4\u65b0UI
\n difficultyBtns.forEach(b => {
\n b.classList.remove('bg-primary', 'text-dark', 'font-bold');
\n b.classList.add('bg-slate-700', 'hover:bg-slate-600');
\n });
\n btn.classList.remove('bg-slate-700', 'hover:bg-slate-600');
\n btn.classList.add('bg-primary', 'text-dark', 'font-bold');<\/p>\n
\/\/ \u66f4\u65b0\u6e38\u620f\u901f\u5ea6
\n gameSpeed = parseInt(btn.dataset.speed);<\/p>\n
\/\/ \u5982\u679c\u6e38\u620f\u6b63\u5728\u8fd0\u884c，\u66f4\u65b0\u95f4\u9694
\n if (isGameRunning) {
\n clearInterval(gameInterval);
\n gameInterval = setInterval(gameLoop, gameSpeed);
\n }
\n });
\n });<\/p>\n
\/\/ \u89e6\u6478\u6ed1\u52a8\u63a7\u5236（\u79fb\u52a8\u8bbe\u5907）
\n let touchStartX = 0;
\n let touchStartY = 0;<\/p>\n
canvas.addEventListener('touchstart', (e) => {
\n touchStartX = e.touches[0].clientX;
\n touchStartY = e.touches[0].clientY;
\n e.preventDefault(); \/\/ \u9632\u6b62\u89e6\u6478\u4e8b\u4ef6\u5f71\u54cd\u9875\u9762\u6eda\u52a8
\n }, { passive: false });<\/p>\n
canvas.addEventListener('touchmove', (e) => {
\n e.preventDefault(); \/\/ \u9632\u6b62\u89e6\u6478\u4e8b\u4ef6\u5f71\u54cd\u9875\u9762\u6eda\u52a8
\n }, { passive: false });<\/p>\n
canvas.addEventListener('touchend', (e) => {
\n if (!isGameRunning) return;<\/p>\n
const touchEndX = e.changedTouches[0].clientX;
\n const touchEndY = e.changedTouches[0].clientY;<\/p>\n
const diffX = touchEndX – touchStartX;
\n const diffY = touchEndY – touchStartY;<\/p>\n
\/\/ \u786e\u5b9a\u6ed1\u52a8\u65b9\u5411（\u6c34\u5e73\u8fd8\u662f\u5782\u76f4）
\n if (Math.abs(diffX) > Math.abs(diffY)) {
\n \/\/ \u6c34\u5e73\u6ed1\u52a8
\n handleDirection(diffX > 0 ? 'right' : 'left');
\n } else {
\n \/\/ \u5782\u76f4\u6ed1\u52a8
\n handleDirection(diffY > 0 ? 'down' : 'up');
\n }<\/p>\n
e.preventDefault();
\n }, { passive: false });<\/p>\n
\/\/ \u521d\u59cb\u7ed8\u5236\u5f00\u59cb\u754c\u9762\u7684\u80cc\u666f
\n drawGame();
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb100\u6b21\u3002\u8fd9\u662f\u4e00\u4e2a\u57fa\u4e8eHTML5 Canvas\u7684\u73b0\u4ee3\u98ce\u683c\u8d2a\u5403\u86c7\u6e38\u620f\u5b9e\u73b0\u3002\u6e38\u620f\u91c7\u7528\u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff0c\u9002\u914d\u4e0d\u540c\u8bbe\u5907\u5c4f\u5e55\u3002\u4e3b\u8981\u529f\u80fd\u5305\u62ec\uff1a1) \u901a\u8fc7\u952e\u76d8\u6216\u89e6\u6478\u5c4f\u63a7\u5236\u86c7\u7684\u79fb\u52a8\u65b9\u5411\uff1b2) \u4e09\u79cd\u53ef\u9009\u96be\u5ea6\u7ea7\u522b(\u7b80\u5355\/\u4e2d\u7b49\/\u56f0\u96be)\uff1b3) \u5b9e\u65f6\u8ba1\u5206\u7cfb\u7edf\u548c\u6700\u9ad8\u5206\u8bb0\u5f55(\u4f7f\u7528localStorage\u5b58\u50a8)\uff1b4) \u6e38\u620f\u5f00\u59cb\/\u7ed3\u675f\u754c\u9762\uff1b5) \u89c6\u89c9\u7f8e\u5316\u6548\u679c(\u6e10\u53d8\u8272\u86c7\u8eab\u3001\u7f51\u683c\u80cc\u666f\u3001\u82f9\u679c\u5f62\u72b6\u98df\u7269\u7b49)\uff1b6) \u7b80\u5355\u7684\u97f3\u6548\u53cd\u9988\u3002\u6e38\u620f\u903b\u8f91\u5b8c\u6574\uff0c\u5305\u542b\u78b0\u649e\u68c0\u6d4b\u3001\u98df\u7269\u751f\u6210\u3001\u86c7\u8eab\u589e\u957f\u7b49\u7ecf\u5178\u8d2a\u5403\u86c7\u6e38\u620f\u673a\u5236\u3002\u4ee3\u7801\u7ed3\u6784\u6e05\u6670\uff0c\u4f7f\u7528\u4e86Tailwind CSS\u6846\u67b6\u5b9e\u73b0\u73b0\u4ee3\u5316UI\u3002<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[567,87],"topic":[],"class_list":["post-56293","post","type-post","status-publish","format-standard","hentry","category-server","tag-html","tag-87"],"yoast_head":"\n