HTML积分小游戏,js实现带积分弹球小游戏

本文实例为大家分享了js实现带积分的弹球小游戏的具体代码，供大家参考，具体内容如下

注：如果小球与底部方块的角碰撞，积分可能有些许bug

#box {

width: 400px;

height: 400px;

border: 1px solid #000000;

margin: 50px auto;

position: relative;

}

#ball {

height: 60px;

width: 60px;

border-radius: 50%;

background-color: red;

position: absolute;

left: 0;

top: 0;

}

#block {

width: 100px;

height: 20px;

position: absolute;

left: 150px;

bottom: 0;

background-color: black;

}

#count {

color: #ff0000;

font-size: 18px;

position: absolute;

width: 20px;

height: 20px;

left: -20px;

top: 0;

}

0

var oBox = document.querySelector('#box');

var oBall = document.querySelector('#ball');

var oBlock = document.querySelector('#block');

var oCount = document.querySelector('#count');

var speedBlock = 5;

var speedX = 5;

var speedY = 4;

var maxLeft = oBox.clientWidth - oBall.offsetWidth;

var maxTop = oBox.clientHeight - oBall.offsetHeight;

var max = oBox.clientWidth - oBlock.offsetWidth;

setInterval(function () {

var left = oBall.offsetLeft;

var top = oBall.offsetTop;

left += speedX;

top += speedY;

if (left < 0 || left > maxLeft) {

speedX = -speedX;

}

if (top < 0) {

speedY *= -1;

}

var r = oBall.offsetWidth / 2;

if (left >= oBlock.offsetLeft - r && // 左边线碰撞条件

left <= oBlock.offsetLeft - r + oBlock.offsetWidth && // 右边线碰撞条件

top >= maxTop - oBlock.offsetHeight // 下边线碰撞条件

) {

// console.log('撞上了');

speedY = -Math.abs(speedY);

// speedY *= -1;

oCount.innerHTML = oCount.innerHTML * 1 + 1;

}

if (top > maxTop) {

left = 0;

top = 0;

}

oBall.style.left = left + 'px';

oBall.style.top = top + 'px';

}, 50);

document.onkeydown = function (e) {

var ev = event || e;

var keyCode = ev.keyCode || ev.which;

var left = oBlock.offsetLeft;

if (keyCode === 37) {

left -= speedBlock;

}

if (keyCode === 39) {

left += speedBlock;

}

if (left <= 0) {

left = 0

}

if (left >= max) {

left = max;

}

oBlock.style.left = left + 'px';

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。