前言

作者是一个JavaScript新手，偶尔想到一些有趣的小案例分享

一、效果展示

这个小方块很像苍蝇，每当靠近就快速飞走……不依靠苍蝇拍的话很难捉住

二、代码与思路

1.代码

代码如下：

<!DOCTYPE html>
<html lang="en"><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;}body {width: 100%;height: 100%;}.divv {position: absolute;width: 150px;height: 150px;background-color: white;}.w {width: 30px;height: 30px;background-color: lightseagreen;margin: 60px;}</style>
</head><body><div class="main"><div class="divv"><div class="w"></div></div></div><script>let n = -5;let div = document.querySelector('.divv');let leftl = 3;let leftpow = 0.5;let topl = 3;let toppow = 0.5;function animate(obj, leftl, leftpow, topl, toppow) {let n = -5;let t1 = 1;let t2 = 1;var timer = setInterval(function () {let left_move = obj.offsetLeft + leftl * Math.pow((28 - n * n), leftpow);let top_move = obj.offsetTop + topl * Math.pow((28 - n * n), toppow);//防止超出边界if (left_move < 0 || left_move > window.screen.width - 50) {t1 = -1;}if (top_move < 0 || top_move > window.screen.height - 200) {t2 = -1;}left_move = t1 * leftl * Math.pow((26 - n * n), leftpow);top_move = t2 * topl * Math.pow((26 - n * n), toppow);obj.style.left = obj.offsetLeft + left_move + 'px';obj.style.top = obj.offsetTop + top_move + 'px';n = n + 1;if (n > 5) {clearInterval('timer');}}, 20);}div.addEventListener('mouseover', function () {leftl = 1 + 1 * Math.random();leftpow = 0.5 + 0.5 * Math.random();topl = 1 + 1 * Math.random();toppow = 0.5 + 0.5 * Math.random();//倾向于往中间跑if (div.offsetLeft / window.screen.width < Math.random()) {leftl = Math.abs(leftl);}else {leftl = -1 * Math.abs(leftl);}if (div.offsetTop / window.screen.height < Math.random()) {topl = Math.abs(topl);}else {topl = -1 * Math.abs(topl);}animate(div, leftl, leftpow, topl, toppow);})</script>
</body></html>

2.思路

将小方块分为两个部分，一个是可探测区域，一个是自身。可探测区域如图，要远超过自身大小。，以此来提前与半获取你鼠标的位置。

但是不能让他跑出屏幕边界啊，因此加入了轮盘赌，让小方块越靠近边界，下一步往屏幕中心跑的概率就越大。以此保证了游戏体验

if (div.offsetLeft / window.screen.width < Math.random()) {leftl = Math.abs(leftl);}else {leftl = -1 * Math.abs(leftl);}if (div.offsetTop / window.screen.height < Math.random()) {topl = Math.abs(topl);}else {topl = -1 * Math.abs(topl);}

后续展望

后续可以引入多个方块，让他们进行“战争”，利用强化学习的思想，进一步提升可玩性。同时可用于群机器人的算法仿真展示。

[突发奇想的JS小案例] 1 捉苍蝇相关推荐

[突发奇想的JS小案例] 2 重力模拟
文章目录前言一.效果展示二.代码与思路 1.代码 2.思路后续展望前言作者是一个JavaScript新手,偶尔想到一些有趣的小案例分享一.效果展示可以利用鼠标拖动舞台中的方块,松开鼠标 ...
JS小案例总结（JS基础案例）
JS小案例总结 JS小案例总结案例一:JS实现tab选项卡功能案例二:JS实现盒子拖拽功能案例三:JS实现导航条吸顶效果案例四:JS实现图片懒加载结构案例五:JS实现简易弹幕功能案例六:J ...
JS小案例--关于时间--限时购
JS小案例–关于时间–限时购界面显示和功能实现功能实现设置了一个特定的日期和当前时间相差实现折合成天小时分钟秒使用性 :像某宝的商品限时购所以很实用用到的知识点为日期对象设 ...
js小案例：实现选项卡功能
js小案例:实现选项卡功能 html部分代码 <button>1</button><button>2</button><button>3&l ...
JS小案例-文本切换效果
下面是一个文本切换效果的小案例,希望可以可以帮助到有需要的小伙伴 <!DOCTYPE html> <html lang="en"><head>& ...
node.js小案例_留言板
一.前言通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向二.主要内容 1.案列演示: 2.案列源码:https://github.com/456123 ...
简单JS小案例:五星好评
CSS内容可自行设计,本案例仅供参考,请自行拷贝代码,拷贝要留言哦! 注意: js文件路径及文件名需要自行更改!! Html部分: <!DOCTYPE html> <html lan ...
js小案例-九宫格抽奖
目录一.案例介绍二.效果展示三.代码展示四.源码下载地址一.案例介绍案例主要通过设置定时器setInterval和改变className值实现转动,设置延时器setTimeout清除定时器 ...
js小案例-相册选择功能
案例介绍案例通过使用鼠标的悬停事件,改变img元素的src链接实现图片替换,改变img元素的className值实现选中样式的添加. 此功能多应用于电商网站的商品展示. 效果展示代码展示 HTML ...

[突发奇想的JS小案例] 1 捉苍蝇

文章目录

前言