HTML是一種非常強大的標記語言,可以用于創建網站和游戲等。在HTML中,我們可以使用JavaScript來添加游戲邏輯和動態效果。下面是一個簡單的HTML射擊小游戲代碼:
<html> <head> <title>HTML射擊小游戲</title> <script> var score=0; // 初始化得分為0 var highScore=0; //初始化最高分為0 function shoot(){ // 射擊函數 score++; // 增加得分 if(score>highScore){ // 更新最高分 highScore=score; } document.getElementById('score').innerHTML=score; // 更新得分顯示 document.getElementById('highScore').innerHTML=highScore; // 更新最高分顯示 } function start(){ // 游戲開始函數 score=0; // 初始化得分為0 document.getElementById('score').innerHTML=score; // 清空得分顯示 } </script> </head> <body> <h1>HTML射擊小游戲</h1> <h2>得分: <span id="score">0</span></h2> <h2>最高分: <span id="highScore">0</span></h2> <div onclick="shoot()" style="width:100px;height:100px;background-color:red;cursor:pointer;"></div> <br/> <button onclick="start()">重新開始</button> </body> </html>
在這個游戲中,我們可以看到一個紅色的正方形,玩家需要點擊這個正方形來發射子彈。每發射一顆子彈,玩家的得分就會增加1分。在屏幕左上角顯示玩家的得分,同時還有一個最高分的顯示。玩家可以通過點擊“重新開始”按鈕來重新開始游戲。在代碼中,我們使用了JavaScript來實現游戲邏輯。我們定義了兩個函數,一個是射擊函數“shoot()”,另一個是游戲開始函數“start()”。在射擊函數中,我們會增加玩家的得分,并檢查是否需要更新最高分。在游戲開始函數中,我們會初始化得分,并清空得分顯示。
HTML射擊小游戲代碼非常簡單,它展示了HTML和JavaScript的強大功能,能夠讓我們創造出各種各樣的游戲和交互效果。