版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
链接：https://pan.baidu.com/s/1x83CpunSj43KsdtxcrVX_w&shfl=sharepset
提取码：vt2s
目录结构：
- html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="contain">
<div class="bg1"></div>
<div class="bg2"></div>
<div class="airplane"></div>
<div class="start">游戏开始</div>
<div class="grade">分数: 0</div>
</div>
<script src="js/util.js"></script>
<script src="js/main.js"></script>
</body>
</html>
- css
body {
background: beige;
}
* {
margin: 0;
padding: 0;
}
#contain,
.bg1,
.bg2 {
width: 460px;
height: 500px;
overflow: hidden;
}
#contain {
margin: 20px auto;
position: relative;
}
.bg1 {
position: absolute;
top: 0;
left: 0;
background-image: url(../img/bg.jpg);
}
.bg2 {
position: absolute;
top: -500px;
background-image: url(../img/bg.jpg);
}
.airplane {
width: 60px;
height: 60px;
background-image: url(../img/airplane.png);
position: absolute;
top: 440px;
left: 200px;
}
.bull {
width: 10px;
height: 10px;
background-image: url(../img/bull2.png);
position: absolute;
}
.enemy {
width: 30px;
height: 30px;
background-image: url(../img/enemy1.png);
position: absolute;
}
.start {
width: 100px;
line-height: 50px;
color: hotpink;
text-align: center;
position: absolute;
top: 200px;
left: 180px;
}
.grade {
width: 100px;
line-height: 50px;
color: red;
text-align: center;
position: absolute;
}
- js-util:
/**
* 产生随机整数，包含下限值，但不包括上限值
* @param {Number} lower 下限
* @param {Number} upper 上限
* @return {Number} 返回在下限到上限之间的一个随机整数
*/
function random(lower, upper) {
return Math.floor(Math.random() * (upper - lower)) + lower;
}
//矩形碰撞检测
function crashChecked(obj1, obj2) {
var t1 = obj1.offsetTop;
var l1 = obj1.offsetLeft;
var r1 = obj1.offsetLeft + obj1.offsetWidth;
var b1 = obj1.offsetTop + obj1.offsetHeight;
var t2 = obj2.offsetTop;
var l2 = obj2.offsetLeft;
var r2 = obj2.offsetLeft + obj2.offsetWidth;
var b2 = obj2.offsetTop + obj2.offsetHeight;
if (!(b1 < t2 || l1 > r2 || t1 > b2 || r1 < l2)) { // 表示碰上
return true;
} else {
return false;
}
}
//碰撞边缘检测
/**
*
* @param {小盒子} obj1
* @param {大盒子} obj2
*/
function check_border_collision(obj1,obj2){
//获取obj1当前的左距离和顶距离,盒子的宽和高
var style1 = window.getComputedStyle(obj1);
var left1 = parseInt(style1.left);
var top1 = parseInt(style1.top);
var w1 = parseInt(style1.width);
var h1 = parseInt(style1.height);
//获取obj2的宽和高
var style2 = window.getComputedStyle(obj2);
var w2 = parseInt(style2.width);
var h2 = parseInt(style2.height);
//检测上下左右是否碰撞
if(left1 < 0){
left1=0;
}
if(top1<0){
top1=0;
}
if(left1>w2-w1){
left1 = w2-w1;
}
if(top1>h2-h1){
top1 = h2-h1;
}
//将位置设置到obj1的样式上
obj1.style.left=left1+"px";
obj1.style.top=top1+"px";
}
- js-main:
const bg1 = document.querySelector('.bg1');
const bg2 = document.querySelector('.bg2');
//背景移动
timer = setInterval(
function () {
bg1.style.top = bg1.offsetTop + 1 + 'px';
bg2.style.top = bg2.offsetTop + 1 + 'px';
if (bg1.offsetTop >= 500) {
bg1.style.top = '-500px';
}
if (bg2.offsetTop >= 500) {
bg2.style.top = '-500px';
}
}, 11);
//点击开始
var start = document.querySelector('.start');
start.first = 0;
start.addEventListener('click', function () {
start.innerHTML = '';
//重新开始游戏
if(start.first == 1){
location.reload();
}
//飞机拖拽
const mainScreen = document.querySelector('#contain');
const airplane = document.querySelector('.airplane');
//点击飞机开始
airplane.addEventListener('mousedown', function (e) {
const evt = e || window.event;
//获取点击的位置
baseX = evt.pageX;
baseY = evt.pageY;
//设置移动初始距离
moveX = 0;
moveY = 0;
//移动鼠标飞机移动
mainScreen.addEventListener('mousemove', function (e) {
const evt1 = e || window.event;
moveX = evt1.pageX - baseX;
baseX = evt1.pageX;
moveY = evt1.pageY - baseY;
baseY = evt1.pageY;
airplane.style.left = airplane.offsetLeft + moveX + 'px';
airplane.style.top = airplane.offsetTop + moveY + 'px';
check_border_collision(airplane,mainScreen);
}, false);
}, false);
//子弹
timerBull = setInterval(function () {
//创建子弹对象
const bull = document.createElement('div');
mainScreen.appendChild(bull);
bull.className = 'bull';
//设置初始位置
bull.style.top = airplane.offsetTop - 10 + 'px';
bull.style.left = airplane.offsetLeft + 25 + 'px';
//让子弹飞
timerBullFly = setInterval(function () {
bull.style.top = bull.offsetTop - 10 + 'px';
//移除子弹
if (bull.offsetTop <= -20) {
mainScreen.removeChild(bull);
}
}, 100);
bull.timer = timerBullFly;
}, 600);
//敌人 enemy
timerEnemy = setInterval(function () {
//创建敌机对象
const enemy = document.createElement('div');
mainScreen.appendChild(enemy);
enemy.className = 'enemy';
//设置初始位置
enemy.style.top = 0 + 'px';
enemy.style.left = random(0, 460) + 'px';
//让敌机飞
timerEnemyFly = setInterval(function () {
enemy.style.top = enemy.offsetTop + 10 + 'px';
//移除敌机
if (enemy.offsetTop >= 500) {
mainScreen.removeChild(enemy);
}
}, 100);
enemy.timer = timerEnemyFly;
}, 100);
const enemyPlane = document.getElementsByClassName('enemy');
const bullEnt = document.getElementsByClassName('bull');
const gradeEle = document.querySelector('.grade');
let count = 0;
const timerCrash = setInterval(function () {
//子弹击中敌机
for (let i = 0; i < bullEnt.length; i++) {
for (let j = 0; j < enemyPlane.length; j++) {
var b = bullEnt[i];
var e = enemyPlane[j];
if (crashChecked(b, e)) {
clearInterval(b.timer);
clearInterval(e.timer);
mainScreen.removeChild(b);
mainScreen.removeChild(e);
count++;
gradeEle.innerHTML = '分数：' + count;
break;
}
}
}
}, 50);
//死亡检测
const timerDie = setInterval(function () {
for (let i = 0; i < enemyPlane.length; i++) {
//我机碰撞敌机
if (crashChecked(airplane, enemyPlane[i])) {
for (let j = 0; j < 100; j++) {
clearInterval(j);
switch (true) {
case count >= 0 && count < 100: {
start.innerHTML = '垃圾.哈哈哈!!';
break;
}
case count >= 100 && count < 200: {
start.innerHTML = '菜鸟+1';
break;
}
case count >= 200 && count < 300: {
start.innerHTML = '白银菜鸟！';
break;
}
case count >= 300 && count < 400: {
start.innerHTML = '还可以哦！';
break;
}
case count >= 400 && count < 500: {
start.innerHTML = '不错不错世界第三';
break;
}
default: {
start.innerHTML = '你牛逼!';
break;
}
}
}
//不是第一次玩游戏
start.first = 1;
break;
}
}
}, 50);
}, false);