html吃豆豆小游戏源码 HTML5 Canvas吃豆豆动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var radius = 100; //大球半径

var x = 200; //大球球的圆心坐标

var y = 200;

var bol = true;

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

canvas.height = 800;

canvas.width = 1024;

var cxt = canvas.getContext('2d');

function ballOpen(x) { //张嘴

cxt.fillStyle = '#fff';

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();

cxt.stroke();

}

function ballClose(x) { //闭嘴

cxt.fillStyle = '#fff';

cxt.beginPath();

cxt.arc(x, y, radius, 0, Math.PI * 2);

cxt.closePath();

cxt.fill();

cxt.stroke();

cxt.beginPath();

cxt.moveTo(x, y);

cxt.lineTo(x + radius, y);

cxt.closePath();

cxt.stroke();

}

var speed = 0;

var startPoint = x;

function run() {

speed = 2;

cxt.clearRect(0, 0, 1024, 800);

ballOpen(x);

var timer = setInterval(function() {

cxt.clearRect(0, 0, 1024, 800);

if (bol) {

ballClose(startPoint);

startPoint += 3;

bol = false;

} else {

ballOpen(startPoint);

startPoint += 3;

bol = true;

}

}, 1000);

}

run();