大大米

2020-03-05

5、大鱼吃果实的碰撞检测

原理：

检测大鱼和果实的距离

截图

0赞 · 0采集

大大米

2020-03-05

4、画大鱼，身子，尾巴，眼睛

使用到的API

translate()

rotate()

Math.atan2(y, x)

截图

0赞 · 0采集

大大米

2020-03-04

3、绘制果实，黄色果实和蓝色果实

使用到的API

drawImage()

长大 ---> 成熟

截图

0赞 · 0采集

大大米

2020-03-04

2、绘制海葵

绘制直线的API

beginPath()

closePath()

strokeStyle

stroke()

lineWidth

lineCap()

globalAlpha;

save()

destore()

截图

0赞 · 0采集

大大米

2020-03-04

课程结构

1、准备工作

搭建HTML网页结构

绘制背景

截图

0赞 · 0采集

大大米

2020-03-04

课程面向用户

1、具有HTML、CSS基础知识

2、具有JavaScript基础知识(函数、类、对象)

3、具有一些Canvas基础(画线、弧线、圆)

截图

0赞 · 0采集

大大米

2020-03-04

分两个阶段

阶段一目标

1、静止的海葵

2、海葵产生果实

3、果实自动漂浮

4、大鱼吃果实

5、大鱼喂小鱼

阶段二目标

1、海葵摆动动画

2、大鱼眼睛、尾巴动画

3、小鱼眼睛、尾巴动画

4、小鱼生命值判断

5、游戏分值计算

6、漂浮物

截图

0赞 · 0采集

大大米

2020-03-04

课程介绍

玩法：

1、大鱼吃果实

2、大鱼喂小鱼

3、小鱼恢复体力

截图

0赞 · 0采集

GerhardzzZ

2019-10-09

beginPath,moveTo,lineTo, stroke,strokeStyle,lineWidth,lineCap,globalAlpha,closePath

截图

0赞 · 0采集

一只肥鹤

2018-11-05

图片显示很大很糊

正确：

错误：

错误：#canvas1 { position: absolute; left: 300px; top: 100px; z-index: 0; width: 700px; height: 400px; }

在js中获取canvas的宽高：

正确：canWidth = can1.width;

错误：canWidth = can1.style.width;

0赞 · 0采集

一只肥鹤

2018-11-05

大于运动 明显与鼠标不符

我之前已知图片显示很大很糊，大鱼代码检查不出问题。改了canvas参数居然神奇的好了哈哈

正确：

错误：

错误：#canvas1 { position: absolute; left: 300px; top: 100px; z-index: 0; width: 700px; height: 400px; }

在js中获取canvas的宽高：

正确：canWidth = can1.width;

错误：canWidth = can1.style.width;

1赞 · 1采集

一只肥鹤

2018-11-02

果实不显示 或 屏幕上果实一直闪烁

问题：长度赋值少了“+”

我写的长度代码this.l[i] = 0.01*deltaTime;(初始长度可能设置的太小所以画面看不到)然后在判断长度是否小于最大值，小于再增大this.l[i] += 0.01*deltaTime;

这样在显示每一帧时果实都会又变成初始最小长度状态然后再增加，这个变化还没有看到就到下一个帧。只能看到刚增大的一小段。所以看起来是闪烁的。与deltaTime的大小设置无关。

0赞 · 0采集

一只肥鹤

2018-10-30

drawImage以后发现果实太大。

因为drawImage方法显示的图片大小与设备分辨率有关的，如果想要缩小图片，可以在此方法中加入width和height宽度。并将其大小设置为原来的0.2倍(倍数可以自己设定)。即ctx2.drawImage(this.orange,this.x[i],this.y[i],this.orange.width*0.2,this.orange.height*0.2);

此时果实已经看起来正常了，但是发现果实没有在海葵上面，因为这是的x，y坐标对应果实起点而非中心点，因此还要修改x,y.

最后的drawImage方法为ctx2.drawImage(this.orange,this.x[i]-this.orange.width*0.2*0.5,this.y[i]-this.orange.height*0.2*0.5,this.orange.width*0.2,this.orange.height*0.2);

1赞 · 1采集

论斤烤

2018-10-08

课程基础知识

截图

1赞 · 1采集

论斤烤

2018-10-08

阶段及目标

截图

1赞 · 1采集

论斤烤

2018-10-08

玩法…………

截图

1赞 · 1采集

论斤烤

2018-10-08

效果…………

截图

0赞 · 0采集

猿莱如此

2018-08-22

好东西，回头学

截图

0赞 · 0采集

qq_Flyxiang_0

2018-05-02

大鱼绘制使用到的API

translate()

rotate()

Math.atan2(y,x)

1赞 · 1采集

tzhxz

2018-04-10

画大鱼

截图

0赞 · 0采集

慕粉3724715

2018-03-26

绘制海葵

截图

0赞 · 0采集

慕粉063518953

2017-12-12

逼真，高于flash

0赞 · 0采集

weixin__LVQINGD_0

2017-12-05

2017-12-5完成果实上浮

0赞 · 0采集

慕设计6364247

2017-11-23

12:43

0赞 · 0采集

qq_蓝湛花重锦官城_0

2017-11-14

第一阶段：

1.静止的海葵

2.海葵产生果实

3.果实自动漂浮

4.大鱼吃果实

5.大鱼喂小鱼

第二阶段：

1.海葵摆动动画

2.大鱼眼睛，尾巴动画

3.小鱼杨静，尾巴动画

4.小鱼生命值判断

5.游戏分值计算

6.漂浮物

0赞 · 0采集

weixin_bingo0_0

2017-10-26

为什么我的鱼是倒着游的

2赞 · 0采集

慕粉13132550196

2017-10-20

有空闲时间做随机生成水果的去重工作

0赞 · 0采集

璐哥

2017-10-10

requestAnimFrame

0赞 · 0采集

兔儿月饼

2017-10-07

第一批果实吃了没消失,而后来的果实能吃掉的,可以把fruit初始化中的fruit.born()去掉, 在gameloop中一样可以产生果实.

0赞 · 0采集

kevinleelee

2017-09-21

requestAnimFrame

0赞 · 0采集