豆豆人吃豆子

  var canvas = document.getElementById('cvs');

        var ctx = canvas.getContext('2d')

        var speen = 0.1

        var speend = 8

        var speend1 = 0

        var speen1 = 0.1

        var s = 10

        var x = 200

        var dou = 10

        setInterval(function () {

            //  清除画布

            ctx.clearRect(0, 0, 2000, 500)

            //当豆豆人碰到豆子时，清除豆子

            for (var i = 1; i < dou; i++) {

                if (x + 100 >= i * 200 - 35) {

                    continue

                      

                } else {

                    ctx.beginPath();

                    //画出豆豆

                    ctx.arc(i * 200, 200, 35, 0, Math.PI * 2, 0);

                    ctx.closePath();

                    ctx.fill();

                }

            }

            ctx.beginPath();

            //豆豆人静态时的张嘴动作

            ctx.arc(x, 200, 100, Math.PI / 4 * speend1, Math.PI / 4 * speend, 0)

            ctx.lineTo(x, 200);

            ctx.closePath();

            ctx.stroke();

            ctx.fill();

            //让豆豆人张嘴动起来

            //让豆豆人动起来

            speend += speen

            speend1 += speen1

            //让豆豆人的嘴能同步的动

            if (speend > 8) {

                speen = -speen

                speen1 = -speen1

            }

            if (speend < 6.5) {

                speen = -speen

                speen1 = -speen1

            }

            if (speend1 >= 1.5) {

                speen1 = -speen1

                //闭合路径

            }

            if (speend1 < 0) {

                speen1 = -speen1

            }

            x += s

            //豆豆人移动到3000px的时候，回到200px

            if (x >= 3000) {

                x = 200

            }

        },30)