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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
js控制input输入字符解析
Dec 27 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python修改字典键(key)的方法
2019/08/05 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
python中操作文件的模块的方法总结
2021/02/04 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
中学生旷课检讨书500字
2014/10/29 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
写给领导的感谢信
2015/01/22 职场文书
解除同居协议书
2015/01/29 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
2015年教研员工作总结
2015/05/26 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
Redis实现一个账号只能登录一个设备
2022/04/19 Redis