HTML微信打飛機代碼是一種非常流行的網頁小游戲，它可以通過簡單的HTML和JavaScript代碼實現。在這個游戲中，你將控制一個小飛機進入戰斗，射擊敵人并躲避敵人的攻擊。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微信打飛機</title>
<style>
/* 飛機的樣式 */
#plane {
position: absolute;
width: 60px;
height: 80px;
left: 50%;
margin-left: -30px;
bottom: 20px;
background-image: url('plane.png');
background-size: 100% 100%;
}
/* 子彈的樣式 */
.bullet {
position: absolute;
width: 8px;
height: 14px;
background-color: yellow;
}
/* 敵人的樣式 */
.enemy {
position: absolute;
width: 60px;
height: 80px;
background-image: url('enemy.png');
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="plane"></div>
<script>
var plane = document.getElementById('plane');
var bullets = [];
// 發射子彈
function shoot() {
var bullet = document.createElement('div');
bullet.className = 'bullet';
bullet.style.left = plane.offsetLeft + plane.offsetWidth / 2 - 4 + 'px';
bullet.style.bottom = plane.offsetHeight + 20 + 'px';
document.body.appendChild(bullet);
bullets.push(bullet);
}
// 移動子彈
function moveBullets() {
for (var i = 0; i < bullets.length; i++) {
var bullet = bullets[i];
bullet.style.bottom = parseInt(bullet.style.bottom) + 10 + 'px';
if (parseInt(bullet.style.bottom) > window.innerHeight) {
document.body.removeChild(bullet);
bullets.splice(i, 1);
i--;
}
}
}
// 創建敵人
function createEnemy() {
var enemy = document.createElement('div');
enemy.className = 'enemy';
enemy.style.left = Math.floor(Math.random() * (window.innerWidth - 60)) + 'px';
enemy.style.top = '-80px';
document.body.appendChild(enemy);
}
// 移動敵人
function moveEnemies() {
var enemies = document.getElementsByClassName('enemy');
for (var i = 0; i < enemies.length; i++) {
var enemy = enemies[i];
enemy.style.top = parseInt(enemy.style.top) + 10 + 'px';
// 判斷是否和飛機碰撞
if (isCollide(enemy, plane)) {
alert('GameOver');
}
// 判斷是否和子彈碰撞
for (var j = 0; j < bullets.length; j++) {
var bullet = bullets[j];
if (isCollide(enemy, bullet)) {
document.body.removeChild(enemy);
enemies.splice(i, 1);
i--;
document.body.removeChild(bullet);
bullets.splice(j, 1);
j--;
break;
}
}
}
}
// 判斷是否碰撞
function isCollide(obj1, obj2) {
var rect1 = obj1.getBoundingClientRect();
var rect2 = obj2.getBoundingClientRect();
var x1 = rect1.left;
var y1 = rect1.top;
var x2 = rect2.left;
var y2 = rect2.top;
var w1 = obj1.offsetWidth;
var h1 = obj1.offsetHeight;
var w2 = obj2.offsetWidth;
var h2 = obj2.offsetHeight;
if (x1 + w1 < x2 || x1 > x2 + w2 || y1 + h1 < y2 || y1 > y2 + h2) {
return false;
} else {
return true;
}
}
setInterval(moveBullets, 50);
setInterval(moveEnemies, 50);
setInterval(createEnemy, 1000);
setInterval(shoot, 200);
</script>
</body>
</html>上面的代碼中，我們使用CSS樣式來定義飛機，子彈和敵人的外觀。同時，我們使用JavaScript來實現發射子彈，移動子彈，創建敵人和移動敵人等各種功能。我們還使用了isCollide函數來判斷是否發生了碰撞。最終，我們通過定時器來不斷地更新頁面，從而實現了這個簡單又有趣的微信打飛機游戲。
上一篇vue導出源代碼
下一篇python 控制臺位置