运用canvas制作吃豆人
运用canvas制作吃豆人
吃豆人链接
吃豆人代码：
html
<canvas width="1800px" height="600px" id="canvas">canvas>
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 < 1800;i += 100) {
context.beginPath();
context.fillStyle='black';
context.arc(i, 100, 10 , 0 , Math.PI * 2);
context.fill();
}
}else{
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<= 0){
changeblur = true;
}
},300)
1. 先画出底部的黄色部分，一个黄色的圆先画在底下并画出圆的边框再运用一个白色三角形挡在嘴上。
2. 再画出嘴巴的两条线以及眼睛，涉及到一定的45角度边计算。
3. 再画出嘴巴闭合的图形，需要注意的是眼睛的位置需要有所改变。
4. 利用定时器给吃豆人定时增加坐标x值，并且每次都会先清空画布内容，利用一个开关变量当吃豆人到达边框的x值时变为false，运用同等的方法写出反方向运动的吃豆人。
4. 最后画出吃豆人吃的豆子，遍历所有吃豆人当前x值之后的距离，利用for循环有间距的制作豆子(张口添加时一定要添加在画三角之后)。