|
运用canvas制作吃豆人
吃豆人链接
吃豆人代码：
html
javascript
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
// 画出一个黄色的圆形
context.beginPath();
context.fillStyle='#FFDD4F';
context.arc(100, 100, 100,Math.PI * 0.25, Math.PI * 1.75);
context.fill();
// 画出一个黄色的圆边框
context.beginPath();
context.fillStyle='black';
context.arc(100, 100, 100,Math.PI * 0.25, Math.PI * 1.75);
context.stroke();
// 画出一个白色三角形作为嘴巴
context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 0);
context.lineTo(200, 200);
context.fillStyle='white';
context.fill()
//画出嘴巴边框
context.beginPath();
context.moveTo(100, 100);
context.lineTo(100 + Math.sqrt(2)*50, 100 - Math.sqrt(2)*50);
context.stroke();
context.beginPath();
context.moveTo(100, 100);
context.lineTo(100 + Math.sqrt(2)*50, 100 + Math.sqrt(2)*50);
context.stroke();
//画出眼睛
context.beginPath();
context.fillStyle='black';
context.arc(110, 45, 8 ,0, Math.PI * 2);
context.fill();
//豆子
function eat_ting(){
if (changeblur == true) {
for (let i= x - (x % 100) + 260;i
for (let i= x - (x % 100) + 20;i > 0;i -= 100) {
context.beginPath();
context.fillStyle='black';
context.arc(i, 100, 10 , 0 , Math.PI * 2);
context.fill();
}
}
}
var changeblur = true,x = 0;
var timer = setInterval(function(){
context.clearRect(0, 0, 1800, 201);
if(changeblur == true){
x += 30;
if(x /10 % 2 == 0){
// 画出一个黄色的圆形
context.beginPath();
context.fillStyle='#FFDD4F';
context.arc(100 + x, 100, 100,Math.PI * 0.25, Math.PI * 1.75);
context.fill();
// 画出一个黄色的圆边框
context.beginPath();
context.fillStyle='black';
context.arc(100 + x, 100, 100,Math.PI * 0.25, Math.PI * 1.75);
context.stroke();
// 画出一个白色三角形作为嘴巴
context.beginPath();
context.moveTo(100 + x, 100);
context.lineTo(200 + x, 0);
context.lineTo(200 + x, 200);
context.fillStyle='white';
context.fill();
eat_ting()
//画出嘴巴边框
context.beginPath();
context.moveTo(100 + x, 100);
context.lineTo(100+ x + Math.sqrt(2)*50, 100 - Math.sqrt(2)*50);
context.stroke();
context.beginPath();
context.moveTo(100 + x, 100);
context.lineTo(100 + x + Math.sqrt(2)*50, 100 + Math.sqrt(2)*50);
context.stroke();
//画出眼睛
context.beginPath();
context.fillStyle='black';
context.arc(110 + x, 45, 8,0, Math.PI * 2);
context.fill();
}else{
eat_ting()
// 画出一个黄色的圆形
context.beginPath();
context.fillStyle='#FFDD4F';
context.arc(100 + x, 100, 100,0, Math.PI * 2);
context.fill();
// 画出一个黄色的圆边框
context.beginPath();
context.fillStyle='black';
context.arc(100 + x, 100, 100,0, Math.PI *2);
context.stroke();
//画出嘴巴
context.beginPath();
context.moveTo(100 + x, 100);
context.lineTo(200 + x, 100);
context.stroke();
//画出眼睛
context.beginPath();
context.fillStyle='black';
context.arc(120 + x, 50, 8,0, Math.PI * 2);
context.fill();
}
}else{
x-=30;
if(x /10 % 2 == 0){
// 画出一个黄色的圆形
context.beginPath();
context.fillStyle='#FFDD4F';
context.arc(100 + x, 100, 100,Math.PI * 0.75, Math.PI * 1.25,true);
context.fill();
// 画出一个黄色的圆边框
context.beginPath();
context.fillStyle='black';
context.arc(100 + x, 100, 100,Math.PI * 0.75, Math.PI * 1.25,true);
context.stroke();
// 画出一个白色三角形作为嘴巴
context.beginPath();
context.moveTo(100 + x, 100);
context.lineTo(x, 0);
context.lineTo(x, 200);
context.fillStyle='white';
context.fill()
eat_ting()
//画出嘴巴边框
context.beginPath();
context.moveTo(100 + x, 100);
context.lineTo(100+ x - Math.sqrt(2)*50, 100 - Math.sqrt(2)*50);
context.stroke();
context.beginPath();
context.moveTo(100 + x, 100);
context.lineTo(100 + x - Math.sqrt(2)*50, 100 + Math.sqrt(2)*50);
context.stroke();
//画出眼睛
context.beginPath();
context.fillStyle='black';
context.arc(90 + x, 45, 8,0, Math.PI * 2);
context.fill();
}else{
eat_ting()
context.beginPath();
context.fillStyle='#FFDD4F';
context.arc(100 + x, 100, 100,0, Math.PI * 2);
context.fill();
// 画出一个黄色的圆边框
context.beginPath();
context.fillStyle='black';
context.arc(100 + x, 100, 100,0, Math.PI *2);
context.stroke();
//画出嘴巴
context.beginPath();
context.moveTo(100 + x, 100);
context.lineTo(x, 100);
context.stroke();
//画出眼睛
context.beginPath();
context.fillStyle='black';
context.arc(80 + x, 50, 8,0, Math.PI * 2);
context.fill();
}
}
if(x >= 1600){
changeblur = false;
}else if(x |