使用前端写一个原生版的愤怒的小鸟
时间: 2023-06-24 14:04:36 浏览: 67
好的,让我们来写一个原生的愤怒小鸟游戏。
首先,我们需要准备一些素材。我们可以在网上搜索愤怒小鸟的图像,并将它们保存在本地。
接下来,我们需要创建一个 HTML 文件,并添加相应的元素和样式。我们可以使用 CSS 来创建一个简单的游戏场景,包括一些木头和石头的障碍物。
```html
<!DOCTYPE html>
<html>
<head>
<title>Angry Birds</title>
<style>
#game {
width: 600px;
height: 400px;
background: url('background.jpg') no-repeat center center;
background-size: cover;
position: relative;
}
.obstacle {
width: 50px;
height: 50px;
position: absolute;
background: url('stone.png') no-repeat center center;
background-size: contain;
}
#wood1 {
top: 300px;
left: 100px;
transform: rotate(10deg);
}
#wood2 {
top: 250px;
left: 350px;
transform: rotate(-10deg);
}
#wood3 {
top: 150px;
left: 450px;
transform: rotate(20deg);
}
#bird {
width: 40px;
height: 40px;
position: absolute;
background: url('bird.png') no-repeat center center;
background-size: contain;
top: 300px;
left: 50px;
}
</style>
</head>
<body>
<div id="game">
<div id="wood1" class="obstacle"></div>
<div id="wood2" class="obstacle"></div>
<div id="wood3" class="obstacle"></div>
<div id="bird"></div>
</div>
</body>
</html>
```
现在,我们需要添加一些 JavaScript 来使小鸟可以被拖拽,并以一个给定的速度向右移动。我们还需要检测小鸟与障碍物的碰撞,并在碰撞发生时将障碍物移除。
```html
<!DOCTYPE html>
<html>
<head>
<title>Angry Birds</title>
<style>
#game {
width: 600px;
height: 400px;
background: url('background.jpg') no-repeat center center;
background-size: cover;
position: relative;
}
.obstacle {
width: 50px;
height: 50px;
position: absolute;
}
#wood1 {
top: 300px;
left: 100px;
transform: rotate(10deg);
background: url('wood.png') no-repeat center center;
background-size: contain;
}
#wood2 {
top: 250px;
left: 350px;
transform: rotate(-10deg);
background: url('wood.png') no-repeat center center;
background-size: contain;
}
#wood3 {
top: 150px;
left: 450px;
transform: rotate(20deg);
background: url('wood.png') no-repeat center center;
background-size: contain;
}
#bird {
width: 40px;
height: 40px;
position: absolute;
background: url('bird.png') no-repeat center center;
background-size: contain;
top: 300px;
left: 50px;
}
</style>
</head>
<body>
<div id="game">
<div id="wood1" class="obstacle"></div>
<div id="wood2" class="obstacle"></div>
<div id="wood3" class="obstacle"></div>
<div id="bird"></div>
</div>
<script>
const bird = document.getElementById('bird');
let isDragging = false;
let startPosition = { x: 0, y: 0 };
let currentPosition = { x: 0, y: 0 };
let velocity = { x: 10, y: 0 };
let intervalId = null;
bird.addEventListener('mousedown', (event) => {
isDragging = true;
startPosition = { x: event.clientX, y: event.clientY };
currentPosition = { x: bird.offsetLeft, y: bird.offsetTop };
clearInterval(intervalId);
});
document.addEventListener('mousemove', (event) => {
if (!isDragging) return;
const dx = event.clientX - startPosition.x;
const dy = event.clientY - startPosition.y;
bird.style.left = `${currentPosition.x + dx}px`;
bird.style.top = `${currentPosition.y + dy}px`;
});
document.addEventListener('mouseup', (event) => {
isDragging = false;
const dx = event.clientX - startPosition.x;
const dy = event.clientY - startPosition.y;
velocity = { x: dx / 10, y: dy / 10 };
intervalId = setInterval(moveBird, 30);
});
function moveBird() {
currentPosition.x += velocity.x;
currentPosition.y += velocity.y;
bird.style.left = `${currentPosition.x}px`;
bird.style.top = `${currentPosition.y}px`;
const obstacles = document.querySelectorAll('.obstacle');
obstacles.forEach((obstacle) => {
if (isColliding(bird, obstacle)) {
obstacle.remove();
}
});
if (currentPosition.x > 600) {
clearInterval(intervalId);
bird.style.left = '50px';
bird.style.top = '300px';
velocity = { x: 10, y: 0 };
}
}
function isColliding(a, b) {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
return !(
aRect.bottom < bRect.top ||
aRect.top > bRect.bottom ||
aRect.right < bRect.left ||
aRect.left > bRect.right
);
}
</script>
</body>
</html>
```
现在我们就完成了一个简单的愤怒小鸟游戏。当你在游戏中拖拽小鸟并松开鼠标时,小鸟会按照你的拖动方向以一定速度向右移动,并与障碍物碰撞时将其移除。