HTML5 Canvas 来回简单版吃豆豆

简单js实现

h5, canvas, game

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2872
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//吃豆豆动画//
var radius = 100; //大球半径
var x = 150; //大球球的圆心坐标
var y = 300;
var bol = true;
var canvas, cxt;

window.onload = function() {
    canvas = document.getElementById('chidoudou');
    canvas.height = 500;
    canvas.width = 1024;
    cxt = canvas.getContext('2d');

runRight();

}

function ballOpenRight(x) { //张嘴
    cxt.fillStyle = '#ffff00';
    cxt.beginPath();
    cxt.arc(x, y, radius, 1 / 4 * Math.PI, 3 / 2 * Math.PI + 1 / 4 * Math.PI, false);
    cxt.lineTo(x, y);
    cxt.closePath();
    cxt.fill();
}

function ballOpenLeft(x) { //张嘴
    cxt.fillStyle = '#ffff00';
    cxt.beginPath();
    cxt.arc(x, y, radius, 3 / 4 * Math.PI, 3 / 2 * Math.PI - 1 / 4 * Math.PI, true);
    cxt.lineTo(x, y);
    cxt.closePath();
    cxt.fill();
}

function ballCloseRight(x) { //闭嘴
    cxt.fillStyle = '#ffff00';
    cxt.beginPath();
    cxt.arc(x, y, radius, 0, Math.PI * 2);
    cxt.closePath();
    cxt.fill();
    cxt.beginPath();
    cxt.moveTo(x, y);
    cxt.lineTo(x + radius, y);
    cxt.closePath();
    cxt.stroke();
}

function ballCloseLeft(x) { //闭嘴
    cxt.fillStyle = '#ffff00';
    cxt.beginPath();
    cxt.arc(x, y, radius, Math.PI * 1, Math.PI * 3);
    cxt.closePath();
    cxt.fill();
    cxt.beginPath();
    cxt.moveTo(x, y);
    cxt.lineTo(x - radius, y);
    cxt.closePath();
    cxt.stroke();
}

function runRight() { //球球动起来
    var startPoint = x;
    var time = 0;
    cxt.clearRect(0, 0, 1024, 800);
    ballOpenRight(x);
    var timer = setInterval(function() {
        time += 1;
        if (time == 10) {
            window.clearInterval(timer);
            runLeft(startPoint);

} else {
            cxt.clearRect(0, 0, 1024, 800);
            if (bol) {
                ballCloseRight(startPoint);
                startPoint += 5;
                bol = false;
            } else {
                ballOpenRight(startPoint);
                startPoint += 5;
                bol = true;
            }
        }
    }, 1000);
}

编译

CSS

HTML

简单js实现

h5, canvas, game

编辑器支持Emmet

快捷键

简单js实现

h5, canvas, game

HTML5/Canvas JS 简单的碰撞检测函数

HTML5 Canvas带引力的简单粒子系统

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：