web练手--彩色方块下落动画

最新推荐文章于 2020-05-13 18:05:00 发布

一个爱摸鱼的前端

最新推荐文章于 2020-05-13 18:05:00 发布

阅读量542

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/zhoumeng1998/article/details/82829362

版权

该博客介绍了如何制作一个彩色方块下落的动画效果。作者将画布分为10*10的小像素块，并使用二维数组map存储每个方块的颜色。通过逐帧清空画布并重新绘制map内容，实现了动画的视觉效果。

摘要由CSDN通过智能技术生成

动画过程：

最终效果如下：

直接上代码：

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cube</title>
</head>
<body>
<script src="gameobject.js"></script>
<script>
    var m = new Map(35, 75, "m1");
    setInterval(updateM,33);
    function updateM() {
        m.createRandomCube();
        m.cubeDown();
        //this.findIsFull();
        m.clearCanvas();
        m.drawMap();
    }
</script>

</body>
</html>

gameobject.js：