社区
JavaScript
帖子详情
一个小作业,帮帮忙
retniwknurd
2020-12-28 12:57:54
游戏方块的实现
1)在800*800的框中每隔2秒随机位置生成小方块,宽高为5px,颜色为绿色,随着生存时间的增加,宽高逐渐变大,最多为10px,颜色逐渐转红;
2)小方块在框中随机移动,每次移动距离在5px以内,不能移出框外;
3)用鼠标点击任意一个方块,则方块消失;
4)如果框中的方块数目少于20个,则新生成一个。
...全文
19256
4
打赏
收藏
一个小作业,帮帮忙
游戏方块的实现 1)在800*800的框中每隔2秒随机位置生成小方块,宽高为5px,颜色为绿色,随着生存时间的增加,宽高逐渐变大,最多为10px,颜色逐渐转红; 2)小方块在框中随机移动,每次移动距离在5px以内,不能移出框外; 3)用鼠标点击任意一个方块,则方块消失; 4)如果框中的方块数目少于20个,则新生成一个。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
4 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
走在四季
2021-01-06
打赏
举报
回复
N个小方块随机移动是不是还不能撞到一起?
ahaohaoo
2020-12-30
打赏
举报
回复
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 800px; height: 800px; background-color: rgb(225, 233, 182); position: relative; } span { display: block; width: 5px; height: 5px; background-color: rgb(7, 206, 0); position: absolute; left: 10px; top: 10px; animation: animate1 10s linear forwards; } @keyframes animate1 { 0% { width: 5px; height: 5px; background-color: rgb(7, 206, 0); } 100% { width: 10px; height: 10px; background-color: rgb(255, 40, 40); } } </style> </head> <body> <div></div> <script> // 应该这么写,先写一个定时器。给span let span = document.querySelectorAll('span') let div = document.querySelector('div') // 定时器生成小方块,其left是0-790之间的任意整数 setInterval(function () { let sp1 = document.createElement('span') div.appendChild(sp1) sp1.onclick = function () { sp1.style.position = 'static' sp1.style.display = 'none'} // 设置随机位置 sp1.style.left = Math.floor(Math.random()*791) + 'px' sp1.style.top = Math.floor(Math.random()*791) + 'px' console.log(parseInt(sp1.style.left.slice(0,-2))); let ob1 = function () { if (Math.random() > 0.5) { //要小于785才能加5 if (parseInt(this.style.left.slice(0,-2)) <= 785) { this.style.left = parseInt(this.style.left.slice(0,-2)) + Math.floor(Math.random()*6) + 'px' } if (parseInt(this.style.top.slice(0,-2)) <= 785) { this.style.top = parseInt(this.style.top.slice(0,-2)) + Math.floor(Math.random()*6) + 'px' } }else{ //要大于等于5才可以-5 if (parseInt(this.style.left.slice(0,-2)) >= 5) { this.style.left = parseInt(this.style.left.slice(0,-2)) - Math.floor(Math.random()*6) + 'px' } if (parseInt(this.style.top.slice(0,-2)) >= 5) { this.style.top = parseInt(this.style.top.slice(0,-2)) - Math.floor(Math.random()*6) + 'px' } } } let set1 = setInterval(() => { // 随机使位置+5或者-5 ob1.call(sp1) }, 300); }, 2000); </script> </body> </html>
ahaohaoo
2020-12-30
打赏
举报
回复
第4条我不是很懂你的意思,就没写了。不是每隔2秒自动生成1个吗? 小于20就生成1个是什么意思 没看懂所以就没写了。其他的内容我写完了
前端小歌谣
2020-12-29
打赏
举报
回复
第一部 动态生成小方块 给予样式啥的 第二部控制小方块的样式变化 通过定时器 第三部做判断 建议可以看看贪吃蛇的操作
写一篇时事新闻500字 政治
作业
帮帮忙
.docx
写一篇时事新闻500字 政治
作业
帮帮忙
.docx
小弟的
一个
作业
,第一次做这些,请教下
小弟的
一个
作业
,没做过,哪位大哥帮下忙,给说明下,谢谢
计算机
作业
期末计算机
作业
能帮上忙最好,简单的学生管理系统c变得
学校生产实习小组项目,“约会
帮帮忙
”系统,基于Servlet+JSP.zip
jsp,java web开发,毕业设计,课程设计
作业
,servlet框架,mysql数据库,源码资源
数值分析计算实习大
作业
2
2010年数值分析大
作业
第二题,希望在学习数值分析上能够帮学弟学妹一些忙,更好的进步~
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章