js+canvas实现动态吃豆人效果
更新时间：2017年03月22日 10:30:05 作者：18301695170
本文主要介绍了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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
js前端身份证号、手机号脱敏、手机号、身份证号加密处理(ios浏览器兼容性问题)
这篇文章主要给大家介绍了关于js前端身份证号、手机号脱敏、手机号、身份证号加密处理的相关资料,还介绍了ios浏览器兼容性问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了如何使用Node.js搭建一个简单的错误监控平台,用于收集和上报Vue.js项目的运行错误,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下2024-11-11
在使用uni-app完成扫码功能时,有时需要聚焦文本框的同时,需要软键盘消失,下面这篇文章主要给大家介绍了关于uniapp中input聚焦禁止软键盘弹出的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了JS点击图片弹出文件选择框并覆盖原图功能的实现代码,需要的朋友可以参考下2017-08-08
还在一味没有目的的编写JavaScript代码吗？那么你就OUT了！让我们一起来看看小编为大家搜罗的JavaScript开发人员应该具备的十大关键习惯吧2014-12-12
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
下面小编就为大家带来一篇对存在JavaScript隐式类型转换的四种情况的总结(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了javascript实现依次输入input自动定焦的方法及示例代码，非常实用，这里推荐给小伙伴们2014-12-12
下面小编就为大家带来一篇js控制一个按钮是否可点击(可使用)disabled的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
javascript查找字符串中出现最多的字符和次数的小例子
这篇文章介绍了javascript查找字符串中出现最多的字符和次数的小例子，有需要的朋友可以参考一下2013-10-10
这篇文章主要为大家详细介绍了JS实现点击button按钮切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论