方塊游戲開發
4.1 要求
1.在800*800的框中每隔2秒隨機位置生成小方塊，寬高為5px，顏色為綠色，隨著生存時間的增加，寬高逐漸變大，最多為10px，顏色逐漸轉紅；
2.小方塊在框中隨機移動，每次移動距離在5px以內，不能移出框外；
3.在200*200范圍中，如果小方塊多于10個，存在時間最久的方塊消失；
uj5u.com熱心網友回復：
200*200這個范圍是以什么為準的？uj5u.com熱心網友回復：
可能是想一個大div分成16個小div這樣吧uj5u.com熱心網友回復：
可以幫忙看一下嗎uj5u.com熱心網友回復：
應該不難做。有時間可以做個uj5u.com熱心網友回復：
<!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>
uj5u.com熱心網友回復：
謝謝了，我會好好看代碼的uj5u.com熱心網友回復：
可以用js寫一遍嗎，謝謝大佬uj5u.com熱心網友回復：
這就是用js寫的啊
uj5u.com熱心網友回復：
不好意思，js只學了一點，還以為是jQueryuj5u.com熱心網友回復：
有人能幫忙做做這個類似的嗎？1）在800*800的框中每隔2秒隨機位置生成小方塊，寬高為5px，顏色為綠色，隨著生存時間的增加，寬高逐漸變大，最多為10px，顏色逐漸轉紅；
2）小方塊在框中隨機移動，每次移動距離在5px以內，不能移出框外；
3）用滑鼠點擊任意一個方塊，則方塊消失；
4）如果框中的方塊數目少于20個，則新生成一個。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/241667.html
標籤：JavaScript
上一篇：SPRINGBOOT上傳檔案:MultipartFile resource [file] cannot be resolved to absolute file
下一篇：一個小作業，幫幫忙