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

qq_42417689 2018-06-08 04:59:59

方块游戏开发

4.1 要求
1.在800*800的框中每隔2秒随机位置生成小方块，宽高为5px，颜色为绿色，随着生存时间的增加，宽高逐渐变大，最多为10px，颜色逐渐转红；
2.小方块在框中随机移动，每次移动距离在5px以内，不能移出框外；
3.在200*200范围中，如果小方块多于10个，存在时间最久的方块消失；

...全文

1198 11 打赏收藏举报

写回复

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_52709691 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