使用JS做一个没有规律、随机运动的小球

最终效果图：

PS：这个小球除了在规定的范围内随机的移动，在碰到边界时回到原来的位置之外，不会做其它的任何事情 *-*

基础的HTML 与CSS 代码

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;font-size: 0;}#head{position:absolute;top:50%;left: 50%; width: 10px;height: 10px;background-color: rgb(255, 255, 255);}.CON{border: solid 1px red;background-color: black;}</style>
</head><div class="CON"><div class="head" id="head"></div></div>

JS代码

<script>var scrHeight = document.documentElement.clientHeight;var scrWidth = document.documentElement.clientWidth;var CON = document.querySelector(".CON");CON.style.widht = scrWidth + 'px';CON.style.height = scrHeight + 'px';//设置好容器 CON；var head = document.getElementById("head");var moveTime = Math.floor(Math.random() * 10000) + 1; //小球一次走多长的时间var d = Math.floor(Math.random() * 4) + 1; //小球往哪个方向走function move() {var headY = head.getBoundingClientRect().top;var headX = head.getBoundingClientRect().left; //获取小球当前的TOP与LEFT值var a = 0;//设置变量 a 计数moveDriection();moveSpeed = setInterval(() => {headY = headY + z;headX = headX + z;moveDriection(headY,headX); //计时器更新小球位置数据，并将其传入下方方法中if (headY < 0 || headY > scrHeight || headX < 0 || headX > scrWidth) {head.style.top = 50 + "%";head.style.left = 50 + "%";}a += 1000;if ( a >= moveTime) {clearInterval(moveSpeed);d = Math.floor(Math.random() * 4) + 1;moveTime = Math.floor(Math.random() * 10000) + 1;move();} //更新随机变量 d 小球方向，随机变量 moveTime 小球移动时间，后重启计时器}, 10);}function moveDriection(Y,X) {if (d == 1) {z = +10;head.style.top = Y + 'px';}if (d == 2) {z = -10;head.style.top = Y + 'px';}if (d == 3) {z = +10;head.style.left = X + 'px';}if (d == 4) {z = -10;head.style.left = X + 'px';}} //接收计时器传入的新值，赋于小球。变量 d 用于更改方向。move();</script>

使用JS做一个没有规律、随机运动的小球相关推荐

用js做一个数字华容道
我很喜欢华容道啊,这次用js做一个话不多说上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
用 JS 做一个数独游戏（二）
用 JS 做一个数独游戏(二) 在上一篇博客中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...
video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置首先运行livego ...
用js做一个鼠标惯性动画
用js做一个简单的鼠标惯性动画 <style type="text/css">#div1{width: 50px;height: 50px;background: re ...
用js做一个简单的秒表计时器
用js做一个简单的秒表计时器具体代码如下 <!DOCTYPE html> <html lang="en"><head><meta cha ...
用JS做一个简易的时间显示动态效果
用JS做一个简易的时间显示动态效果运行效果代码 <!DOCTYPE html> <html lang="en"><head><meta ...
用three.js做一个新闻联播开头动画（一）
一个好习惯,先给结论最终效果如下: 在线体验地址:点我预览代码地址:点我github 本文首发于:https://blog.gis1024.com/three_news_op_1.html 这里才 ...
js 月份间隔计算器_15分钟用JS做一个简易计算器
原标题:15分钟用JS做一个简易计算器前言这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...
自己用js做一个搜索栏，超级简单
csdn很少上线,经常在掘金摸鱼,本文掘金链接https://juejin.cn/post/7058602557987356708 言归正传: 为什么要做这个小案例呢? 首先我有极度严重的强迫症,对于 ...

使用JS做一个没有规律、随机运动的小球

使用JS做一个没有规律、随机运动的小球相关推荐

最新文章

热门文章