主題

踩地雷的網頁遊戲

FallenDown | 2023-06-22 17:38:25 | 巴幣 100 | 人氣 164

首先新增記事本

將下列程式碼貼在裡面

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>踩地雷</title><style>h1{text-align:center}.game-board{display:flex;flex-direction:column;align-items:center}.grid-container{display:grid;grid-template-columns:repeat(10,20px)}.cell{width:20px;height:20px;border:1px solid#ccc;background-color:#eee;cursor:pointer;user-select:none;display:flex;justify-content:center;align-items:center}.revealed{background-color:#ddd}.marked{background-image:url(pic/RM.png);background-size:cover}.header{display:flex;align-items:center;margin-bottom:10px}#timer{margin-bottom:3px;font-size:18px}#restartButton{margin-left:20px}#gameInfo{margin-left:20px;font-size:14px}</style></head><body><div class="game-board"><h1>踩地雷</h1><div class="header"><button id="restartButton"onclick="restartGame()">重新開始</button><span id="timer"> 時間:<span id="timerValue"></span>秒</span><br></div><div class="grid-container"></div></div><script>const rows=10;const cols=10;const totalCells=rows*cols;const totalMines=10;const minePositions=[];let timerInterval;let secondsElapsed=0;let gameStarted=false;let gameEnded=false;function updateFlagCount(){const markedCells=document.querySelectorAll('.marked');const flagCount=markedCells.length;const mineCountElement=document.getElementById('mineCount');mineCountElement.innerText=`地雷數量:${flagCount}/${totalMines}`}function generateMinePositions(){while(minePositions.length<totalMines){const position=Math.floor(Math.random()*totalCells);if(!minePositions.includes(position)){minePositions.push(position)}}}function isMine(cell){const cellIndex=Array.from(cell.parentNode.children).indexOf(cell);return minePositions.includes(cellIndex)}function getMineCount(cell){const cellIndex=Array.from(cell.parentNode.children).indexOf(cell);const adjacentCellIndexes=getAdjacentCellIndexes(cellIndex);let mineCount=0;for(const index of adjacentCellIndexes){if(minePositions.includes(index)){mineCount++}}return mineCount}function getAdjacentCellIndexes(cellIndex){const indexes=[];const row=Math.floor(cellIndex/cols);const col=cellIndex%cols;for(let i=Math.max(0,row-1);i<=Math.min(row+1,rows-1);i++){for(let j=Math.max(0,col-1);j<=Math.min(col+1,cols-1);j++){if(!(i===row&&j===col)){indexes.push(i*cols+j)}}}return indexes}function revealCell(cell){if(!gameStarted){startTimer();gameStarted=true}if(cell.classList.contains('revealed')||gameEnded){return}cell.classList.add('revealed');if(isMine(cell)){gameOver()}else{const mineCount=getMineCount(cell);if(mineCount>0){cell.innerText=mineCount}else{const adjacentCellIndexes=getAdjacentCellIndexes(Array.from(cell.parentNode.children).indexOf(cell));for(const index of adjacentCellIndexes){const adjacentCell=cell.parentNode.children[index];if(!adjacentCell.classList.contains('revealed')){revealCell(adjacentCell)}}}if(checkGameWon()){gameWon()}}}function checkGameWon(){const revealedCells=document.querySelectorAll('.revealed');const totalRevealedCells=revealedCells.length;const totalSafeCells=totalCells-totalMines;return totalRevealedCells===totalSafeCells}function markCell(cell){if(cell.classList.contains('revealed')||gameEnded){return}if(cell.classList.contains('marked')){cell.classList.remove('marked');totalFlags++}else{if(totalFlags===0){return}cell.classList.add('marked');totalFlags--}updateFlagCount();const mineCountElement=document.getElementById('mineCount');mineCountElement.innerText=`地雷數量:${totalMines-totalFlags}/${totalMines}`;if(totalFlags===0&&totalMines===getMarkedMineCount()){gameWon()}}function getMarkedMineCount(){const markedCells=document.querySelectorAll('.marked');return markedCells.length}function gameWon(){clearInterval(timerInterval);const cells=document.querySelectorAll('.cell');cells.forEach((cell)=>{cell.removeEventListener('click',revealCell);cell.removeEventListener('contextmenu',markCell)});gameEnded=true;alert('恭喜！找到所有地雷！')}let totalFlags=totalMines;function restartGame(){totalFlags=totalMines;clearInterval(timerInterval);secondsElapsed=0;document.getElementById('timerValue').innerText=secondsElapsed;gameStarted=false;gameEnded=false;minePositions.length=0;generateMinePositions();const cells=document.querySelectorAll('.cell');cells.forEach((cell)=>{cell.innerText='';cell.classList.remove('revealed','marked');cell.style.backgroundImage='';cell.removeEventListener('click',revealCell);cell.removeEventListener('contextmenu',markCell);cell.addEventListener('click',function(){revealCell(this)});cell.addEventListener('contextmenu',function(e){e.preventDefault();markCell(this)})});const mineCountElement=document.getElementById('mineCount');mineCountElement.innerText=`地雷數量:0/${totalMines}`}function startTimer(){secondsElapsed=1;document.getElementById('timerValue').innerText=secondsElapsed;timerInterval=setInterval(()=>{secondsElapsed++;document.getElementById('timerValue').innerText=secondsElapsed},1000)}function gameOver(){clearInterval(timerInterval);const cells=document.querySelectorAll('.cell');cells.forEach((cell)=>{cell.removeEventListener('click',revealCell);cell.removeEventListener('contextmenu',markCell);const cellIndex=Array.from(cell.parentNode.children).indexOf(cell);if(minePositions.includes(cellIndex)){cell.style.backgroundImage="url('pic/Boom.png')";cell.style.backgroundSize='cover'}});gameEnded=true;alert('遊戲結束!')}function gameWon(){clearInterval(timerInterval);const cells=document.querySelectorAll('.cell');cells.forEach((cell)=>{cell.removeEventListener('click',revealCell);cell.removeEventListener('contextmenu',markCell)});gameEnded=true;alert('恭喜！過關了！')}generateMinePositions();const gridContainer=document.querySelector('.grid-container');for(let i=0;i<totalCells;i++){const cell=document.createElement('div');cell.classList.add('cell');cell.addEventListener('click',function(){revealCell(this)});cell.addEventListener('contextmenu',function(e){e.preventDefault();markCell(this)});gridContainer.appendChild(cell)}const mineCountElement=document.getElementById('mineCount');mineCountElement.innerText=`地雷數量:0/${totalMines}`;</script></body></html>

然後另存新檔

存檔類型改為所有檔案

檔案名稱副檔名改成.html

編碼設定成UTF-8

再來是地雷還有旗子的圖檔