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 仿关机效果的图片层
Dec 26 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
Element Carousel 走马灯的具体实现
Jul 26 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 生成文字png图片的代码
2011/04/17 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
总经理任命书
2014/03/29 职场文书
家长建议怎么写
2014/05/15 职场文书
升国旗演讲稿
2014/09/05 职场文书
母亲节寄语大全
2015/02/27 职场文书
雷锋观后感
2015/06/10 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
python xlwt模块的使用解析
2021/04/13 Python
详解Python生成器和基于生成器的协程
2021/06/03 Python
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL