新增一個.txt的記事本
將下列程式碼全數複製至.txt記事本中
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>揍魔王!</title><style>#container{position:relative;width:500px;height:500px;border:1px solid#000}.mole{position:absolute;width:50px;height:50px;background-image:url('pic/mouse.png');background-size:cover;transition:opacity 0.5s}.mole.hit{background-image:url('pic/attack.png');opacity:0;transition:opacity 0.5s}</style></head><body><h1 style="margin-left: 180px">揍魔王!</h1><div id="container"></div><br><button id="startButton">開始揍魔王!</button> <button id="resetButton">重置遊戲</button><p id="score">海扁魔王次數:0</p><script>document.addEventListener('DOMContentLoaded',function(){var container=document.getElementById('container');var startButton=document.getElementById('startButton');var resetButton=document.getElementById('resetButton');var scoreElement=document.getElementById('score');var score=0;var gameInterval;container.addEventListener('click',function(event){var target=event.target;if(target.classList.contains('mole')){target.classList.add('hit');target.style.transform='translateX(0.8cm)';target.style.opacity=0;score++;scoreElement.textContent='海扁魔王次數: '+score;target.addEventListener('transitionend',function(){target.remove()})}});function createMole(){var mole=document.createElement('div');mole.className='mole';mole.style.top=getRandomPosition()+'px';mole.style.left=getRandomPosition()+'px';container.appendChild(mole)}function getRandomPosition(){return Math.floor(Math.random()*450)}startButton.addEventListener('click',function(){if(!gameInterval){score=0;scoreElement.textContent='海扁魔王次數: '+score;gameInterval=setInterval(createMole,1000)}});resetButton.addEventListener('click',function(){clearInterval(gameInterval);gameInterval=null;container.innerHTML='';score=0;scoreElement.textContent='海扁魔王次數: '+score})});</script></body></html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>揍魔王!</title><style>#container{position:relative;width:500px;height:500px;border:1px solid#000}.mole{position:absolute;width:50px;height:50px;background-image:url('pic/mouse.png');background-size:cover;transition:opacity 0.5s}.mole.hit{background-image:url('pic/attack.png');opacity:0;transition:opacity 0.5s}</style></head><body><h1 style="margin-left: 180px">揍魔王!</h1><div id="container"></div><br><button id="startButton">開始揍魔王!</button> <button id="resetButton">重置遊戲</button><p id="score">海扁魔王次數:0</p><script>document.addEventListener('DOMContentLoaded',function(){var container=document.getElementById('container');var startButton=document.getElementById('startButton');var resetButton=document.getElementById('resetButton');var scoreElement=document.getElementById('score');var score=0;var gameInterval;container.addEventListener('click',function(event){var target=event.target;if(target.classList.contains('mole')){target.classList.add('hit');target.style.transform='translateX(0.8cm)';target.style.opacity=0;score++;scoreElement.textContent='海扁魔王次數: '+score;target.addEventListener('transitionend',function(){target.remove()})}});function createMole(){var mole=document.createElement('div');mole.className='mole';mole.style.top=getRandomPosition()+'px';mole.style.left=getRandomPosition()+'px';container.appendChild(mole)}function getRandomPosition(){return Math.floor(Math.random()*450)}startButton.addEventListener('click',function(){if(!gameInterval){score=0;scoreElement.textContent='海扁魔王次數: '+score;gameInterval=setInterval(createMole,1000)}});resetButton.addEventListener('click',function(){clearInterval(gameInterval);gameInterval=null;container.innerHTML='';score=0;scoreElement.textContent='海扁魔王次數: '+score})});</script></body></html>
複製完畢後選擇另存新檔
存檔類型改為所有檔案
檔案名稱副檔名改成.html
編碼設定成UTF-8
最後是圖檔包
按右鍵新增一個資料夾
並把資料夾名稱改為pic
最後把下面這兩個圖檔抓下來
鯊魚尻人的圖命名為 attack.png
勇造大頭命名為 mouse.png
改好名稱後丟到pic的資料夾內
最後將這兩個檔案放在同個目錄就可以開始玩了
