HTML5小游戏---爱心鱼（上）_技术问答

首页免费课 HTML5小游戏---爱心鱼（上）问答

HTML5小游戏---爱心鱼（上）

                
                Daisy
            
                    查看讲师更多课程 
                    Daisy讲师的其他课程
                
HTML5小游戏---爱心鱼（下）
中级·46269
免费课程
                                
canvas实现星星闪烁特效
中级·54186
免费课程
                                
                难度中级
            
                时长 2小时34分
            
                学习人数
            
综合评分9.50
                            139人评价
                        查看评价
                                9.6
                                内容实用
                            
                                9.5
                                简洁易懂
                            
                                9.4
                                逻辑清晰

全部评论问答未解决精华

Notedwf

谁能把完整代码发一份啊，急求。2563104749@qq.com

0 2-4 果实绘制（静态果实）

2016-04-11

stones4zd

背景不动，因此我用了3个canvas，1个背景，1个海葵，1个其他。。。。这样就避免了海葵看不到（其实是画出来了的，但是被image给盖住了）。
这样，海葵依然可以使用loopgame循环渲染。

2 2-3 海葵绘制

2016-04-11

qq_流年是染指的青春_0

http://img1.sycdn.imooc.com//down/560b6c8a000196af00000000.zip 这是素材地址。资料下载提供的有

15 1-2 搭建HTML网页结构

2016-04-11

stones4zd

drawImage 在chrome里是异步加载的。所以image没有加载完毕时就调用了drawImage,在chrome里是显示不了图片的。需要保证图片加载完毕后，才能显示图像。
function drawBackground(){
bgPic.onload=function(){
ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
}
}
老师用的浏览器应该是firefox吧。firefox没有这个问题。

11 2-1 绘制背景

2016-04-10

weibo_煮了吧_0

我感觉不用监听果实的数量，直接把果实数量设为15，每死一个果实，就重新生成该果实，这样游戏中的果实数量也始终为15.

7 2-6 果实绘制（果实数量控制）

2016-04-07

若颜染瞳

所有图片的下载地址有没有呀

0 1-2 搭建HTML网页结构

2016-04-06

Juliet

海葵不出来，找了很久原因找不到，后面终于发现了问题，就是canvas的宽和高度必须要这么定义<canvas id="canvas" width='200px' height='200px' style="border:1px solid #aaa;margin:50px;"></canvas>

1 2-3 海葵绘制

2016-04-05

Juliet

海葵画不出来。。。

0 2-3 海葵绘制

2016-04-03

君异

十分感谢老师

2016-04-03

恩言

老师讲得很棒，强烈推荐！！

0 3-1 课程总结

2016-04-02

yb2015

有木有高手解释下function lerpAngle(a,b,t){
var d = b - a;
if(d > Math.PI) d = d - 2 * Math.PI;
if(d < -Math.PI) d = d + 2 * Math.PI;
return a + d * t;
}
想不明白哇。。

0 2-8 大鱼随鼠标移动

2016-04-02