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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 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排序算法的复习和总结
2012/02/15 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
JavaScript修改css样式style
2008/04/15 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
用Python编写web API的教程
2015/04/30 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python 功能和特点(新手必学)
2015/12/30 Python
用Django写天气预报查询网站
2018/10/21 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
大学生的自我鉴定范文
2014/01/21 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
nginx访问报403错误的几种情况详解
2022/07/23 Servers