js+canvas实现动态吃豆人效果
程序员文章站
2023-11-02 13:11:58
效果图：
代码如下：
效果图：
代码如下：
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>吃豆人v01</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px" style="border: 1px solid black"></canvas>
<script>
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
//todo 面向对象方式解析
//todo 1.创建吃豆人的对象模板
function pacman(){
//todo 属性
this.isopen = true;//todo 开关
this.start = 45*math.pi/180;
this.end = 315*math.pi/180;
//todo 方法
//todo 1.绘制方法
this.paint = function(){
//todo 吃豆人的脸
context.beginpath();
context.arc(250,200,100,this.start,this.end);
context.lineto(250,200);
context.closepath();
context.fillstyle = "yellow";
context.fill();
context.stroke();
//todo 吃豆人的眼睛
context.beginpath();
context.arc(250,150,15,0,math.pi*2);
context.fillstyle = "black";
context.fill();
//todo 吃豆人的眼神
context.beginpath();
context.arc(255,145,5,0,math.pi*2);
context.fillstyle = "white";
context.fill();
}
//todo 2.控制开闭切换
this.open = function(){
if(this.isopen){//todo 开口
this.start = 45*math.pi/180;
this.end = 315*math.pi/180;
this.isopen = false;
}else{//todo 闭口
this.start = 0;
this.end = math.pi*2;
this.isopen = true;
}
}
}
//todo 创建吃豆人的对象
var pacman = new pacman();
//todo 核心控制器
setinterval(function(){
context.clearrect(0,0,canvas.width,canvas.height);
pacman.paint();
pacman.open();
},200);
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！