原生JS实现网页版红包游戏1
<script>
//var topEnd = ;
//获取需要的元素
var gameWrap = document.getElementsByClassName("game-wrap")[0];
var startGame = document.getElementsByClassName("start-game")[0];
var gameMask = document.getElementsByClassName("game-mask");
var numList = document.getElementsByClassName("num-list");
var numBox = document.getElementsByClassName("num-box");
var bagBox = document.getElementsByClassName("bag-box")[0];
//定义变量inNum记录得到红包金额，outNum记录掉落红包数量
var inNum = 0, outNum = 0;
//定义对象数组存放红包种类图片
var bagImg = [{"src": '../img/', "price": 1},
{"src": '../img/', "price": 2}, {"src": '../img/', "price": 1111},
{"src": '../img/', "price": 5}, {"src": '../img/', "price": 10}, {"src": '../img/', "price": 0}]
//点击开始游戏，执行动画效果，开始游戏
startGame.onclick = function () {
gameMask[0].style.display = "none";
MTween(numList[0], 'left', '', -200, 800, 'px', 'linear', function () {
setDiv();
});
}
//生成div
function setDiv() {
bagBox.innerHTML += '<div class="bag"></div>';
//生成1个div
var box = document.querySelector(".bag");
var n = parseInt(getStyle(gameWrap, "width")) - 110;
box.style.left = Math.floor(Math.random() * n) + 'px';
var timer = 0;
var s = getStyle(gameWrap, "height");
timer = setInterval(function () {
//div向下掉落
box.style.top = parseFloat(getStyle(box, "top")) + 10 + 'px'; //变+不变
//div的top最终值为浏览器的高度减去自身高度
if (parseFloat(getStyle(box, "top")) >= (parseFloat(s) - 114)) {
//div高度达到临界值，关闭定时器，清除div
clearInterval(timer);
box.parentNode.removeChild(box);
shake(gameWrap, "top", 45, 5, function () {
outNum++;
numBox[1].innerHTML = outNum;
//如果掉落红包数达到3个，弹出提示框，执行动画效果游戏结束
if (outNum == 3) {
alert('恭喜你，一共抢到' + inNum + '元，快去购物吧');
MTween(numList[0], 'left', '', 10, 800, 'px', 'linear', function () {
inNum = numBox[0].innerHTML = 0;
outNum = numBox[1].innerHTML = 0;
gameMask[0].style.display = "block";
});
} else {
//否则，再次执行setDiv()
setDiv();
}
});
}
//点击掉落的红包
box.onclick = function () {
//判断是否已经被点击
if (this.state) return;
this.state = true;
//点击div时关闭定时器
clearInterval(timer);
//随机数控制不同红包出现概率
var randomNum = Math.floor(Math.random() * 100);
if (randomNum >= 4) {
box.style.backgroundImage = 'url(' + bagImg[5].src + ')';
} else {
box.style.backgroundImage = 'url(' + bagImg[randomNum].src + ')';
}
//执行红包抖动动画效果
shake(this, "left", 30, 5, function () {
//清除点击的div
box.parentNode.removeChild(box);
//记录累计金额
if (randomNum <= 4) {
inNum += bagImg[randomNum].price;
}
numBox[0].innerHTML = inNum;
//再次调用setDiv函数生成新的div
setDiv();
}
)
}
}, 20)
}
</script>