- 浏览: 308535 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
完善游戏
第八回合中主要是完善游戏,给游戏加上开始按钮、生命数、得分
预期达到的效果:http://www.html5china.com/html5games/mogu/index7.html
一、添加开始按钮
A、html代码中加入开始按钮,并定位他于画布的中间
XML/HTML Code复制内容到剪贴板
1. <img id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; cursor: pointer; float: left; display: block; " src="./images/START-Button.png">
开始图片下载地址:http://www.html5china.com/html5games/mogu/images/START-Button.png
B、全局变量
JavaScript Code复制内容到剪贴板
1. var gameRunning = false;//游戏运行状态
2. var gameloopId;//记住循环的变量
C、原来是游戏自己开始没有暂停的、写一个开始暂停的函数
XML/HTML Code复制内容到剪贴板
1. //开始或者暂停游戏
2. function ToggleGameplay()
3. {
4. gameRunning = !gameRunning;
5. if(gameRunning)
6. {
7. $("#BtnImgStart").hide();
8. gameloopId = setInterval(GameLoop, 10);
9. }else
10. {
11. clearInterval(gameloopId);
12. }
13. }
D、添加开始按钮事件
JavaScript Code复制内容到剪贴板
1. //事件处理
2. function AddEventHandlers()
3. {
4. //鼠标移动则蘑菇跟着移动
5. $("#container").mousemove(function(e){
6. mushroom.x = e.pageX - (mushroom.image.width/2);
7. });
8. //开始按钮
9. $("#BtnImgStart").click(function (){
10. ToggleGameplay();
11. });
12. }
注意,要把$(window).ready(function(){})函数中的setInterval(GameLoop, 10);去掉
二、添加生命数条
http://wjlgryx.iteye.com
A、需要的全局变量
JavaScript Code复制内容到剪贴板
1. var lives=3;//3条生命数
2. var livesImages = new Array();//生命图片数组
B、生命图片初始化
JavaScript Code复制内容到剪贴板
1. //生命图片因为只有6个,所以最多只能6个
2. for(var x=0; x<6; x++)
3. {
4. livesImages[x] = new Image();
5. livesImages[x].src = "images/lives" + x + ".png";
6. }
C、绘制生命条
JavaScript Code复制内容到剪贴板
1. //描绘生命条
2. function DrawLives()
3. {
4. ctx.drawImage(livesImages[lives], 0, 0);
5. }
D、当熊碰到底线时,减一条生命
JavaScript Code复制内容到剪贴板
1. //熊碰到下面边界
2. if(animal.y>screenHeight - animal.image.height)
3. {
4. lives -=1;//生命减1
5. //当还有生命条时,暂停游戏,熊回到中间位置,显出开始按钮
6. if(lives>0)
7. {
8. horizontalSpeed = speed; //初始化水平速度
9. verticalSpeed = -speed; //初始化垂直速度
10. animal.x = parseInt(screenWidth/2); //初始化熊的x坐标
11. animal.y = parseInt(screenHeight/2); //初始化熊的y坐标
12. $("#BtnImgStart").show(); //显示开始按钮
13. ToggleGameplay(); //暂停游戏
14. GameLoop(); //初始化绘图
15. }
16. }
E、当生命条数等于0或者奖品消灭完,游戏结束
游戏结束函数
JavaScript Code复制内容到剪贴板
1. //结束游戏
2. function GameOver()
3. {
4. gameRunning = false;
5. clearInterval(gameloopId);
6. alert("游戏结束!");
7. }
在熊撞到底线的代码中,加入判断,当生命数=0时,游戏结束
JavaScript Code复制内容到剪贴板
1. if(lives<=0)
2. GameOver();
在绘制奖品函数中加入判断,当奖品被消灭完时,游戏结束
JavaScript Code复制内容到剪贴板
1. //绘制奖品,把奖品显示在画布上
2. function DrawPrizes()
3. {
4. for(var x=0; x<prizes.length; x++)
5. {
6. currentPrize = prizes[x];
7. //假如没有被撞击,则描绘
8. if(!currentPrize.hit)
9. {
10. ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);
11. }
12. }
13. if(AllPrizesHit())
14. {
15. GameOver();
16. }
17. }
18. //判断是否撞完奖品,假如其中有一个
19. function AllPrizesHit()
20. {
21. for(var c=0; c<prizes.length; c++)
22. {
23. checkPrize = prizes[c];
24. if(checkPrize.hit == false)
25. return false;
26.
27. }
28. return true;
29. }
三、添加得分
A、定义全局变量
JavaScript Code复制内容到剪贴板
1. var score = 0;//分数
2. var scoreImg = new Image();//分数板
B、初始化分数板
JavaScript Code复制内容到剪贴板
1. scoreImg.src = "images/score.png";//分数板
C、给奖品加一个分数属性。这样在撞奖品时才能知道得到多少分
JavaScript Code复制内容到剪贴板
1. function Prize() {};
2. Prize.prototype = new GameObject();//继承游戏对象GameObject
3. Prize.prototype.row = 0;//奖品行位置
4. Prize.prototype.col = 0;//奖品列位置
5. Prize.prototype.hit = false;//是否被撞过
6. Prize.prototype.point = 0;//分数
D、在初始化奖品数组中加入分数
JavaScript Code复制内容到剪贴板
1. //创建奖品数组
2. function InitPrizes()
3. {
4. var count=0;
5. //一共3行
6. for(var x=0; x<3; x++)
7. {
8. //一共23列
9. for(var y=0; y<23; y++)
10. {
11. prize = new Prize();
12. if(x==0)
13. {
14. prize.image = flowerImg;//鲜花放在第一行
15. prize.point = 3;//鲜花3分
16. }
17. if(x==1)
18. {
19. prize.image = acornImg;//豫子刚在第2行
20. prize.point = 2;//橡子2分
21. }
22. if(x==2)
23. {
24. prize.image = leafImg;//叶子放在第3行
25. prize.point = 1;//叶子1分
26. }
27.
28. prize.row = x;
29. prize.col = y;
30. prize.x = 20 * prize.col + 10;//x轴位置
31. prize.y = 20 * prize.row + 40;//y轴位置
32. //装入奖品数组,用来描绘
33. prizes[count] = prize;
34. count++;
35. }
36. }
37. }
E、当熊撞到奖品时,根据碰撞奖品的分数增加总分
JavaScript Code复制内容到剪贴板
1. //撞到奖品
2. function HasAnimalHitPrize()
3. {
4. //取出所有奖品
5. for(var x=0; x<prizes.length; x++)
6. {
7. var prize = prizes[x];
8. //假如没有碰撞过
9. if(!prize.hit)
10. {
11. //判断碰撞
12. if(CheckIntersect(prize, animal, 0))
13. {
14. prize.hit = true;
15. //熊反弹下沉
16. verticalSpeed = speed;
17. //总分增加
18. score += prize.point;
19. }
20. }
21. }
22.
23. }
F、绘制分数
JavaScript Code复制内容到剪贴板
1. //描绘分数
2. function DrawScore()
3. {
4. ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板
5. ctx.font = "12pt Arial";
6. ctx.fillText("" + score, 425, 25); //得分
7. }
第八回合中主要是完善游戏,给游戏加上开始按钮、生命数、得分
预期达到的效果:http://www.html5china.com/html5games/mogu/index7.html
一、添加开始按钮
A、html代码中加入开始按钮,并定位他于画布的中间
XML/HTML Code复制内容到剪贴板
1. <img id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; cursor: pointer; float: left; display: block; " src="./images/START-Button.png">
开始图片下载地址:http://www.html5china.com/html5games/mogu/images/START-Button.png
B、全局变量
JavaScript Code复制内容到剪贴板
1. var gameRunning = false;//游戏运行状态
2. var gameloopId;//记住循环的变量
C、原来是游戏自己开始没有暂停的、写一个开始暂停的函数
XML/HTML Code复制内容到剪贴板
1. //开始或者暂停游戏
2. function ToggleGameplay()
3. {
4. gameRunning = !gameRunning;
5. if(gameRunning)
6. {
7. $("#BtnImgStart").hide();
8. gameloopId = setInterval(GameLoop, 10);
9. }else
10. {
11. clearInterval(gameloopId);
12. }
13. }
D、添加开始按钮事件
JavaScript Code复制内容到剪贴板
1. //事件处理
2. function AddEventHandlers()
3. {
4. //鼠标移动则蘑菇跟着移动
5. $("#container").mousemove(function(e){
6. mushroom.x = e.pageX - (mushroom.image.width/2);
7. });
8. //开始按钮
9. $("#BtnImgStart").click(function (){
10. ToggleGameplay();
11. });
12. }
注意,要把$(window).ready(function(){})函数中的setInterval(GameLoop, 10);去掉
二、添加生命数条
http://wjlgryx.iteye.com
A、需要的全局变量
JavaScript Code复制内容到剪贴板
1. var lives=3;//3条生命数
2. var livesImages = new Array();//生命图片数组
B、生命图片初始化
JavaScript Code复制内容到剪贴板
1. //生命图片因为只有6个,所以最多只能6个
2. for(var x=0; x<6; x++)
3. {
4. livesImages[x] = new Image();
5. livesImages[x].src = "images/lives" + x + ".png";
6. }
C、绘制生命条
JavaScript Code复制内容到剪贴板
1. //描绘生命条
2. function DrawLives()
3. {
4. ctx.drawImage(livesImages[lives], 0, 0);
5. }
D、当熊碰到底线时,减一条生命
JavaScript Code复制内容到剪贴板
1. //熊碰到下面边界
2. if(animal.y>screenHeight - animal.image.height)
3. {
4. lives -=1;//生命减1
5. //当还有生命条时,暂停游戏,熊回到中间位置,显出开始按钮
6. if(lives>0)
7. {
8. horizontalSpeed = speed; //初始化水平速度
9. verticalSpeed = -speed; //初始化垂直速度
10. animal.x = parseInt(screenWidth/2); //初始化熊的x坐标
11. animal.y = parseInt(screenHeight/2); //初始化熊的y坐标
12. $("#BtnImgStart").show(); //显示开始按钮
13. ToggleGameplay(); //暂停游戏
14. GameLoop(); //初始化绘图
15. }
16. }
E、当生命条数等于0或者奖品消灭完,游戏结束
游戏结束函数
JavaScript Code复制内容到剪贴板
1. //结束游戏
2. function GameOver()
3. {
4. gameRunning = false;
5. clearInterval(gameloopId);
6. alert("游戏结束!");
7. }
在熊撞到底线的代码中,加入判断,当生命数=0时,游戏结束
JavaScript Code复制内容到剪贴板
1. if(lives<=0)
2. GameOver();
在绘制奖品函数中加入判断,当奖品被消灭完时,游戏结束
JavaScript Code复制内容到剪贴板
1. //绘制奖品,把奖品显示在画布上
2. function DrawPrizes()
3. {
4. for(var x=0; x<prizes.length; x++)
5. {
6. currentPrize = prizes[x];
7. //假如没有被撞击,则描绘
8. if(!currentPrize.hit)
9. {
10. ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);
11. }
12. }
13. if(AllPrizesHit())
14. {
15. GameOver();
16. }
17. }
18. //判断是否撞完奖品,假如其中有一个
19. function AllPrizesHit()
20. {
21. for(var c=0; c<prizes.length; c++)
22. {
23. checkPrize = prizes[c];
24. if(checkPrize.hit == false)
25. return false;
26.
27. }
28. return true;
29. }
三、添加得分
A、定义全局变量
JavaScript Code复制内容到剪贴板
1. var score = 0;//分数
2. var scoreImg = new Image();//分数板
B、初始化分数板
JavaScript Code复制内容到剪贴板
1. scoreImg.src = "images/score.png";//分数板
C、给奖品加一个分数属性。这样在撞奖品时才能知道得到多少分
JavaScript Code复制内容到剪贴板
1. function Prize() {};
2. Prize.prototype = new GameObject();//继承游戏对象GameObject
3. Prize.prototype.row = 0;//奖品行位置
4. Prize.prototype.col = 0;//奖品列位置
5. Prize.prototype.hit = false;//是否被撞过
6. Prize.prototype.point = 0;//分数
D、在初始化奖品数组中加入分数
JavaScript Code复制内容到剪贴板
1. //创建奖品数组
2. function InitPrizes()
3. {
4. var count=0;
5. //一共3行
6. for(var x=0; x<3; x++)
7. {
8. //一共23列
9. for(var y=0; y<23; y++)
10. {
11. prize = new Prize();
12. if(x==0)
13. {
14. prize.image = flowerImg;//鲜花放在第一行
15. prize.point = 3;//鲜花3分
16. }
17. if(x==1)
18. {
19. prize.image = acornImg;//豫子刚在第2行
20. prize.point = 2;//橡子2分
21. }
22. if(x==2)
23. {
24. prize.image = leafImg;//叶子放在第3行
25. prize.point = 1;//叶子1分
26. }
27.
28. prize.row = x;
29. prize.col = y;
30. prize.x = 20 * prize.col + 10;//x轴位置
31. prize.y = 20 * prize.row + 40;//y轴位置
32. //装入奖品数组,用来描绘
33. prizes[count] = prize;
34. count++;
35. }
36. }
37. }
E、当熊撞到奖品时,根据碰撞奖品的分数增加总分
JavaScript Code复制内容到剪贴板
1. //撞到奖品
2. function HasAnimalHitPrize()
3. {
4. //取出所有奖品
5. for(var x=0; x<prizes.length; x++)
6. {
7. var prize = prizes[x];
8. //假如没有碰撞过
9. if(!prize.hit)
10. {
11. //判断碰撞
12. if(CheckIntersect(prize, animal, 0))
13. {
14. prize.hit = true;
15. //熊反弹下沉
16. verticalSpeed = speed;
17. //总分增加
18. score += prize.point;
19. }
20. }
21. }
22.
23. }
F、绘制分数
JavaScript Code复制内容到剪贴板
1. //描绘分数
2. function DrawScore()
3. {
4. ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板
5. ctx.font = "12pt Arial";
6. ctx.fillText("" + score, 425, 25); //得分
7. }
发表评论
-
iframe 高度自适应
2011-11-03 17:07 1364转自:http://apps.hi.baidu.com/sha ... -
WordPress 博客添加新浪微博挂件:
2011-06-22 14:07 14721.点击链接http://t.sina ... -
HTML5 影音 ( Video ) 概論
2011-05-25 16:25 10531 Video介紹 引用我翻譯文檔《在HTML5頁面 ... -
HTML5 Audio Loops
2011-05-19 16:49 1286One of the neatest things abo ... -
处理火狐自动播放视频
2011-05-18 17:54 1445版权声明:转载时请 ... -
教你用HTML5开发iPhone应用程序
2011-05-13 17:38 1183你一整年都像现在一样沮丧,这我知道。所有铁杆Objecti ... -
很给力,20个HTML5视频播放器及代码
2011-05-09 14:45 1972本文来源: http://www.uleadesi ... -
HTML 5 Video概述
2011-05-09 13:32 1016本文来自:http://www.xlnv.ne ... -
支持移动平台的Html5播放器
2011-05-09 13:25 2904本文转自:http://www.riameeting ... -
HTML5 API简介一(Canvas,Audio/Video,Geolocation)
2011-05-09 13:22 1560本文来自:http://www.myext.cn/web ... -
HTML5资源
2011-05-09 11:56 1217JS APIs: 选择器 W3C草案:Selecto ... -
HTML5 Audio/Video 标签,属性,方法,事件
2011-05-09 11:53 1421本文转自:http://directguo.com/blo ... -
DIV实现隐藏与显示
2011-05-06 15:23 752css中display属性的参考值: display:n ... -
HTML5+CSS3+JQuery打造自定义视频播放器
2011-05-06 12:57 6727简介HTML5的<video> ... -
HTML 5 <video> preload 属性
2011-05-06 12:54 1144设置为预加载的 video 元素: <vide ... -
HTML5 – Video
2011-05-06 12:51 1046在HTML5以前若我們要在網頁中播放影片時,需要使用Act ... -
超過 23 個開源的 HTML5 影音播放器與框架
2011-05-06 12:03 7523超過 23 個開源的 HTML5 影音播放器與框架 - ... -
Building a better HTML5 video player with Glow
2011-05-06 11:51 1072Last year I wrote a post (Bu ... -
Ambilight для тэга video
2011-05-06 11:49 775В некоторых топовых моделях т ... -
怎样用js+html5实现视频的播放控制
2011-05-06 11:46 1407html5 代码: <video width ...
相关推荐
手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F...
003《老HRD手把手教你做绩效考核》.pdf
《手把手教你用C#制作RPG游戏》是由罗培羽编著,海洋出版社于2014年5月出版的一本技术书籍,主要面向对游戏开发有兴趣,特别是想使用C#语言进行角色扮演游戏(RPG)开发的读者。本书通过详细的教学指导,帮助初学者...
除了技术和策略的教授,《手把手教你用C#制作RPG游戏》还深入探讨了RPG游戏设计的其他重要方面,比如数据的存储和管理。如何使用数据库或XML文件来保存玩家的进度、装备、游戏世界的状况等,是确保游戏稳定运行和...
《Qt5 PyQt 5实战指南—手把手教你掌握100个精彩案例》 《Qt5 PyQt 5实战指南—手把手教你掌握100个精彩案例》 《Qt5 PyQt 5实战指南—手把手教你掌握100个精彩案例》
手把手教你学28335PDF文档,看了这个确实和2812有了对比
在本资源包“手把手教你用C#制作RPG游戏素材包.rar”中,你将找到一系列用于创建角色扮演游戏(RPG)的素材,这些素材主要适用于C#编程环境下的游戏开发。RPG游戏通常需要丰富的视觉和听觉元素来营造沉浸式的游戏体验...
【标题】"手把手教你学DSPPDF"是一份针对数字信号处理(DSP)初学者的教程性PDF文档,旨在引领读者逐步掌握这一领域的基础知识。该文档可能包含了从理论概念到实际应用的全面讲解,适合那些希望踏入数字信号处理世界...
《手把手教你学DSP2812》是一本专为初学者设计的 DSP(Digital Signal Processor)学习指南,主要围绕TI公司的TMS320F2812 DSP芯片进行讲解。这本书以其全面且易懂的特性,为读者提供了一个深入理解数字信号处理及其...
在本教程“手把手教你做问答系列”中,我们将深入探讨如何有效地进行问答系统的构建与优化。这个系列的目的是帮助初学者以及有一定经验的开发者掌握问答系统的核心技术和实践方法,从而能够创建出高质量的问答解决...
本书主要介绍如何利用3D固定流水线编写游戏引擎,以及在已编写引擎的基础上开发游戏,全书共分10章,主要内容包括游戏引擎简介、数学知识、材质和光照、固定流水线、游戏引擎架构、3D引擎底层封装、3D引擎封装、游戏...
手把手教你学DSP28335,PDF格式,有助于随时随地可以学习知识。
本资源“新手入门级html5游戏开发源码(蘑菇熊)”是一个很好的起点,它提供了一系列逐步教程,帮助初学者理解游戏开发的核心概念。 首先,我们来看标题中的"蘑菇熊",这很可能是游戏的主题或主角,展示了如何设计...
手把手教你用C#制作RPG游戏__罗培羽著是一本很好的国内开发RPG游戏的书籍,可以教会读者如何学会C#做游戏,而Unity3D网络游戏实战游戏开发与设计技术丛书 是在C#基础上,利用Unity引擎开发网络实战游戏,这两本书...
手把手教你学dsp F2812 顾伟刚
手把手教你学DSP28335高清pdf文件,北京航空航天大学出版社
《手把手教你架构3D游戏引擎》是一本深入探讨3D游戏引擎开发的书籍,作者姜雪伟通过详细的步骤和实例,旨在引导读者理解和构建自己的3D游戏引擎。该书内容涵盖3D图形学基础、固定流水线技术、游戏引擎架构设计等多个...
“手把手教你DSP配套资料”这一压缩包很可能是包含了一系列关于DSP的学习材料,可能包括教程文档、示例代码、实验指导等。通过这些资料,你可以深入理解DSP的基本原理、算法和应用,逐步掌握实际操作技能,为你的...
手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 ...
《手把手教你学51单片机》教材的出版,对于那些渴望踏入嵌入式开发领域的初学者而言,无疑是一份难得的珍藏资料。51单片机作为微控制器的经典代表,一直占据着嵌入式系统教学和应用的前沿,其地位不可动摇。本书以51...