87,995
社区成员
发帖
与我相关
我的任务
分享一个小作业，帮帮忙
游戏方块的实现
1）在800*800的框中每隔2秒随机位置生成小方块，宽高为5px，颜色为绿色，随着生存时间的增加，宽高逐渐变大，最多为10px，颜色逐渐转红；
2）小方块在框中随机移动，每次移动距离在5px以内，不能移出框外；
3）用鼠标点击任意一个方块，则方块消失；
4）如果框中的方块数目少于20个，则新生成一个。
1）在800*800的框中每隔2秒随机位置生成小方块，宽高为5px，颜色为绿色，随着生存时间的增加，宽高逐渐变大，最多为10px，颜色逐渐转红；
2）小方块在框中随机移动，每次移动距离在5px以内，不能移出框外；
3）用鼠标点击任意一个方块，则方块消失；
4）如果框中的方块数目少于20个，则新生成一个。
...全文
请发表友善的回复…
发表回复
走在四季 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
- 打赏
- 举报
第一部 动态生成小方块 给予样式啥的 第二部控制小方块的样式变化 通过定时器 第三部做判断 建议可以看看贪吃蛇的操作
