预期达到的效果:http://www.html5china.com/html5games/mogu/index5.html
由于奖品特别多,而且是有序的,所以我们使用一个数组来装所有奖品的位置
一、需要到的全局变量
JavaScript Code复制内容到剪贴板
1. var flowerImg = new Image();//奖品鲜花
2. var leafImg = new Image();//奖品叶子
3. var acornImg = new Image();//奖品橡子
鲜花图片下载:http://www.html5china.com/html5games/mogu/images/flower.png
叶子图片下载:http://www.html5china.com/html5games/mogu/images/leaf.png
橡子图片下载:http://www.html5china.com/html5games/mogu/images/acorn.png
二、初始化托全局变量
JavaScript Code复制内容到剪贴板
1. //加载图片
2. function LoadImages()
3. {
4. mushroomImg.src = "images/mushroom.png";//蘑菇
5. backgroundForestImg.src = "images/forest1.jpg";//森林背景图
6. bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的
7. flowerImg.src = "images/flower.png";//奖品花
8. acornImg.src = "images/acorn.png";//奖品橡子
9. leafImg.src = "images/leaf.png";//奖品叶子
10.
11. mushroom.image = mushroomImg;
12. animal.image = bearEyesClosedImg;
13. }
三、定义奖品数据及实例
JavaScript Code复制内容到剪贴板
1. //定义奖品数组Prizes和对象Prize,继承游戏对象GameObject
2. var prizes = new Array();
3. function Prize() {};
4. Prize.prototype = new GameObject();//继承游戏对象GameObject
5. Prize.prototype.row = 0;//奖品行位置
6. Prize.prototype.col = 0;//奖品列位置
四、把奖品装进数组
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. prize.image = flowerImg;//鲜花放在第一行
14. if(x==1)
15. prize.image = acornImg;//豫子刚在第2行
16. if(x==2)
17. prize.image = leafImg;//叶子放在第3行
18.
19. prize.row = x;
20. prize.col = y;
21. prize.x = 20 * prize.col + 10;//x轴位置
22. prize.y = 30 * prize.row + 20;//y轴位置
23. //装入奖品数组,用来描绘
24. prizes[count] = prize;
25. count++;
26. }
27. }
28. }
五、从数组中取出奖品并描绘
JavaScript Code复制内容到剪贴板
1. //绘制奖品,把奖品显示在画布上
2. function DrawPrizes()
3. {
4. for(var x=0; x<prizes.length; x++)
5. {
6. currentPrize = prizes[x];
7. ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);
8. }
9. }
六、在游戏循环GameLoop()中加入描绘奖品的函数,如下
JavaScript Code复制内容到剪贴板
1. function GameLoop()
2. {
3. //清除屏幕
4. ctx.clearRect(0, 0, screenWidth, screenHeight);
5. ctx.save();
6. //绘制背景
7. ctx.drawImage(backgroundForestImg, 0, 0);
8. //绘制蘑菇
9. ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
10. //绘制奖品
11. DrawPrizes();
12. //绘制熊
13. //改变移动动物X和Y位置
14. animal.x += horizontalSpeed;
15. animal.y += verticalSpeed;
16. //改变翻滚角度
17. animal.angle += bearAngle;
18. //以当前熊的中心位置为基准
19. ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
20. //根据当前熊的角度轮换
21. ctx.rotate(animal.angle * Math.PI/180);
22. //描绘熊
23. ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));
24.
25. ctx.restore();
26. //检测是否碰到边界
27. HasAnimalHitEdge();
28. //检测熊碰撞蘑菇
29. HasAnimalHitMushroom();
30.
31. }
分享到:
相关推荐
003《老HRD手把手教你做绩效考核》.pdf
手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F...
这是教程手把手教你做问答系列的资源。 系列专题:https://blog.csdn.net/weixin_43233491/category_9656513.html
手把手教你配路由器手把手教你配路由器手把手教你配路由器手把手教你配路由器手把手教你配路由器
手把手教你学2812,很全面的一本书。电子版,适合初学者学习,
手把手教你学28335PDF文档,看了这个确实和2812有了对比
手把手教你用C#制作RPG游戏__罗培羽著是一本很好的国内开发RPG游戏的书籍,可以教会读者如何学会C#做游戏,而Unity3D网络游戏实战游戏开发与设计技术丛书 是在C#基础上,利用Unity引擎开发网络实战游戏,这两本书...
本书主要介绍如何利用3D固定流水线编写游戏引擎,以及在已编写引擎的基础上开发游戏,全书共分10章,主要内容包括游戏引擎简介、数学知识、材质和光照、固定流水线、游戏引擎架构、3D引擎底层封装、3D引擎封装、游戏...
手把手教你DSP配套资料 很有用的资料,用钱买来的资料
手把手教你如何从一无所有到财务自由.pdf
手把手教你学DSP28335高清pdf文件,北京航空航天大学出版社
手把手教你学dsp电子版,文档有标签,一本很好的dsp入门书,希望大家一起学习!
高清珍藏学习嵌入式开发入门最好资料《手把手教你学51单片机》教材pdf
手把手教你学DSP配套资源,里面包含例程和头文件以及配套调试助手
手把手教你学dsp2812,这本书是顾卫刚的,他的讲解比较详细
手把手教你单片机程序框架---吴坚鸿doc,手把手教你单片机程序框架---吴坚鸿
手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 ...
手把手教你用C#制作RPG游戏__罗培羽著_北京:海洋出版社
手把手教你学DSP 顾卫刚.以TMS320X281X, DSP的开发为主线,采用生动的语言深入浅出的介绍与DSP开发的方方面面,适合初学者。
手把手教你做批处理,cmd命令大全,dos命令大全,简明批处理