js实现带积分弹球小游戏
更新时间：2020年07月21日 15:19:27 作者：你你你就你
这篇文章主要为大家详细介绍了js实现带积分弹球小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现带积分的弹球小游戏的具体代码，供大家参考，具体内容如下
注：如果小球与底部方块的角碰撞，积分可能有些许bug
<style>
#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;
}
</style>
<body>
<div id="box">
<div id="count">0</div>
<div id="ball"></div>
<div id="block"></div>
</div>
</body>
<script>
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';
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信小程序下拉框搜索功能的实现方法，内容比较简单容易理解 ,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了JavaScript寄生组合式继承,结合实例形式详细分析了寄生组合式继承原理、实现方法与相关注意事项,需要的朋友可以参考下2018-01-01
接触和学习javascript也有3~4年了，真正牵扯到前后台数据的交互，数据算法等高级编程知之甚少，甚至很少用，如果你问我你知道js什么知识呢？我可能只能说知道点jQuery的技巧，说编程都谈不上，所以需要把某一些技巧作为编程习惯固定下来，免于以后有人问我你知道什么？2015-04-04
使用javascript实现有效时间的控制,并显示将要过期的时间
本篇文章主要介绍了使用javascript实现有效时间的控制,并显示将要过期的时间示例代码。需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了JavaScript基于面向对象之创建对象，对创建对象进行了详细描述，感兴趣的小伙伴们可以参考一下2015-12-12
本文主要分享了canvas实现简易的圆环进度条效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了小程序实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了微信小程序使用自定义组件导航实现当前页面高亮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
javascript的数据类型可以分为两种：原始类型和引用类型，在此文给大家提到。本文主要给大家介绍javascript类型系统之基本数据类型与包装类型，涉及到js 基本类型 包装类相关知识，本文介绍的详细，具有参考借鉴价值，对本文感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了button选择颜色简单实例，有需要的朋友可以参考一下2013-11-11
最新评论