js制作方块游戏

最新推荐文章于 2025-06-09 16:30:43 发布

y刺猬的拥抱

最新推荐文章于 2025-06-09 16:30:43 发布

阅读量819

点赞数 1

本文介绍了一个使用HTML、CSS和JavaScript实现的动态元素动画案例，该案例能够在网页中随机生成并移动带有动画效果的小元素，同时调整它们的位置和大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>