想要澄清一下这个简单的js函数是做什么的，以及如何做的。
想要澄清一下这个简单的js函数是做什么的，以及如何做的。
提问于 2020-01-17 23:45:12
嘿，伙计们，我有一个气球游戏，当我把鼠标悬停在其中一个气球上时，会加速气球的速度，有几个问题:1.加速比函数不是只会增加气球的细胞价值吗？它似乎没有改变它应该以任何方式上升的像素，只是更新对象的速度值。
2.这个函数: onmouseover="speedUp(‘+I+ ')
当我将对象悬停时，它是否得到一个与该对象相关联的数字，该值由呈现气球函数设置，就像一个数据属性？我不太明白
以下是代码：
'use strict';
var gNextId = 101;
var gBalloons = createBalloons()
var gInterval;
function startGame() {
renderBalloons();
gInterval = setInterval(() => {
moveBalloons();
}, 500);
}
function renderBalloons() {
var strHtml = '';
for (let i = 0; i < gBalloons.length; i++) {
var balloon = gBalloons[i];
strHtml += '<div class="balloon balloon' + (i + 1) +
'" onclick="popBalloon(this)" ' +
'" onmouseover="speedUp(' + i + ')" >' +
balloon.txt +
'</div>'
}
// console.log('strHTML', strHtml);
document.querySelector('.balloon-container').innerHTML = strHtml;
}
function moveBalloons() {
var elBalloons = document.querySelectorAll('.balloon');
for (let i = 0; i < elBalloons.length; i++) {
var balloon = gBalloons[i];
var elBalloon = elBalloons[i];
balloon.bottom += balloon.speed;
elBalloon.style.bottom = balloon.bottom + 'px';
if (balloon.bottom >= 800) clearInterval(gInterval);
}
}
function popBalloon(elBalloon) {
var popSound = new Audio('sounds/pop.mp3');
popSound.play();
elBalloon.classList.add('fade');
}
function speedUp(idxBalloon) {
console.log('Speeding up: ', gBalloons[idxBalloon])
gBalloons[idxBalloon].speed += 10;
}
function createBalloons() {
var ballons = [
createBalloon('A'),
createBalloon('B'),
createBalloon('C')
];
return ballons
}
function createBalloon(txt) {
return { id: gNextId++, bottom: 0, speed: 45, txt: txt }
}如果需要的话，HTML：
<!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>
<link rel="stylesheet" href="./css/main.css">
</head>
<body onload="startGame()">
<div class="balloon-container"></div>
</body>
<script src="./javascript/main.js"></script>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-17 23:57:54
每个气球都有一个与其相关的对象：
{ id: gNextId++, bottom: 0, speed: 45, txt: txt }并存储在ballons数组中(在顶级作用域中别名为gBalloons )。
当游戏开始时，每个气球每500毫秒由其speed属性中定义的像素数移动(由moveBalloons()函数执行)。
当您悬停在一个特定的气球上时，它的speed会增加10。
onmouseover处理程序知道要增加哪个气球速度，因为它在创建html时获得了它在gBalloons数组：speedUp(' + i + ')中的位置(索引i)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59796193
复制相关文章
相似问题
腾讯云开发者
