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 · 405 阅读 · 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 · 415 阅读 · 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 · 1112 阅读 · 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 · 425 阅读 · 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 · 321 阅读 · 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 · 523 阅读 · 0 评论 -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
先要准备应付各种浏览器的声音文件，什么.mp3,.ogg,.wav等格式。还是看例子吧 //音频播放 var loadAudioLen=0;//已加载的声音数 var AudioList={};//缓存已加载的声音 var audiolen=2;//要加载的声音总数 function audioOnl...2014-06-25 11:20:44 · 349 阅读 · 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 · 277 阅读 · 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 · 317 阅读 · 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 · 1325 阅读 · 0 评论 -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
在网上看到一个俄罗斯方块游戏:[url]http://www.108js.com/article/article11/b0044.html[/url]感觉还不错，学习了它的源码，写点笔记。俗话说：熟读唐诗三百首，不会吟诗也会吟。我相信熟读源码三百个，不会编程也会编。这个俄罗斯方块游戏的精华部分应该是三个类，先看这个第一个Block类：[code="java"](functi...2014-07-04 10:53:52 · 368 阅读 · 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 · 229 阅读 · 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 · 184 阅读 · 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 · 551 阅读 · 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 · 289 阅读 · 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 · 1073 阅读 · 0 评论 -
获取鼠标在HTML5 Canvas中的坐标
body { margin: 0px; padding: 0px; } function writeMessage(canvas, message) { var context = canvas.getContext('2d'...原创 2014-05-21 16:43:50 · 257 阅读 · 0 评论 -
HTML5 Canvas动画模板
创建HTML5的画布动画，我们可以使用requestAnimFrame()方法使浏览器以确定最佳的FPS为我们更新动画。对于每一个动画帧，我们可以更新在画布上的元素，清除画布，重新绘制的画布，然后请求另一个动画帧。下面是一个简单的框架，备用。 body { margin: 0px; padding: 0px; }...原创 2014-05-21 10:59:00 · 648 阅读 · 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 · 1391 阅读 · 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 · 237 阅读 · 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 · 147 阅读 · 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 · 596 阅读 · 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 · 682 阅读 · 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 · 946 阅读 · 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 · 153 阅读 · 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 · 589 阅读 · 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 · 423 阅读 · 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 · 203 阅读 · 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 · 245 阅读 · 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 · 289 阅读 · 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 · 336 阅读 · 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 · 485 阅读 · 0 评论