效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#view {
width: 320px;
height: 568px;
background: url('./img/bg.png');
margin: 0 auto;
}
#fly_me {
width: 34px;
height: 24px;
position: absolute;
}
</style>
</head>
<body>
<div id="view"></div>
</body>
<script>
// 创建战机
var flyEle = document.createElement('div');
flyEle.id = 'fly_me';
flyEle.innerHTML = '<img src = "./img/me.png" />';
document.body.appendChild(flyEle);
// 战机跟随鼠标
document.onmousemove = function (e) {
var flyEle = document.getElementById('fly_me');
var view = document.getElementById('view');
console.log(e)
//减去飞机自身的一半,让飞机中心跟随鼠标 e.client是鼠标的位置
var flyX = e.clientX - 17;
var flyY = e.clientY - 12;
//让飞机在游戏框内才能跟随鼠标
var xCheck = flyX > view.offsetLeft && flyX < view.offsetLeft + view.offsetWidth - 34;
var yCheck = flyY > view.offsetTop && flyY < view.offsetTop + view.offsetHeight - 24;
if (xCheck && yCheck) {
flyEle.style.top = flyY + 'px';
flyEle.style.left = flyX + 'px';
flyEle.flag = true;
}
}
// 创建子弹
var objB = { //子弹的相关值
name: 'bullet',
num: 1,
arr: [],// ['id|top|left']
width: 6,
height: 14,
path: './img/b.png'
};
createBullet(objB);
function createBullet(obj) {
setInterval(function () {
var flyEle = document.getElementById('fly_me');
if (flyEle.flag) {
//ele是子弹元素名称,每个子弹id为bullet1、2……
var ele = document.createElement('div');
ele.id = obj.name + obj.num;
var length = obj.arr.length;
if (length < 50) {
obj.arr[length] = ele.id + '|'; //arr[0]=bullet1|
obj.num++;//2
ele.style.width = obj.width + "px";
ele.style.height = obj.height + "px";
ele.style.position = 'absolute';
ele.style.background = 'url(' + obj.path + ')';
//flyEle.style.top是带单位的,parseInt把单位去掉,+6是和飞机有一段小距离
//+14本来是在17飞机中间的,但是子弹也有宽度,让子弹也在中间就减去飞机的宽度一般为14
ele.style.top = parseInt(flyEle.style.top) + 6 + 'px';
obj.arr[length] = obj.arr[length] + ele.style.top + '|';
ele.style.left = parseInt(flyEle.style.left) + 14 + 'px';
obj.arr[length] = obj.arr[length] + ele.style.left;
console.log(obj.arr[length])
}
document.body.appendChild(ele);
}
}, 1000)
}
// 让子弹运动其起来
function moveBullet() {
var flyEle = document.getElementById('fly_me');
if (flyEle.flag) {
for (var i = 0; i < objB.arr.length; i++) {
//split() 方法用于把一个字符串分割成字符串数组。
var newArr = objB.arr[i].split('|');
//通过子弹的id得到子弹元素eleB,进行操作
var eleB = document.getElementById(newArr[0]);
//让子弹向上运动1
newArr[1] = parseInt(newArr[1]) - 1;
eleB.style.top = newArr[1] + 'px';
//让子弹向上移动1后,重新记录到arr数组里
objB.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
//超出边界就会消失,删除数组里存储的并删除该子弹节点
if (newArr[1] < 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/foe.png'
};
createFoe(objF);
function createFoe(obj) {
setInterval(function () {
var flyEle = document.getElementById('fly_me');
if (flyEle.flag) {
var ele = document.createElement('div');
ele.id = obj.name + obj.num;
var length = obj.arr.length;
if (length < 50) {
obj.arr[length] = ele.id + '|';
obj.num++;
ele.style.width = obj.width + "px";
ele.style.height = obj.height + "px";
ele.style.position = 'absolute';
ele.style.background = 'url(' + obj.path + ')';
ele.style.top = 0;
obj.arr[length] = obj.arr[length] + ele.style.top + '|';
//Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值,
//游戏框是320,减去飞机的宽度,为286
var ran = Math.random() * 286;
ele.style.left = view.offsetLeft + ran + 'px';
obj.arr[length] = obj.arr[length] + ele.style.left;
}
document.body.appendChild(ele);
}
}, 1000)
}
// 让敌机运动其起来,和让子弹运动起来类似,简单修改一下即可
function moveFoe() {
var flyEle = document.getElementById('fly_me');
if (flyEle.flag) {
for (var i = 0; i < objF.arr.length; i++) {
var newArr = objF.arr[i].split('|');
var eleB = document.getElementById(newArr[0]);
newArr[1] = parseInt(newArr[1]) + 1;
eleB.style.top = newArr[1] + 'px';
objF.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
//飞机的高度是24
if (newArr[1] > view.offsetHeight - 24) {
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]);
//弄出敌机x,y轴上的开始和结束位置
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]);
//相碰的情况要同时满足x,y轴上的
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>
图片:
b.png:
foe.png:
me.png:
bg.png: