HTML5 用canvas画吃豆人

最新推荐文章于 2021-10-06 01:09:29 发布

胖胖的路人乙

最新推荐文章于 2021-10-06 01:09:29 发布

阅读量611

点赞数

CC 4.0 BY-SA版权

文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_29691213/article/details/118439959

本文介绍了一段使用HTML5 canvas实现的简单动画，展示了如何通过JavaScript控制吃豆人角色的嘴巴开启关闭，以及食物的生成过程。通过定时器和坐标移动，实现了基本的游戏元素动画效果。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="1900" height="400" style="background-color: #aabbcc;"></canvas>
    <script>
        // 获取画布
        var canvas = document.getElementsByTagName('canvas')[0]
        // 获取绘制上下文
        var ctx = canvas.getContext('2d')
        var ctx1 = canvas.getContext('2d')
        // 定义样式
        ctx.fillStyle = 'yellow'
        ctx.strokeStyle = 'gray'
        // 定义嘴巴开启速度与初始大小
        var speed = 1.7;
        var s = 0.03;
        var point = 100;
        var p = 5;
        setInterval(function () {
            // 清掉之前画的图
            ctx.clearRect(point - 106, 1, 200, 200)
            // 开启一个新路径
            ctx.beginPath()
            // 画圆
            ctx.arc(point, 100, 100, 0, Math.PI * speed, 0)
            ctx.lineTo(point, 100)
            // 结束路径
            ctx.closePath();
            // 填充
            ctx.fill();
            // 画边
            ctx.stroke();
            // 控制嘴巴开启关闭与移动
            point += p
            speed += s
            // 当嘴巴闭合时速度取反 让嘴巴张开
            if (speed >= 2) {
                s = -s
            }
            // 当嘴巴张开到一定程度时再对速度取反让嘴巴开始闭合
            if (speed < 1.7) {
                s = -s
            }
            // 到最右边后重新开始，重新绘制食物与吃豆人
            if (point >= 2100) {
                point = -100;
                food();
            }
        }, 10)

        // 循环创建食物
        function food() {
            for (var i = 3; i <= 18; i++) {
                if (i % 3 == 0) {
                    ctx1.beginPath();
                    ctx1.arc(i * 100, 100, 20, 0, Math.PI * 2, 0)
                    ctx1.closePath();
                    ctx1.fill();
                }
            }
        }
        food();
    </script>
</body>

</html>