当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js+canvas实现动态吃豆人效果

js+canvas实现动态吃豆人效果

2019年06月10日  | 移动技术网IT编程  | 我要评论

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网