在網(wǎng)頁設計中，HTML是必不可少的一部分。除了可以用來呈現(xiàn)頁面結構、內容和格式之外，還可以用來實現(xiàn)簡單的互動功能，例如射擊游戲。
<!DOCTYPE html>
<html>
<head>
<title>射擊游戲</title>
<style>
/* 游戲背景 */
body {
background-color: #7ad7f0;
}
/* 目標圖像 */
.target {
position: absolute;
width: 50px;
height: 50px;
background-image: url('target.png');
background-size: cover;
cursor: pointer;
}
/* 瞄準器 */
.crosshair {
position: absolute;
width: 50px;
height: 50px;
background-image: url('crosshair.png');
background-size: cover;
}
</style>
</head>
<body>
<div class="target"></div>
<div class="crosshair"></div>
<script>
var target = document.querySelector('.target');
var crosshair = document.querySelector('.crosshair');
var score = 0;
// 點擊目標增加分數(shù)
target.onclick = function() {
score += 10;
alert('得分：' + score);
};
// 鼠標移動時，瞄準器跟隨移動
window.onmousemove = function(e) {
crosshair.style.left = e.clientX - 25 + 'px';
crosshair.style.top = e.clientY - 25 + 'px';
};
</script>
</body>
</html>以上代碼實現(xiàn)了一個簡單的射擊游戲。游戲的背景色為藍色，游戲中包含一個目標圖片和一個瞄準器。鼠標的移動會使得瞄準器跟隨鼠標移動。當點擊目標時，會增加10分并出現(xiàn)得分提示框。代碼中主要包括HTML結構、CSS樣式和JavaScript代碼。
上一篇mysql分庫分表面試題
下一篇html射擊游戲代碼