js实现带积分弹球小游戏

作者：你你你就你时间：2024-04-10 16:19:15　

本文实例为大家分享了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

标签：js,弹球

投稿

js实现带积分弹球小游戏

猜你喜欢

Oracle常用命令大全集

详解Python 2.6 升级至 Python 2.7 的实践心得

一个效果写的HashTable代码

关于DOM事件模型的两件事

网页制作了解什么是CSS hack？

PHP设计模式之观察者模式浅析

python用sqlacodegen根据已有数据库(表)结构生成对应SQLAlchemy模型

python multiprocessing模块用法及原理介绍

Dreamweaver使用技巧－－让css使网页图片半透明

Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例

python PaddleSpeech实现婴儿啼哭识别

详解用selenium来下载小姐姐图片并保存

python实现余弦相似度文本比较的示例

详解如何在Linux(CentOS)下重置MySQL根(Root)密码

python实现逢七拍腿小游戏的思路详解

Python OpenCV直方图均衡化详解

Java实现基于JDBC操作mysql数据库的方法

JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决

用selenium解决滑块验证码的实现步骤

python sort、sort_index方法代码实例