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

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

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

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

全部评论问答未解决精华

裴英轩

就一个字:好！

0 2-1 绘制背景

2018-10-01

慕工程0564427

demo有没

0 1-1 HTML5小游戏---爱心鱼（上）课程简介

2018-08-16

Zz皓

终于分析完了，有兴趣的可以来这看看，有源码，有效果展示，也有我的一些小分析。地址：https://github.com/CruxF/IMOOC/tree/master/HTML5?1533109391385

0 3-1 课程总结

2018-08-01

Zz皓

终于分析完了，有兴趣的可以来这看看，有源码，有效果展示，也有我的一些小分析。地址：https://github.com/CruxF/IMOOC/tree/master/HTML5?1533109391385

1 2-1 绘制背景

2018-08-01

Zz皓

终于分析完了，有兴趣的可以来这看看，有源码，有效果展示，也有我的一些小分析。地址：https://github.com/CruxF/IMOOC/tree/master/HTML5?1533109391385

1 1-1 HTML5小游戏---爱心鱼（上）课程简介

2018-08-01

慕粉3148860

老师我爱你

0 3-1 课程总结

2018-07-15

慕村1307744

背影图显示在一个Div里就好了，不必每次都重绘，内存开销太大了。

1 2-8 大鱼随鼠标移动

2018-07-11

随便讲两句

默认生成的鱼，头是向左的，在Canvas坐标里面的角度，这个水平向左就是1 * Math.PI（180度位置）。所以鱼自身的角度实际是多了一个Math.PI，也就是什么都不做就自带180度。

计算鼠标与鱼的夹角beta后，必须再减去原来多出来的一个PI（实际上就是让鱼头先旋转回0度，或者说减回180度）。

在那个lerpAngle函数做判断，不如直接在计算beta值（夹角）时减去一个PI。

var beta = Math.atan2(deltaY, deltaX) - Math.PI;

1 2-8 大鱼随鼠标移动

2018-07-04

小白白很黑

说果实没出来的，你在fruitObj的init函数的for循环里面调用一下born函数

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

2018-05-31

慕虎12953

为什么不透明

0 2-3 海葵绘制

2018-05-30

hjs9622

图片显示不出来的情况：
1.地址写错了。
2.由于onload的加载方式，图片在未加载完的情况下会导致canvas绘图失败。
解决方法
1.在html下使用img标签加载图片然后隐藏。
2.使用定时器也就是视频的做法。
3.把drawImage写在game函数外面。
纯个人网上百度后的理解，有错请指教，我也是新手啊（手动捂脸）

1 2-1 绘制背景

2018-05-25

monkey伦

fruit.js 里讲着讲着一切页面update就没了。，果实出不来啊，

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

2018-05-22

znber

https://cbat01.github.io/fishgame/tinyheart.html 打开链接可以直接体验游戏

2 2-10 优化

2018-05-17

znber

爱心鱼（上）（下）源代码：https://github.com/cbat01/fishgame，需要可以去看看

2 2-3 海葵绘制

2018-05-16

znber

爱心鱼（上）（下）源代码：https://github.com/cbat01/fishgame，需要可以去看看

1 2-10 优化

2018-05-16

首页上一页 1 2 3 4 5 6 7 下一页尾页

开始学习

课程须知: 1、对html、css基础知识已经掌握。 2、对JavaScript的基础知识掌握，如数组、类、对象。

老师告诉你能学到什么？: 1、html5 canvas制作游戏理念 2、html5 canvas 绘图API 3、游戏中的碰撞检测 4、认识几个数学函数 5、物体池概念 6、序列帧动画的控制

微信扫码，参与3人拼团

热搜

最近搜索清空

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