小蜜蜂游戏（JS原生）
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
display: block;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.play {
width: 800px;
height: 800px;
background: black;
margin: 30px auto;
position: relative;
}
.play-btn {
width: 100px;
height: 50px;
border: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.play-score {
color: white;
font-size: 20px;
}
.play-air {
width: 46px;
height: 60px;
background: url(./images/fj.png);
position: absolute;
left: 0;
bottom: 0;
}
.play-bee-list {
position: absolute;
left: 10px;
}
.play-bee-item1,
.play-bee-item2,
.play-bee-item3 {
width: 40px;
height: 28px;
float: left;
}
.play-bee-item1 {
background: url(./images/mf1.png);
}
.play-bee-item2 {
background: url(./images/mf2.png);
}
.play-bee-item3 {
background: url(./images/mf3.png);
}
.bullet {
position: absolute;
background: white;
width: 2px;
height: 10px;
}
</style>
</head>
<body>
<div>
<button>开始游戏</button>
<!-- <div>积分：<span>0</span></div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul> -->
</div>
<script>
let play = document.querySelector(‘.play‘);
let playBtn = document.querySelector(‘.play-btn‘);
let playBeeList;
let air;
let score;
//1.设计关卡
let gkNow = 0; // 0表示第一关
let gk = [
{
beeMap: [
2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1
],
cols: 10
},
{
beeMap: [
2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1
],
cols: 10
},
{
beeMap: [
3, 3, 3, 3, 3, 3, 3,
3, 3, 3, 3, 3, 3, 3,
3, 3, 3, 3, 3, 3, 3
],
cols: 7
}
];
//2.蜜蜂的数据
let beeData = [
{
name: 1,
style: ‘play-bee-item1‘,
blood: 1,
speed: 5,
score: 10
},
{
name: 2,
style: ‘play-bee-item2‘,
blood: 2,
speed: 7,
score: 20
},
{
name: 3,
style: ‘play-bee-item3‘,
blood: 3,
speed: 10,
score: 30
}
];
gameStart();
function gameStart() { // 3.开始游戏
playBtn.onclick = function () {
this.remove();
createScore();
createBee();
moveBee();
oneBeeMove();
createAir();
handleAir();
};
}
function createScore() { //4. 创建积分
score = document.createElement(‘div‘);
score.className = ‘play-score‘;
score.innerHTML = ‘积分：<span>0</span>‘;
play.append(score);
}
function createBee() { //5. 创建小蜜蜂
if (playBeeList) {
playBeeList.remove();
}
playBeeList = document.createElement(‘ul‘);
playBeeList.className = ‘play-bee-list clearfix‘;
let beeMap = gk[gkNow].beeMap;
let cols = gk[gkNow].cols;
for (let i = 0; i < beeMap.length; i++) {
let li = document.createElement(‘li‘);
for (let j = 0; j < beeData.length; j++) {
if (beeData[j].name == beeMap[i]) {
li.className = beeData[j].style;
li.blood = beeData[j].blood;
li.score = beeData[j].score;
li.speed = beeData[j].speed;
}
}
playBeeList.append(li);
}
play.append(playBeeList);
playBeeList.style.width = 40 * cols + ‘px‘;
//6. 把浮动布局转成定位布局 -> 布局转换
let pos = [];
let playBeeItems = playBeeList.querySelectorAll(‘li‘);
for (let i = 0; i < playBeeItems.length; i++) {
pos.push({ x: playBeeItems[i].offsetLeft, y: playBeeItems[i].offsetTop });
}
for (let i = 0; i < playBeeItems.length; i++) {
playBeeItems[i].style.position = ‘absolute‘;
playBeeItems[i].style.left = pos[i].x + ‘px‘;
playBeeItems[i].style.top = pos[i].y + ‘px‘;
}
}
function moveBee() { // 7.整体移动小蜜蜂
let speedX = 10;
let speedY = 15;
setInterval(function () {
let L = playBeeList.offsetLeft;
if (L <= 0 || L >= play.offsetWidth - playBeeList.offsetWidth) {
speedX *= -1;
playBeeList.style.top = playBeeList.offsetTop + speedY + ‘px‘;
}
playBeeList.style.left = L + speedX + ‘px‘;
}, 200);
}
function createAir() { //8. 创建飞机
air = document.createElement(‘div‘);
air.className = ‘play-air‘;
play.append(air);
air.style.left = (play.offsetWidth - air.offsetWidth) / 2 + ‘px‘;
}
function handleAir() { // 9.操作飞机
let timer;
let speed = 10;
document.onkeydown = function (ev) {
if (ev.keyCode == 37 || ev.keyCode == 39) {
if (!timer) {
timer = setInterval(function () {
if (ev.keyCode == 37) { //←
let L = air.offsetLeft - speed;
if (L < 0) {
L = 0;
}
air.style.left = L + ‘px‘;
}
else if (ev.keyCode == 39) { // →
let L = air.offsetLeft + speed;
if (L > play.offsetWidth - air.offsetWidth) {
L = play.offsetWidth - air.offsetWidth;
}
air.style.left = L + ‘px‘;
}
}, 16);
}
}
};
document.onkeyup = function (ev) {
if (ev.keyCode == 37 || ev.keyCode == 39) {
clearInterval(timer);
timer = null;
}
if (ev.keyCode == 32) { // 空格
createBullet();
}
};
}
function createBullet() { // 10.创建子弹
let bullet = document.createElement(‘div‘);
bullet.className = ‘bullet‘;
play.append(bullet);
bullet.style.left = air.offsetLeft + (air.offsetWidth - bullet.offsetWidth) / 2 + ‘px‘;
bullet.style.top = air.offsetTop - bullet.offsetHeight + ‘px‘;
moveBullet(bullet);
}
function moveBullet(bullet) { //11. 移动子弹
//bullet
let speedY = -5;
let timer = setInterval(function () {
var T = bullet.offsetTop + speedY;
if (T < - bullet.offsetHeight) { //判断子弹是否出界
clearInterval(timer);
bullet.remove();
}
else {
bullet.style.top = T + ‘px‘;
// 12.判断子弹是否跟小蜜蜂碰撞
let playBeeItems = playBeeList.querySelectorAll(‘li‘);
for (let i = 0; i < playBeeItems.length; i++) {
if (pz(bullet, playBeeItems[i])) {
if (playBeeItems[i].blood == 1) {
let span = score.querySelector(‘span‘);
span.innerHTML = Number(span.innerHTML) + playBeeItems[i].score;
playBeeItems[i].remove();
}
else {
playBeeItems[i].blood--;
}
bullet.remove();
}
}
//13. 是否进入下一关
if (playBeeItems.length == 0) {
gkNow++;
createBee();
}
}
}, 16);
}
function oneBeeMove() { //14. 单兵作战
setInterval(function () {
let playBeeItems = playBeeList.querySelectorAll(‘li‘);
let nowBee = playBeeItems[Math.floor(Math.random() * playBeeItems.length)];
setInterval(function () {
var a = air.getBoundingClientRect().left - nowBee.getBoundingClientRect().left;
var b = air.getBoundingClientRect().top - nowBee.getBoundingClientRect().top;
var c = Math.sqrt(a * a + b * b);
var speedX = a / c * nowBee.speed;
var speedY = b / c * nowBee.speed;
nowBee.style.top = nowBee.offsetTop + speedY + ‘px‘;
nowBee.style.left = nowBee.offsetLeft + speedX + ‘px‘;
if (pz(air, nowBee)) {
location.reload();
}
}, 16);
}, 3000);
}
function pz(elem1, elem2) {
var L1 = elem1.getBoundingClientRect().left;
var R1 = elem1.getBoundingClientRect().right;
var T1 = elem1.getBoundingClientRect().top;
var B1 = elem1.getBoundingClientRect().bottom;
var L2 = elem2.getBoundingClientRect().left;
var R2 = elem2.getBoundingClientRect().right;
var T2 = elem2.getBoundingClientRect().top;
var B2 = elem2.getBoundingClientRect().bottom;
if (R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2) { // 碰不到的情况
return false;
}
else { // 碰到的情况
return true;
}
}
</script>
</body>
</html>小蜜蜂游戏（JS原生）
原文：https://www.cnblogs.com/jimingxiaoyi/p/15310417.html