js实现带积分弹球小游戏
作者:你你你就你 发布时间:2024-04-10 16:19:15
标签: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>
来源:https://blog.csdn.net/Ga_b_c/article/details/107452362
0
投稿
猜你喜欢
- 话不多说,请看代码:<?phpdate_default_timezone_set("PRC"); error_re
- 02条件语句和while循环三目运算a = 6#原判断语句if a > 5:print(True)else:print(False)#
- 有时候我们会在页面上显示用户的所在地区,这个原理是:先得到用户的IP,然后去查询将IP转换成一个数值,最后去查这个数值所在的范围,来得到用户
- iframe标签在网页中可以创建一个内嵌框架,通过指定src属性来调用另一个网页文档的内容。和frameset一样,用它来对网页结构进行拆分
- wordcloud是Python扩展库中一种将词语用图片表达出来的一种形式,通过词云生成的图片,我们可以更加直观的看出某篇文章的故事梗概。首
- 1、下载MySQL官方的mysql-connector-python-8.0.17-py3.7-windows-x86-64bit.msi,
- 前言用命令行方式调用用例是我们最常用的方式,这方面确实比java的TestNG框架要好用许多,至少不用写xml文件,为了提供定制化运行用例的
- 本文介绍的函数其实是PHP手册上本来就有的,但是由于这些函数独立性较强,查找不易,所以单独介绍一下,方便查阅。 1. 获取所有可用的模块 -
- 主要逻辑是判断文件的最后修改时间与创建时间是否在秒级别上一致,此代码适用于Python 2.import timeimport os#Rea
- 许多人在编写程序的时候因为贪图方便或不小心使用到程式的保留字,有时明明程序没有错,就是无法正确执行。您知道有哪些常见的保留字吗? 下面的都是
- 前言利用Python docx模块,可以很方便地打开和修改Word 2007及以后的文档。本文简单地介绍了如何使用python修改word文
- Python中的array模块是一个预定义的数组,因此其在内存中占用的空间比标准列表小得多,同时也可以执行快速的元素级别操作,例如添加、删除
- 第一种情况是返回的游标是某个具体的表或视图的数据,如:SQL-Code:CREATE OR REPLACE P
- TKinterPython 的 GUI 库非常多,之所以选择 Tkinter,一是最为简单,二是自带库,不需下载安装,随时使用,跨平台兼容性
- 前言:今天在优化工作中遇到的sql慢的问题,发现以前用了挺多游标来处理数据,这样就导致在数据量多的情况下,需要一行一行去遍历从而计算需要的数
- 介绍最近在研究目标检测方面的小东西,需要到对桌面进行实时捕捉画面,获取画面后再检测,达到实时桌面目标检测的目的,所以写了一段小代码来实现该功
- 在一个规范化的研发流程中,一般遵循如下流程:开发阶段:研发功能或者修复bug,在本地自测。代码审核阶段:提交代码,并请求团队内人员做code
- 除了在SSMS中查看view,存储过程等定义,也可以使用下面的语句直接查询:SELECT object_definition(object_
- 1 安装nginx下载windows上的nginx最新版本,http://www.nginx.org/en/download.html。解压
- Access数据库,同时操作大量记录(9500条以上)时报错。错误提示:Microsoft JET Database Engine 错误 &