![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5 动画游戏
文章平均质量分 52
iteye_8466
这个作者很懒,什么都没留下…
展开
-
HTML5 Canvas简单动画:圆周运动
一个简单的动画:两个点在两个圆上运动。页面中有两个canvas,有一个背景设置为透明。欢迎访问博主的网站:[url]http://www.108js.com/link.html[/url]效果图:[img]http://dl2.iteye.com/upload/attachment/0091/6291/63b99bed-858b-37a8-850a-3f33b19ae14d.g...2013-11-28 10:32:20 · 341 阅读 · 0 评论 -
HTML5 Canvas贝塞尔曲线动画
点击这里可以查看动画效果:[url]http://www.108js.com/article/article3/zip1/BezierAnim.html[/url]欢迎访问博主的网站:[url]http://www.108js.com[/url]效果图:[img]http://dl2.iteye.com/upload/attachment/0097/3712/a93baf25-34...2014-05-22 08:35:02 · 376 阅读 · 0 评论 -
HTML5 Canvas简单淡入淡出游戏启动界面
欢迎访问博主的网站:[url]http://www.108js.com[/url]查看效果:[url]http://www.108js.com/article/article3/game/ex1/exam.html[/url]效果图:[img]http://dl2.iteye.com/upload/attachment/0097/8010/ee30220a-6775-31c9-b3...2014-06-05 12:22:41 · 1078 阅读 · 0 评论 -
javaScript 广度优先搜索法"自动推箱子"(一)
用JS写了一个“广度优先搜索法”自动推箱子,理论上无论多少箱子都可以求解,但事实上箱子多了以后,就。。。;有需要的拿出发挥,修改,高手就可以跳过了。。。代码随后给出,先看运行效果:第一关:[url]http://www.108js.com/article/article5/zip/50059/Test-1.html[/url]第四关:[url]http://www.10...2014-06-12 09:45:50 · 391 阅读 · 0 评论 -
HTML5 Canvas学习笔记(1)处理鼠标事件
一直在学习HTML5 Canvas相关内容,游戏,动画,水平还很低,于是想写一些笔记,代码可能不全是我自已的,感谢他们。效果图:[img]http://dl2.iteye.com/upload/attachment/0098/3356/efd83b0d-3d3c-3fcb-94c1-ebfc603ad79c.gif[/img]点击看效果:[url]http://www.108j...2014-06-21 17:48:40 · 271 阅读 · 0 评论 -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯性了。希望各位老师指出我学习中的错误!!效果图:[img]http://dl2.iteye.com/upload/attachment/0098/4033/f6d4c7a8-3799-31c3-b2da-4c61a5e291d1.gif[/img]点击看效果:[url]http://www.108js.com/art...2014-06-23 23:13:40 · 476 阅读 · 0 评论 -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
先要准备应付各种浏览器的声音文件,什么.mp3,.ogg,.wav等格式。还是看例子吧 //音频播放 var loadAudioLen=0;//已加载的声音数 var AudioList={};//缓存已加载的声音 var audiolen=2;//要加载的声音总数 function audioOnl...2014-06-25 11:20:44 · 293 阅读 · 0 评论 -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
效果图:[img]http://dl2.iteye.com/upload/attachment/0098/4964/c75c17de-85e9-3bb1-aa45-3f1518c1cc22.gif[/img]点击看效果:[url]http://www.108js.com/article/canvas/4/inout.html[/url]欢迎访问博主的网站:[url]http...2014-06-26 11:26:33 · 245 阅读 · 0 评论 -
HTML5 Canvas学习笔记(5)游戏得分动画
效果图:[img]http://dl2.iteye.com/upload/attachment/0098/5168/e0519189-e6c2-35a7-88db-cc0fc074af20.gif[/img]点击查看效果:[url]http://www.108js.com/article/canvas/5/exam.html[/url]欢迎访问博主的网站:[url]http...2014-06-26 17:11:12 · 267 阅读 · 0 评论 -
HTML5 Canvas学习笔记(6)拼图游戏(数字版)
今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。效果图:[img]http://dl2.iteye.com/upload/attachment/0098/5731/677a0210-4c34-3f6a-a033-218acb1b7b16.gif[/img]点击这里试玩[url]http://www.108js.com/article/canvas/6/play.htm...2014-06-28 17:38:49 · 1277 阅读 · 0 评论 -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
在网上看到一个俄罗斯方块游戏:[url]http://www.108js.com/article/article11/b0044.html[/url]感觉还不错,学习了它的源码,写点笔记。俗话说:熟读唐诗三百首,不会吟诗也会吟。我相信熟读源码三百个,不会编程也会编。这个俄罗斯方块游戏的精华部分应该是三个类,先看这个第一个Block类:[code="java"](functi...2014-07-04 10:53:52 · 318 阅读 · 0 评论 -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)》[url]http://128kj.iteye.com/blog/2088202[/url]先看这个游戏中的第二个重要类Shape,它表示一种随机的俄罗斯方块,由若干个色块Block组成。[img]http://dl2.iteye.com/upload/attachment/0098/7615/5699fa25...2014-07-04 13:08:44 · 193 阅读 · 0 评论 -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)》:[url]http://128kj.iteye.com/blog/2088255[/url]有了前两个类作基础,这个游戏很快就可以完成了。效果图:[img]http://dl2.iteye.com/upload/attachment/0098/7676/dc72cba3-b9d4-34b9-8a08-d4...原创 2014-07-05 07:13:59 · 151 阅读 · 0 评论 -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。鼠标拖动或点按都可以“数钱”,效果图:[img]http://dl2.iteye.com/upload/attachment/0104/5227/9b8473ee-a2de-340a-a6c9-6df5cbba0081.gif[/img]点击可以试玩:[url]http://www.108js.com/article/canvas/...2014-12-21 14:01:31 · 517 阅读 · 0 评论 -
一个非常好的HTML5 Canvas焰火效果
效果图:[img]http://dl2.iteye.com/upload/attachment/0104/7209/9977d3f3-c238-3382-b6d0-619745abdf29.gif[/img]点击观看效果:[url]http://www.108js.com/article/canvas/fire/Canvas_10.html[/url]欢迎访问博主的网站:[url]...2014-12-28 15:56:34 · 247 阅读 · 0 评论 -
HTML5 Canvas简单透明文字动画
效果图:[img]http://dl2.iteye.com/upload/attachment/0108/8080/476f7b01-a1b3-39c8-81d8-1bc5387d6614.gif[/img]效果链接:[url]http://www.108js.com/article/canvas/8/demo.html[/url]代码: your brow...2015-05-22 08:17:34 · 987 阅读 · 0 评论 -
获取鼠标在HTML5 Canvas中的坐标
body { margin: 0px; padding: 0px; } function writeMessage(canvas, message) { var context = canvas.getContext('2d'...原创 2014-05-21 16:43:50 · 219 阅读 · 0 评论 -
HTML5 Canvas动画模板
创建HTML5的画布动画,我们可以使用requestAnimFrame()方法使浏览器以确定最佳的FPS为我们更新动画。对于每一个动画帧,我们可以更新在画布上的元素,清除画布,重新绘制的画布,然后请求另一个动画帧。下面是一个简单的框架,备用。 body { margin: 0px; padding: 0px; }...原创 2014-05-21 10:59:00 · 598 阅读 · 0 评论 -
HTML5 Canvas 圆弧动画(绕四周运动)
点击这里可以看到动画效果:[url]http://www.108js.com/article/article7/src/70206/Arcs1.html[/url]欢迎访问博主的网站:[url]http://www.108js.com[/url]效果图:[img]http://dl2.iteye.com/upload/attachment/0097/0986/e57ad2d1-...2014-05-14 10:44:56 · 1341 阅读 · 0 评论 -
用像素块遮挡图片的某部分
用像素块遮挡图片的某部分,它可将图像变得不可识别。效果图:[img]http://dl2.iteye.com/upload/attachment/0091/7202/6dfc5cfb-965d-3a2f-ae76-c92b524788ac.gif[/img]HTML5代码:[code="java"]canvas 图片像素化function $$(id){...2013-11-30 13:57:01 · 205 阅读 · 0 评论 -
学习:HTML5 游戏《银河系的掠夺》图片加载进度条
游戏来源网址:http://dougx.net/plunder/plunder.html[img]http://dl2.iteye.com/upload/attachment/0091/9232/db230367-bd37-3dff-a28e-642a212e016c.gif[/img]据网站介绍,这个游戏是用HTML5 Canvas 和Audio对象开发,游戏的第一级(第一关)已完全...2013-12-06 15:21:59 · 123 阅读 · 0 评论 -
HTML5 Canvas 旋转的“金字塔”
效果图:[img]http://dl2.iteye.com/upload/attachment/0114/0248/a753e27d-05f0-3e52-ae9f-90e11df19974.gif[/img]效果链接:[url]http://www.108js.com/article/article3/zip4/31095/demo.html[/url]代码: ...2015-12-24 13:25:32 · 524 阅读 · 0 评论 -
HTML5 Canvas眨眼睛动画
在网上发现一个java眨眼睛动画,把代码改成了HTML5 +JS,效果如下:[img]http://dl2.iteye.com/upload/attachment/0093/3185/e44e4e3e-32ae-3fbe-8e56-87d4e2513037.gif[/img]动画中有一些明显不足之处,请会的朋友指正,谢谢!这里可以看效果:[url]http://www.108j...2014-01-18 16:35:56 · 615 阅读 · 0 评论 -
HTML5 Canvas 精灵表动画实例
两张精灵表图片:[img]http://dl2.iteye.com/upload/attachment/0093/3680/e47121b8-31b7-3fd9-934c-bfc69b82257a.png[/img][img]http://dl2.iteye.com/upload/attachment/0093/3682/b143e797-fcc5-3b67-949d-60003f8b...2014-01-20 17:59:04 · 897 阅读 · 0 评论 -
javascript实用图像加载器
[code="java"]一、HTML代码 javascript实用图像加载器 //使用方法: resources.load(['img/sprites.png','img/terrain.png']); resources.onReady(start); function start(){ var ca...2014-01-27 21:37:46 · 115 阅读 · 0 评论 -
美防长来了,HTML5 画个星条旗(美国国旗)
美防长来了,不希望中国与美国在未来开战,HTML5 画个星条旗(美国国旗)祈祷。[img]http://dl2.iteye.com/upload/attachment/0095/8174/89e635e6-98b7-3d0c-94b1-24156fdf1c62.gif[/img]代码: 美国国旗 你的浏览器不支持HTML5[code="ja...2014-04-07 16:13:06 · 537 阅读 · 0 评论 -
HTML5 推箱子游戏过关演示动画
点击下面链接可看动画:[url]http://www.108js.com/article/article3/zip1/exam/a.html[/url]效果图:[img]http://dl2.iteye.com/upload/attachment/0096/5256/03b73cb3-f5b3-30ee-8763-c540fd983bda.gif[/img]代码:[code...2014-04-27 13:40:14 · 389 阅读 · 0 评论 -
HTML5 绕四边运动的文字动画
点击这里可以看动画效果:[url]http://www.108js.com/article/article3/zip1/30229/Test.html[/url]效果图:[img]http://dl2.iteye.com/upload/attachment/0096/7143/6617ce15-afff-31a7-8f97-9df3350fde2b.gif[/img]代码:...2014-05-03 16:07:06 · 172 阅读 · 0 评论 -
HTML5 太极旋转动画
点击这里可以看动画效果:[url]http://www.108js.com/article/article3/zip1/30229/Test2.html[/url]效果图:[img]http://dl2.iteye.com/upload/attachment/0096/7151/b3bbc765-65c3-340c-b6bc-092db5c85c86.gif[/img]代码:...2014-05-03 16:21:04 · 218 阅读 · 0 评论 -
HTML5 Canvas旋转文本动画
点这里可以看动画效果:[url]http://www.108js.com/article/article3/zip1/text.html[/url]效果图:[img]http://dl2.iteye.com/upload/attachment/0096/7830/31f71cfc-d490-3b7e-8853-d9e3f133576c.gif[/img]代码:...2014-05-05 15:49:21 · 257 阅读 · 0 评论 -
HTML5 Canvas “红心一棵”
效果图:[img]http://dl2.iteye.com/upload/attachment/0096/8812/46f33138-815d-378a-a40f-e8d3a1f9af40.gif[/img]笛卡尔公式:r = a(1-sin弧度)画“红心”。代码: HTML5 Canvas“红心一棵” ...2014-05-08 10:38:04 · 315 阅读 · 0 评论 -
简单HTML5 Canvas Arrow旋转动画
效果图:[img]http://dl2.iteye.com/upload/attachment/0108/8083/a578e2c3-c0e3-39ca-a192-dc7c0793c6e0.gif[/img]效果链接:[url]http://www.108js.com/article/canvas/9/demo.html[/url]代码: your brow...2015-05-22 08:38:23 · 411 阅读 · 0 评论