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


Posted in Javascript onMarch 22, 2017

效果图:

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

代码如下:

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
JavaScript实现星星等级评价功能
Mar 22 #Javascript
discuz表情的JS提取方法分析
Mar 22 #Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 #Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 #Javascript
Vue计算属性的学习笔记
Mar 22 #Javascript
Angular2实现自定义双向绑定属性
Mar 22 #Javascript
Bootstrap如何激活导航状态
Mar 22 #Javascript
You might like
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
Python中for循环详解
2014/01/17 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
什么是唯一索引
2015/07/05 面试题
应届生求职自荐信
2014/07/04 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书