心得技巧
小蜜蜂游戏（JS原生）
发布时间：2022-07-05 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了小蜜蜂游戏（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 class="play">
<button class="play-btn">开始游戏</button>
<!-- <div class="play-score">积分：<span>0</span></div>
<div class="play-air"></div>
<ul class="play-bee-list clearfix">
<li class="play-bee-item1"></li>
<li class="play-bee-item2"></li>
<li class="play-bee-item3"></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原生）全部内容，希望文章能够帮你解决小蜜蜂游戏（JS原生）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的心得技巧相关文章
- clion结合vcpkg以及GTest的使用 2022-07-07
- EGF 2022-06-06
- ExtJS 布局-Column布局（Column layout） 2022-06-05
- 颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
- rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
- rootfs -根文件系统制作 2022-07-07
- 网页简单布局之结构与表现原则分享 2022-04-15
- 小项目中怎么防止Vue的闪现画面效果 2022-04-15
- 隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
- 告别硬编码让你的前端表格自动计算的实例代码 2022-04-15
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程