帮帮忙,一个小作业,实在不会

qq_42417689 2018-06-08 04:59:59
方块游戏开发


4.1 要求
1.在800*800的框中每隔2秒随机位置生成小方块,宽高为5px,颜色为绿色,随着生存时间的增加,宽高逐渐变大,最多为10px,颜色逐渐转红;
2.小方块在框中随机移动,每次移动距离在5px以内,不能移出框外;
3.在200*200范围中,如果小方块多于10个,存在时间最久的方块消失;
...全文
1217 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
retniwknurd 2020-12-28
  • 打赏
  • 举报
回复
有人能帮忙做做这个类似的吗? 1)在800*800的框中每隔2秒随机位置生成小方块,宽高为5px,颜色为绿色,随着生存时间的增加,宽高逐渐变大,最多为10px,颜色逐渐转红; 2)小方块在框中随机移动,每次移动距离在5px以内,不能移出框外; 3)用鼠标点击任意一个方块,则方块消失;   4)如果框中的方块数目少于20个,则新生成一个。
qq_42417689 2018-06-10
  • 打赏
  • 举报
回复
不好意思,js只学了一点,还以为是jQuery
天际的海浪 2018-06-09
  • 打赏
  • 举报
回复
引用 7 楼 qq_42417689 的回复:
可以用js写一遍吗,谢谢大佬
这就是用js写的啊
qq_42417689 2018-06-09
  • 打赏
  • 举报
回复
可以用js写一遍吗,谢谢大佬
qq_42417689 2018-06-08
  • 打赏
  • 举报
回复
谢谢了,我会好好看代码的
天际的海浪 2018-06-08
  • 打赏
  • 举报
回复

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#box {
	width: 800px;
	height: 800px;
	position: relative;
	border: 5px solid #999;
}
#box div {
	width: 5px;
	height: 5px;
	margin-left: -2px;
	margin-top: -2px;
	position: absolute;
	transition: left 2s linear,top 2s linear;
	animation: an 10s linear forwards;
}
@keyframes an {
	  0% { transform:scale(1); background-color: #0f0; }
	100% { transform:scale(2); background-color: #f00; }
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var box = document.getElementById("box");
var ds = box.getElementsByTagName("div");
setInterval(function(){
	var div = document.createElement("div");
	div.x = Math.floor(Math.random()*780)+10;
	div.y = Math.floor(Math.random()*780)+10;
	div.time = new Date().getTime();
	box.appendChild(div);
	for (var arr = []; arr.push([])<16;);
	for (var v,i=-1; v=ds[++i];) {
		v.x += Math.floor(Math.random()*10)-5;
		v.y += Math.floor(Math.random()*10)-5;
		if(v.x<10) v.x=10;
		if(v.y<10) v.y=10;
		if(v.x>790) v.x=790;
		if(v.y>790) v.y=790;
		v.style.left = v.x+"px";
		v.style.top = v.y+"px";
		arr[Math.floor(v.y/200)*4+Math.floor(v.x/200)].push(v);
	}
	for (var v,i=-1; v=arr[++i];) {
		if (v.length>10) {
			v.sort(function(a,b){
				return a.time - b.time;
			});
			box.removeChild(v[0]);
		}
	}
}, 2000);
</script>
</body>
</html>
天际的海浪 2018-06-08
  • 打赏
  • 举报
回复
应该不难做。有时间可以做个
qq_42417689 2018-06-08
  • 打赏
  • 举报
回复
可以帮忙看一下吗
qq_42417689 2018-06-08
  • 打赏
  • 举报
回复
可能是想一个大div分成16个小div这样吧
天际的海浪 2018-06-08
  • 打赏
  • 举报
回复
200*200这个范围是以什么为准的?

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧