<! DOCTYPE html > < htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> body { margin : 0; padding : 20px; font-family : 'Arial' , sans-serif; background : linear-gradient ( 135deg, #667eea 0%, #764ba2 100%) ; min-height : 100vh; display : flex; align-items : center; justify-content : center; } .game-container { background : rgba ( 255, 255, 255, 0.1) ; backdrop-filter : blur ( 10px) ; border-radius : 20px; padding : 25px; box-shadow : 0 8px 32px rgba ( 0, 0, 0, 0.3) ; border : 1px solid rgba ( 255, 255, 255, 0.2) ; text-align : center; max-width : 900px; width : 100%; } .game-title { color : white; font-size : 2.8em; margin-bottom : 15px; text-shadow : 2px 2px 4px rgba ( 0, 0, 0, 0.5) ; background : linear-gradient ( 45deg, #ff6b6b, #4ecdc4, #45b7d1) ; -webkit-background-clip : text; -webkit-text-fill-color : transparent; background-clip : text; } .game-header { display : flex; justify-content : space-between; align-items : center; margin-bottom : 20px; flex-wrap : wrap; gap : 15px; } .game-info { display : flex; gap : 20px; background : rgba ( 0, 0, 0, 0.2) ; padding : 12px 20px; border-radius : 15px; color : white; font-weight : bold; font-size : 1.1em; } .info-item { display : flex; align-items : center; gap : 5px; } .grid-container { display : flex; justify-content : center; margin : 20px 0; } .grid { display : grid; grid-template-columns : repeat ( 20, 25px) ; grid-template-rows : repeat ( 15, 25px) ; gap : 1px; background-color : rgba ( 0, 0, 0, 0.3) ; border-radius : 10px; padding : 15px; box-shadow : 0 4px 15px rgba ( 0, 0, 0, 0.2) ; } .cell { width : 25px; height : 25px; display : flex; align-items : center; justify-content : center; font-size : 14px; border-radius : 4px; background-color : rgba ( 0, 0, 0, 0.2) ; transition : all 0.1s ease; } .snake-head { background : linear-gradient ( 135deg, #4ade80, #22c55e) ; color : white; font-weight : bold; box-shadow : 0 0 10px rgba ( 74, 222, 128, 0.5) ; } .snake-body { background : linear-gradient ( 135deg, #22c55e, #16a34a) ; color : white; } .food { background : linear-gradient ( 135deg, #ef4444, #dc2626) ; color : white; animation : pulse 1s infinite; } .power-up { background : linear-gradient ( 135deg, #f59e0b, #d97706) ; color : white; animation : spin 2s infinite linear; } .special-food { background : linear-gradient ( 135deg, #fbbf24, #f59e0b) ; color : white; animation : bounce 1s infinite; } @keyframes pulse{ 0%, 100% { transform : scale ( 1) ; } 50% { transform : scale ( 1.1) ; } } @keyframes spin{ from { transform : rotate ( 0deg) ; } to { transform : rotate ( 360deg) ; } } @keyframes bounce{ 0%, 100% { transform : translateY ( 0) ; } 50% { transform : translateY ( -5px) ; } } .controls { margin : 25px 0; display : flex; justify-content : center; gap : 15px; flex-wrap : wrap; } button { padding : 12px 25px; border : none; border-radius : 25px; background : rgba ( 255, 255, 255, 0.2) ; color : white; font-weight : bold; cursor : pointer; transition : all 0.3s; backdrop-filter : blur ( 5px) ; box-shadow : 0 4px 10px rgba ( 0, 0, 0, 0.2) ; font-size : 1em; } button:hover { background : rgba ( 255, 255, 255, 0.3) ; transform : translateY ( -2px) ; } .instructions { color : white; margin : 20px 0; font-size : 0.95em; line-height : 1.6; background : rgba ( 0, 0, 0, 0.2) ; padding : 20px; border-radius : 15px; } .rules-section { margin : 15px 0; } .rules-section h3 { margin-top : 0; margin-bottom : 10px; color : #4ecdc4; } .power-ups-list, .special-foods-list { display : flex; justify-content : center; gap : 15px; margin : 10px 0; flex-wrap : wrap; } .item { display : flex; align-items : center; gap : 5px; background : rgba ( 255, 255, 255, 0.1) ; padding : 8px 15px; border-radius : 20px; font-size : 0.85em; } .game-over { position : absolute; top : 50%; left : 50%; transform : translate ( -50%, -50%) ; background : rgba ( 0, 0, 0, 0.9) ; color : white; padding : 40px; border-radius : 20px; text-align : center; z-index : 1000; box-shadow : 0 10px 30px rgba ( 0, 0, 0, 0.5) ; max-width : 400px; width : 90%; } .pause-screen { position : absolute; top : 50%; left : 50%; transform : translate ( -50%, -50%) ; background : rgba ( 0, 0, 0, 0.8) ; color : white; padding : 40px; border-radius : 20px; text-align : center; z-index : 1000; } .combo-display { background : rgba ( 255, 215, 0, 0.3) ; color : gold; padding : 8px 15px; border-radius : 20px; font-weight : bold; margin : 5px 0; animation : glow 0.5s infinite alternate; } @keyframes glow{ from { box-shadow : 0 0 5px gold; } to { box-shadow : 0 0 20px gold; } } .active-power { animation : pulse 0.5s infinite; } @media ( max-width : 768px) { .game-container { padding : 15px; } .game-title { font-size : 2em; } .game-info { flex-direction : column; gap : 10px; } .grid { grid-template-columns : repeat ( 20, 20px) ; grid-template-rows : repeat ( 15, 20px) ; padding : 10px; } .cell { width : 20px; height : 20px; font-size : 12px; } .controls { flex-direction : column; align-items : center; } button { width : 100%; max-width : 200px; } } </ style> </ head> < body> < divclass = " game-container" > < h1class = " game-title" > </ h1> < divclass = " game-header" > < divclass = " game-info" > < divclass = " info-item" > < span> </ span> < span> < spanid = " score" > </ span> </ span> </ div> < divclass = " info-item" > < span> </ span> < span> < spanid = " lives" > </ span> </ span> </ div> < divclass = " info-item" > < span> </ span> < span> < spanid = " level" > </ span> </ span> </ div> < divclass = " info-item" > < span> </ span> < span> < spanid = " combo" class = " combo-display" > </ span> </ span> </ div> </ div> </ div> < divclass = " grid-container" > < divid = " game-grid" class = " grid" > </ div> </ div> < divclass = " controls" > < buttonid = " start-btn" > </ button> < buttonid = " pause-btn" > </ button> < buttonid = " reset-btn" > </ button> </ div> < divclass = " instructions" > < divclass = " rules-section" > < h3> </ h3> < p> </ p> < p> </ p> < p> </ p> < p> </ p> </ div> < divclass = " rules-section" > < h3> </ h3> < divclass = " power-ups-list" > < divclass = " item" > </ div> < divclass = " item" > </ div> < divclass = " item" > </ div> < divclass = " item" > </ div> < divclass = " item" > </ div> < divclass = " item" > </ div> </ div> </ div> < divclass = " rules-section" > < h3> </ h3> < divclass = " special-foods-list" > < divclass = " item" > </ div> < divclass = " item" > </ div> < divclass = " item" > </ div> < divclass = " item" > </ div> </ div> </ div> < divclass = " rules-section" > < h3> </ h3> < p> </ p> </ div> </ div> </ div> < script> let snake = [ { x : 10 , y : 10 } ] ; let direction = { x : 0 , y : - 1 } ; let food = { x : 15 , y : 15 } ; let powerUps = [ ] ; let specialFoods = [ ] ; let gameRunning = false ; let gameOver = false ; let score = 0 ; let level = 1 ; let lives = 3 ; let activePowerUps = [ ] ; let gameSpeed = 150 ; let gameLoop; let combo = 0 ; let isPaused = false ; let invincible = false ; const gameGrid = document. getElementById ( 'game-grid' ) ; const scoreElement = document. getElementById ( 'score' ) ; const livesElement = document. getElementById ( 'lives' ) ; const levelElement = document. getElementById ( 'level' ) ; const comboElement = document. getElementById ( 'combo' ) ; const startBtn = document. getElementById ( 'start-btn' ) ; const pauseBtn = document. getElementById ( 'pause-btn' ) ; const resetBtn = document. getElementById ( 'reset-btn' ) ; function generateRandomPosition ( ) { return { x : Math. floor ( Math. random ( ) * 20 ) , y : Math. floor ( Math. random ( ) * 15 ) } ; } function checkCollision ( head, snakeBody ) { if ( invincible) return false ; return snakeBody. slice ( 1 ) . some ( segment => segment. x === head. x && segment. y === head. y) ; } function generateFood ( ) { let newFood; let valid = false ; while ( ! valid) { newFood = generateRandomPosition ( ) ; valid = ! snake. some ( segment => segment. x === newFood. x && segment. y === newFood. y) && ! powerUps. some ( power => power. x === newFood. x && power. y === newFood. y) && ! specialFoods. some ( food => food. x === newFood. x && food. y === newFood. y) ; } return newFood; } function generatePowerUp ( ) { const types = [ 'speed' , 'slow' , 'grow' , 'shrink' , 'teleport' , 'invincible' ] ; const type = types[ Math. floor ( Math. random ( ) * types. length) ] ; return { ... generateRandomPosition ( ) , type : type, id : Date. now ( ) + Math. random ( ) } ; } function generateSpecialFood ( ) { const types = [ 'star' , 'heart' , 'diamond' , 'cloud' ] ; const type = types[ Math. floor ( Math. random ( ) * types. length) ] ; return { ... generateRandomPosition ( ) , type : type, id : Date. now ( ) + Math. random ( ) } ; } function renderGrid ( ) { gameGrid. innerHTML = '' ; for ( let y = 0 ; y < 15 ; y++ ) { for ( let x = 0 ; x < 20 ; x++ ) { const cell = document. createElement ( 'div' ) ; cell. className = 'cell' ; const isSnakeHead = snake[ 0 ] . x === x && snake[ 0 ] . y === y; const isSnakeBody = snake. slice ( 1 ) . some ( segment => segment. x === x && segment. y === y) ; const isFood = food. x === x && food. y === y; const isPowerUp = powerUps. some ( power => power. x === x && power. y === y) ; const isSpecialFood = specialFoods. some ( food => food. x === x && food. y === y) ; if ( isSnakeHead) { cell. classList. add ( 'snake-head' ) ; cell. textContent = '🐍' ; } else if ( isSnakeBody) { cell. classList. add ( 'snake-body' ) ; cell. textContent = '🟢' ; } else if ( isFood) { cell. classList. add ( 'food' ) ; cell. textContent = '🍎' ; } else if ( isPowerUp) { cell. classList. add ( 'power-up' ) ; const icons = { 'speed' : '⚡' , 'slow' : '❄️' , 'grow' : '🌱' , 'shrink' : '🔻' , 'teleport' : '🌀' , 'invincible' : '✨' } ; cell. textContent = icons[ powerUps. find ( p => p. x === x && p. y === y) . type] ; } else if ( isSpecialFood) { cell. classList. add ( 'special-food' ) ; const icons = { 'star' : '⭐' , 'heart' : '❤️' , 'diamond' : '💎' , 'cloud' : '☁️' } ; cell. textContent = icons[ specialFoods. find ( f => f. x === x && f. y === y) . type] ; } gameGrid. appendChild ( cell) ; } } } function updateGame ( ) { if ( ! gameRunning || gameOver || isPaused) return ; const newSnake = [ ... snake] ; const head = { ... newSnake[ 0 ] } ; head. x += direction. x; head. y += direction. y; if ( head. x < 0 ) head. x = 19 ; if ( head. x > 19 ) head. x = 0 ; if ( head. y < 0 ) head. y = 14 ; if ( head. y > 14 ) head. y = 0 ; if ( checkCollision ( head, newSnake) ) { lives-- ; livesElement. textContent = lives; if ( lives <= 0 ) { gameOver = true ; gameRunning = false ; showGameOver ( ) ; return ; } snake = [ { x : 10 , y : 10 } ] ; direction = { x : 0 , y : - 1 } ; invincible = false ; return ; } newSnake. unshift ( head) ; if ( head. x === food. x && head. y === food. y) { score += 10 ; combo++ ; comboElement. textContent = combo; scoreElement. textContent = score; if ( combo >= 5 ) { score += 50 ; scoreElement. textContent = score; combo = 0 ; comboElement. textContent = combo; comboElement. style. animation = 'glow 0.5s infinite alternate' ; setTimeout ( ( ) => comboElement. style. animation = '' , 2000 ) ; } food = generateFood ( ) ; } else { newSnake. pop ( ) ; } powerUps = powerUps. filter ( power => { if ( power. x === head. x && power. y === head. y) { switch ( power. type) { case 'speed' : gameSpeed = 100 ; setTimeout ( ( ) => gameSpeed = 150 , 5000 ) ; break ; case 'grow' : newSnake. push ( ... Array ( 2 ) . fill ( ) . map ( ( ) => ( { ... newSnake[ newSnake. length - 1 ] } ) ) ) ; break ; case 'shrink' : if ( newSnake. length > 3 ) { newSnake. splice ( - 2 , 2 ) ; } break ; case 'teleport' : const teleportPos = generateRandomPosition ( ) ; head. x = teleportPos. x; head. y = teleportPos. y; break ; case 'invincible' : invincible = true ; setTimeout ( ( ) => invincible = false , 3000 ) ; break ; } return false ; } return true ; } ) ; specialFoods = specialFoods. filter ( foodItem => { if ( foodItem. x === head. x && foodItem. y === head. y) { switch ( foodItem. type) { case 'star' : score += 50 ; scoreElement. textContent = score; break ; case 'heart' : lives++ ; livesElement. textContent = lives; break ; case 'diamond' : score += 50 ; scoreElement. textContent = score; break ; case 'cloud' : score += 50 ; scoreElement. textContent = score; break ; } return false ; } return true ; } ) ; snake = newSnake; if ( Math. random ( ) < 0.02 ) { powerUps. push ( generatePowerUp ( ) ) ; } if ( Math. random ( ) < 0.01 ) { specialFoods. push ( generateSpecialFood ( ) ) ; } renderGrid ( ) ; } function showGameOver ( ) { const gameOverDiv = document. createElement ( 'div' ) ; gameOverDiv. className = 'game-over' ; gameOverDiv. innerHTML = ` <h2>🎮 游戏结束! 🎮</h2><p>最终得分: ${ score} </p><p>最高连击: ${ Math. max ( combo, 5 ) } </p><button onclick="this.parentElement.remove(); resetGame()" style="margin-top: 15px; padding: 12px 25px; background: #ff6b6b; border: none; border-radius: 25px; color: white; font-weight: bold; cursor: pointer;">再玩一次!</button> ` ; document. body. appendChild ( gameOverDiv) ; } function showPauseScreen ( ) { const pauseDiv = document. createElement ( 'div' ) ; pauseDiv. className = 'pause-screen' ; pauseDiv. innerHTML = ` <h2>⏸️ 暂停中 ⏸️</h2><p>按空格键继续游戏</p> ` ; document. body. appendChild ( pauseDiv) ; return pauseDiv; } function startGame ( ) { if ( gameRunning) return ; gameRunning = true ; gameOver = false ; isPaused = false ; score = 0 ; lives = 3 ; level = 1 ; combo = 0 ; snake = [ { x : 10 , y : 10 } ] ; direction = { x : 0 , y : - 1 } ; food = generateFood ( ) ; powerUps = [ ] ; specialFoods = [ ] ; gameSpeed = 150 ; invincible = false ; scoreElement. textContent = score; livesElement. textContent = lives; levelElement. textContent = level; comboElement. textContent = combo; renderGrid ( ) ; if ( gameLoop) clearInterval ( gameLoop) ; gameLoop = setInterval ( updateGame, gameSpeed) ; } function togglePause ( ) { if ( ! gameRunning || gameOver) return ; isPaused = ! isPaused; pauseBtn. textContent = isPaused ? '▶️ 继续' : '⏸️ 暂停' ; if ( isPaused) { showPauseScreen ( ) ; } else { const pauseDiv = document. querySelector ( '.pause-screen' ) ; if ( pauseDiv) pauseDiv. remove ( ) ; } } function resetGame ( ) { if ( gameLoop) clearInterval ( gameLoop) ; gameRunning = false ; gameOver = false ; isPaused = false ; const pauseDiv = document. querySelector ( '.pause-screen' ) ; if ( pauseDiv) pauseDiv. remove ( ) ; startGame ( ) ; } document. addEventListener ( 'keydown' , ( e ) => { if ( ! gameRunning || gameOver) return ; switch ( e. key) { case 'ArrowUp' : if ( direction. y === 0 ) direction = { x : 0 , y : - 1 } ; break ; case 'ArrowDown' : if ( direction. y === 0 ) direction = { x : 0 , y : 1 } ; break ; case 'ArrowLeft' : if ( direction. x === 0 ) direction = { x : - 1 , y : 0 } ; break ; case 'ArrowRight' : if ( direction. x === 0 ) direction = { x : 1 , y : 0 } ; break ; case ' ' : togglePause ( ) ; break ; } } ) ; startBtn. addEventListener ( 'click' , startGame) ; pauseBtn. addEventListener ( 'click' , togglePause) ; resetBtn. addEventListener ( 'click' , resetGame) ; renderGrid ( ) ; </ script> </ body> </ html> 
到 mapMulti())
