请你写出具体代码
时间: 2024-02-13 07:05:00 浏览: 26
好的,以下是一个简单的 HTML、CSS 和 JavaScript 手机枪战游戏的代码示例。由于篇幅限制,我只提供部分代码,供你参考。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>反恐精英</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="game-container">
<div class="soldier"></div>
<div class="enemy"></div>
<div class="bullet"></div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
.game-container {
position: relative;
width: 100vw;
height: 100vh;
background-color: black;
}
.soldier {
position: absolute;
left: 50%;
top: 80%;
transform: translate(-50%, -50%) rotate(180deg);
width: 80px;
height: 80px;
background-image: url(soldier.png);
background-size: cover;
}
.enemy {
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-image: url(enemy.png);
background-size: cover;
}
.bullet {
position: absolute;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
}
```
JavaScript 代码:
```javascript
var soldier = document.querySelector('.soldier');
var enemy = document.querySelector('.enemy');
var bullet = document.querySelector('.bullet');
var score = 0;
soldier.addEventListener('touchstart', function(event) {
var targetX = event.touches[0].clientX;
var targetY = event.touches[0].clientY;
var soldierX = soldier.getBoundingClientRect().left + soldier.offsetWidth / 2;
var soldierY = soldier.getBoundingClientRect().top + soldier.offsetHeight / 2;
var dx = targetX - soldierX;
var dy = targetY - soldierY;
var angle = Math.atan2(dy, dx) * 180 / Math.PI;
soldier.style.transform = 'translate(-50%, -50%) rotate(' + angle + 'deg)';
});
bullet.addEventListener('touchstart', function(event) {
var targetX = event.touches[0].clientX;
var targetY = event.touches[0].clientY;
var soldierX = soldier.getBoundingClientRect().left + soldier.offsetWidth / 2;
var soldierY = soldier.getBoundingClientRect().top + soldier.offsetHeight / 2;
var dx = targetX - soldierX;
var dy = targetY - soldierY;
var angle = Math.atan2(dy, dx) * 180 / Math.PI;
bullet.style.transform = 'translate(-50%, -50%) rotate(' + angle + 'deg)';
var intervalId = setInterval(function() {
var bulletX = bullet.getBoundingClientRect().left + bullet.offsetWidth / 2;
var bulletY = bullet.getBoundingClientRect().top + bullet.offsetHeight / 2;
var enemyX = enemy.getBoundingClientRect().left + enemy.offsetWidth / 2;
var enemyY = enemy.getBoundingClientRect().top + enemy.offsetHeight / 2;
var distance = Math.sqrt(Math.pow(bulletX - enemyX, 2) + Math.pow(bulletY - enemyY, 2));
if (distance < enemy.offsetWidth / 2) {
score++;
document.querySelector('.score').textContent = 'Score: ' + score;
clearInterval(intervalId);
bullet.style.display = 'none';
enemy.style.display = 'none';
setTimeout(function() {
bullet.style.display = 'block';
enemy.style.display = 'block';
enemy.style.left = Math.random() * (window.innerWidth - enemy.offsetWidth) + 'px';
enemy.style.top = Math.random() * (window.innerHeight - enemy.offsetHeight) + 'px';
}, 1000);
} else if (bulletY < 0 || bulletY > window.innerHeight || bulletX < 0 || bulletX > window.innerWidth) {
clearInterval(intervalId);
bullet.style.display = 'none';
setTimeout(function() {
bullet.style.display = 'block';
}, 1000);
} else {
bullet.style.top = bullet.offsetTop - Math.sin(angle * Math.PI / 180) * 10 + 'px';
bullet.style.left = bullet.offsetLeft + Math.cos(angle * Math.PI / 180) * 10 + 'px';
};
}, 50);
});
setInterval(function() {
var soldierX = soldier.getBoundingClientRect().left + soldier.offsetWidth / 2;
var soldierY = soldier.getBoundingClientRect().top + soldier.offsetHeight / 2;
var enemyX = enemy.getBoundingClientRect().left + enemy.offsetWidth / 2;
var enemyY = enemy.getBoundingClientRect().top + enemy.offsetHeight / 2;
var distance = Math.sqrt(Math.pow(soldierX - enemyX, 2) + Math.pow(soldierY - enemyY, 2));
if (distance < soldier.offsetWidth / 2 + enemy.offsetWidth / 2) {
alert('Game Over\nScore: ' + score);
location.reload();
};
}, 50);
```
以上是一个简单的手机枪战游戏的代码示例,你可以根据自己的需求和想法进行修改和扩展。