前端飛機大戰小遊戲
一、案例效果
二、實現思路
- 創建遊戲背景板；
- 創建我方戰機，滑鼠進入遊戲面板後其隨滑鼠軌跡運動； onmousemove
- 創建子彈，讓子彈周期性的在戰機處發出並讓其向 top 值減小的方向(向上)移動，top 小於 0 也就是子彈走出遊戲面板時刪除自身；
- 創建敵機，讓敵機周期性的在遊戲背景板左側的隨機距離的位置產生，並讓其向 top 增加的方向(向下)移動；
- 定義函數，子彈和敵機相遇時消失。
條件：所有的元素都只在滑鼠進入遊戲背景區域時才觸發運動。
三、完整程式碼+詳細注釋
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>飛機大戰</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 背景 */
#background {
width: 320px;
height: 580px;
background-image: url(./img/bg.jpg);
margin: auto;
}
/* 我方飛機 */
#my_fly {
width: 30px;
height: 30px;
position: absolute;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 遊戲面板 -->
<div id="background"></div>
</body>
<script>
//創建我方戰機
var fly = document.createElement('div'); //創建一個div
fly.id = 'my_fly'; //為div添加id名
fly.innerHTML = '<img src ="./img/my_fly.png" width=30px height=30px>'; //在div中插入飛機的圖片
document.body.appendChild(fly); //將剛創建的div追加到body中
//使飛機滑鼠跟隨
document.onmousemove = function (e) { //onmousemove 當滑鼠移動時觸發事件
var fly = document.getElementById('my_fly'); //獲取我方戰機
var bg = document.getElementById('background'); //獲取背景
var fly_X = e.clientX - 20; //獲取滑鼠的坐標 -20是減去飛機寬高的一半，以達到飛機中心與滑鼠對應
var fly_Y = e.clientY - 20;
//遊戲背景的區域
var bgX = fly_X > bg.offsetLeft && fly_X < bg.offsetLeft + bg.offsetWidth - 30;
var bgY = fly_Y > bg.offsetTop && fly_Y < bg.offsetTop + bg.offsetHeight - 30;
if (bgX && bgY) { //只有在遊戲背景區域內飛機才跟隨滑鼠移動
fly.style.top = fly_Y + 'px'; //將滑鼠此時的坐標賦值給我方飛機
fly.style.left = fly_X + 'px';
//此時飛機跟隨滑鼠移動，我們為該行為定義一個屬性
fly.follow = true; //今後follow為true則代表飛機可跟隨滑鼠移動，false則相反
}
}
//創建子彈
var objB = { //子彈相關變數
name: 'bullet', //名稱
num: 1, //數量
arr: [], //子彈的屬性['id|top|left']
width: 5, //子彈寬
height: 10, //子彈高
path: './img/bullet.png'
}
creatBullet(objB);
function creatBullet(obj) {
setInterval(function () {
var fly = document.getElementById('my_fly');
if (fly.follow) { //當飛機可跟隨滑鼠移動時可以發射子彈
var bull = document.createElement('div'); //創建div元素作為子彈
bull.id = obj.name + obj.num; //子彈的id名隨創建數量不斷變化(因為id值唯一)
var length = obj.arr.length;
if (length < 40) {
obj.arr[length] = bull.id + '|';
obj.num++;
bull.style.width = obj.width + 'px'; //子彈的相關屬性
bull.style.height = obj.height + 'px';
bull.style.position = 'absolute';
bull.style.background = 'url(' + obj.path + ')';
bull.style.top = parseInt(fly.style.top) + 'px'; //子彈發出的位置
obj.arr[length] = obj.arr[length] + bull.style.top + '|';
bull.style.left = parseInt(fly.style.left) + 12 + 'px';
obj.arr[length] = obj.arr[length] + bull.style.left;
}
document.body.appendChild(bull); //將子彈添加到body
}
}, 700)
}
//讓子彈運動起來
function moveBullet() {
var fly = document.getElementById('my_fly');
if (fly.follow) {
for (var i = 0; i < objB.arr.length; i++) { //遍歷子彈的對象
var newArr = objB.arr[i].split('|'); //將數組arr中的元素切割出來放入新數組
var eleB = document.getElementById(newArr[0]);
//切割後第0項為id 第一項為top 第二項為left
newArr[1] = parseInt(newArr[1]) - 1; //數組第一項為top，不斷減1則子彈便會向上運動
eleB.style.top = newArr[1] + 'px';
objB.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
if (newArr[1] < 0) { //第一項為top，當top小於0 也就是子彈走出遊戲面板時刪除該子彈
objB.arr.splice(i, 1);
var delEle = document.getElementById(newArr[0]); //獲取走出面板的子彈
delEle.parentNode.removeChild(delEle); //刪除自身
}
}
}
}
//創建敵機（與創建子彈類似）
var objF = { //敵機相關變數
name: 'foe', //名稱
num: 1, //數量
arr: [], //敵機的屬性['id|top|left']
width: 34, //敵機寬
height: 24, //敵機高
path: './img/he_fly.png'
}
creatFoe(objF);
function creatFoe(obj) {
setInterval(function () {
var fly = document.getElementById('my_fly');
var bg = document.getElementById('background'); //獲取背景
if (fly.follow) { //當飛機可跟隨滑鼠移動時出現敵機
var bull = document.createElement('div'); //創建div元素作為敵機
bull.id = obj.name + obj.num; //子彈的id名隨創建數量不斷變化(因為id值唯一)
var length = obj.arr.length;
if (length < 40) {
obj.arr[length] = bull.id + '|';
obj.num++;
bull.style.width = obj.width + 'px';
bull.style.height = obj.height + 'px';
bull.style.position = 'absolute';
bull.style.background = 'url(' + obj.path + ')';
bull.style.top = 0; //敵機的頂部初始位置為0
obj.arr[length] = obj.arr[length] + bull.style.top + '|';
bull.style.left = bg.offsetLeft + 290 * Math.random() + 'px'; //敵機的左側初始位置為隨機
obj.arr[length] = obj.arr[length] + bull.style.left;
}
document.body.appendChild(bull); //將敵機添加到body
}
}, 1000)
}
//讓敵機運動起來
function moveFoe() {
var fly = document.getElementById('my_fly');
var bg = document.getElementById('background'); //獲取背景
if (fly.follow) {
for (var i = 0; i < objF.arr.length; i++) { //遍歷敵機的對象
var newArr = objF.arr[i].split('|'); //將數組arr中的元素切割出來放入新數組
var eleB = document.getElementById(newArr[0]);
//切割後第0項為id 第一項為top 第二項為left
newArr[1] = parseInt(newArr[1]) + 1; //數組第一項為top，不斷加1則飛機便會向下運動
eleB.style.top = newArr[1] + 'px';
objF.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
if (newArr[1] > bg.offsetLeft - 30) {
objF.arr.splice(i, 1);
var delEle = document.getElementById(newArr[0]);
delEle.parentNode.removeChild(delEle);
}
}
}
}
//調用運動函數
setInterval(function () {
moveBullet(); //子彈運動
moveFoe(); //敵機運動
//子彈和敵機相遇時消失
for (var i = 0; i < objF.arr.length; i++) {
var newArr = objF.arr[i].split('|');
var eleF = document.getElementById(newArr[0]);
var xFS = parseInt(newArr[2]);
var xFE = parseInt(newArr[2]) + 34;
var yFS = parseInt(newArr[1]);
var yFE = parseInt(newArr[1]) + 24;
for (var j = 0; j < objB.arr.length; j++) {
var newArr1 = objB.arr[j].split('|');
var eleB = document.getElementById(newArr1[0]);
var xB = parseInt(newArr1[2]);
var yB = parseInt(newArr1[1]);
var xCheck = xB > xFS && xB < xFE;
var yCheck = yB > yFS && yB < yFE;
if (xCheck && yCheck) {
objF.arr.splice(i, 1);
eleF.parentNode.removeChild(eleF);
objB.arr.splice(j, 1);
eleB.parentNode.removeChild(eleB);
}
}
}
}, 10)
</script>
</html>
