HTML5小游戏---爱心鱼（上）_技术笔记

大大米 2020-03-04

3、绘制果实，黄色果实和蓝色果实
使用到的API
drawImage()

长大 ---> 成熟

截图
0赞 · 0采集
大大米 2020-03-04

2、绘制海葵
绘制直线的API
beginPath()
closePath()
strokeStyle
stroke()
lineWidth
lineCap()
globalAlpha;
save()
destore()

截图
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采集
慕设计6364247 2017-11-23

12:43

0赞 · 0采集
浅浅07251228 2016-07-04

绘制

截图
0赞 · 0采集
浅浅07251228 2016-07-04

海葵

截图
0赞 · 0采集
java家洼 2016-06-23

7，果实类定义：都是属性的定义： var fruitObj=function(){ this.alive=[];//bool //果实坐标 this.x=[]; this.y=[]; //果实的图片资源 this.orange=new Image(); this.blue=new Image(); }

0赞 · 0采集
java家洼 2016-06-23

6，果实类的初始化方法： /* 另外还要初始化一下。初始化的时候还要给池子里面的每一个果实，要告诉它，它是什么状态。我们首先初始化的时候，给它是否活着的属性一种任务状态，即初始化为真。 */ fruitObj.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.alive[i]=true; this.x[i]=0; this.y[i]=0; /* 这个意思就是说：在初始化的时候，让所有的果实都出生，出生的过程呢，就是找到一个位置让它出生， */ this.born(i); } this.orange.src="./src/fruit.png"; this.blue.src="./src/blue.png"; }

0赞 · 0采集
java家洼 2016-06-23

5，果实的draw方法： /* 哦，另外我们还要画果实。我们这边就要画每一个果实了。它有两个状态，首先是长在海葵上面，因为果实的数量要比海葵的数量要小，所以我们不用很担心，即便会有重复，我们先不去管它，ok。我们先做一个循环，在这个循环里面，画果实。怎么画果实？果实首先要找到一个定位，找到一个海葵，然后grow，长了之后呢就开始漂了，网上漂fly up。我们首先find an ane,这个时候我们如何找呢？当前的这个果实要生长在哪里呢？我们直接写一个born函数。把draw放在gameloop的循环里面。然后到浏览器中看一下情况如何。看，所有的果实已经在位置上了。只是这个位置有点点偏差。你看这个果实的位置和这个海葵的位置是不对的，这是为什么呢？因为drawImage这个API呢它绘制的时候，是从图片的0,0点(即图片的左上角)开始的，所以这个地方，x值的坐标需要减去这个图片的宽度的一半，同样的，y值的坐标也要减去图片高度的一半。 ctx2.drawImage(this.orange,this.x[i]-this.orange.width*0.5,this.y[i]-this.orange.height*0.5); 来到浏览器中看一下，这样就很好了，每个果实都长在海葵上面，也就是说大家现在看到的不是30个。这是为什么？因为有重叠，我们没有给它做一个排除。问题在这个地方，我们是找的随机值，这个随机的时候是会出现重复的： var aneId=Math.floor(Math.random()*ane.num); 怎么样排除重复呢？那就是给海葵做一个记录，判断一下它当前有没有被占用，如果没有被占用，这个果实就可以生成在这个海葵上，如果这个海葵上面已经有了一个果实，就找下一个海葵。 */ fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ /* 我们首先不管果实大小，先把它画上去，再说，我们当前的任务呢是让果实出生， */ ctx2.drawImage(this.orange,this.x[i]-this.orange.width*0.5,this.y[i]-this.orange.height*0.5); } }

1赞 · 0采集
java家洼 2016-06-23

4.1 果实的born方法： fruitObj.prototype.born=function(i){ var aneId=Math.floor(Math.random()*ane.num); this.x[i]=ane.x[aneId]; this.y[i]=canHeight-ane.len[aneId]; }

1赞 · 0采集
java家洼 2016-06-23

4，果实的born方法： /* 当前的这个果实要生长在哪里呢？我们直接写一个born函数。这个方法就是随机找一个海葵，海葵总共有50个，我们要记录一下当前的位置。我们为什么需要海葵的位置呢？因为果实是长在海葵上面的，要知道海葵顶端的坐标是多少，然后果实才能到这个位置。需要知道这个位置的xy值。好，我们找一个数值，在海葵的这50个数量中，随机找一个，并且这个aneId需要是整数值，那么用 Math.floor(),那么aneId就是从0到49的这样一个值，ok，就随机给果实找到了一个对应的海葵。要容易辨认，找到了之后呢，我们就知道了x值， var x=ane.x[aneId]; y值就是整个canvas的高度减去海葵的高度。 var y=canHeight-ane.len[aneId]; x，y这两个属性是果实所对应的x值和y值。这两个值需要记录下来。所以在fruitObj类定义的时候添加两个属性x和y。 var fruitObj=function() { this.alive=[];//bool this.x=[]; this.y=[]; //果实的图片资源 this.orange=new Image(); this.blue=new Image(); } 然后我们在初始化的时候，也给x和y初始化一下。给0值。 fruitObj.prototype.init=function() { for(var i=0;i<this.num;i++){ this.alive[i]=true; this.x[i]=0; this.y[i]=0; } this.orange.src="./src/fruit.png"; this.blue.src="./src/blue.png"; } 在果实出生的时候赋值一下正确的值。我们把这个i值传进来。这样子，对应的i的果实的x值和y值我们就得到了。ok，这样子我们在draw的时候呢，就有了依据，因为我们在画果实的时候要用到果实的坐标，首先我们来看一下果实是画在哪一个画布上的？是画在第二个canvas上面的，并且born这个方法必须放在果实类的init方法中 */

0赞 · 0采集
java家洼 2016-06-23

3，果实的update方法：接下来我们再考虑一个问题：我们什么时候告诉其中的一个果实，你要去执行任务了。也就是说我们要一个判断这里我们需要一个基本的规则，我们需要给果实定义一个规则。比方说：在整个屏幕上，只允许有15个果实，那么当一个果实出去之后，那么屏幕上还剩下14个，这个时候我们就要执行一个命令，就是告诉那些闲着的果实，要有一个需要出生了，就是这个规则，我们来写一下，这是一个规则，与代码实现没有关系：果实允许范围=15，一旦小于15个，那就要出生了，哦，我们回到代码。也就是每一帧的时候，都要去判断一下果实的状态，是不是当期屏幕上少了，少了的话，就要新生果实，这时候我们在fruit类里面写一个方法：更新。 /* 我们把所有的数据计算都放到里面来。我们需要检测当前屏幕上，有多少个果实，我们需要检测所有的果实状态。如果他的alive状态为真，那么num++ 好，在循环完了之后呢我们的整个逻辑在这里有点小小的复杂，首先我们要给它设计一个池，在这个池子里，又有不同的状态，即便是屏幕上的海葵呢，而又分为两种状态。这些东西混合到一起，没有办法说从头到尾地把这个功能完整的流畅的写出来。这比较困难，我们一定要学会拆捡，这样子我们就自然而然的，浑然不觉的就把一个复杂的东西做好了，好，首先我们来这样子规划，我们认为所有的果实，这个池子里面的，所有的都是在执行任务的，我们先把执行任务的这块写好，也就是从长大到成熟，飘出去，漂出屏幕外，ok，这样我们在初始化的时候，就把它初始化为真，this.alive[i]=true;每一个都是活着的，那么我们这边就要画每一个果实了。 */ fruitObj.prototype.update=function(){ var num=0; for(var i=0;i<this.num;i++){ if(this.alive[i]) num++; } }

1赞 · 0采集
java家洼 2016-06-23

2.在main.js中定义并初始化果实类，同时将果实的图片设置为果实类的属性并初始化好，这个类的结构我们就搭出来了。那我们在main.js中给果实定义一个对象，对象叫fruit，并且要在 init方法中初始化一下， /new一个新的fruit类并且初始化一下。 fruit=new fruitObj(); fruit.init(); 另外在gameloop循环中呢，需要绘制果实，ok，这样我们对象就定义好了。那我们来刷新浏览器看有没有问题，好，没有问题。这个池子我们已经建好了，另外果实是需要图片资源来绘制的，一种是黄色的，一种是蓝色的，我们要把这个资源加载进去，我们把它放在fruit的类里面，我们把那个黄色的叫做orange当然你可以给它任意一个名字，那个蓝色的呢，我们叫它blue，这是两个图片资源： this.orange=new Image(); this.blue=new Image(); 在fruit类的初始化函数init中呢，我们希望把这个图片资源加载进来。orange的叫fruit，蓝色的叫blue。同样的蓝色加载进来： this.orange.src="./src/fruit.png"; this.blue.src="./src/blue.png"; 那么初始化的时候，这两张图片就可以加载进来了。

1赞 · 0采集
java家洼 2016-06-23

绘画果实分析2： /* 那果实都有哪些属性呢？是否活着————这是一个布尔值，是真还是假，我们目前只给它一个属性，其他的属性和框架我们慢慢的搭。 */ var fruitObj=function(){ this.alive=[];//bool } /* 首先给它定义一个数量，池子，数量是30 */ fruitObj.prototype.num=30; /* 另外还要初始化一下。初始化的时候还要给池子里面的每一个果实，要告诉它，它是什么状态。我们首先初始化的时候，给它是否活着的属性一种任务状态，即初始化为真。 */ fruitObj.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.alive[i]=true; } } /* 哦，另外我们还要画果实。 */ fruitObj.prototype.draw=function(){ } 好，这个类的结构我们就搭出来了。

1赞 · 0采集
java家洼 2016-06-23

三，那么海葵就做完了。接下来我们要绘制果实。 1.绘制果实的分析：一个一个的果实漂上去，首先它长大，漂上去，那么API非常简单，就一个drawImage(). 复杂的地方在这里：首先它要在海葵上面慢慢的长大，从无到有长大。长大成熟之后就离开海葵，就开始往上漂，一直往上漂。直到漂出了屏幕。我们来看一下海葵果实的过程。首先它会从无到有，长出来，长出来之后呢，就往上漂，而且漂的速度各有不同，像这样的机制怎么样实现呢？首先这么多海葵果实怎么来控制？一般我们会设立一个池子，这些池子里面有足够数量的果实。每次我们只需要挑选出需要出生的果实，让它出生，开始长大，长大完之后，开始往上漂，漂出屏幕之后呢，它就死了。我们到时候要做一个判断。所以果实首先它会有两种主要的状态，它是活跃还是不活跃。那我们怎么区分活跃还是不活跃呢？是什么意思呢？比方说：如果我们的屏幕上大概有 15个果实，我们的整个果实池会设到足够的大，比方说我们会设到30个。这样子呢，只要有需要，有需求，有果实的需求，那么池子里面肯定有闲着的果实，我们可以拿来用，所以这个池子里面果实数量要足够的多，这个一般是估算一下有多少个，我们这里有三十个就足够了。这三十个果实有两种状态，一种是闲着，它在排队等着，还有一种状态是它被指定的一个任务说：你要开始在海葵上生长了，长长长，长大了之后，然后往上漂。漂出了屏幕之后，就告诉它你的任务完成了，请你回去排队，排队的概念其实就是把它的状态设置到一个闲着的状态。那么对于已经有任务的海葵，它又分为两种状态，一种就是它长在海葵上面，正在长大，另外一种过程就是漂的过程，ok，这样分析完了之后呢我们就开始逐步的把整个任务一点一点的剥离开来，我们首先把大的内容写好，然后逐步去写里面的细节，ok，我们回到浏览器中，我们首先新建一个文件，Ctrl+N，Ctrl+S，叫做fruit.js 好，保存一下，那果实呢，还是和海葵一样给它定义一个类，然后在类里边设立数组，来控制着很多数量的海葵，

4赞 · 0采集
EyreSS 2016-05-11

绘制果实

截图
0赞 · 0采集
双双要当大学霸 2016-03-15

drawImage（）；向画布上绘制图像、画布或视频

0赞 · 0采集
双双要当大学霸 2016-03-15

/*beginPath，告诉场景我们要开始路径， * moveTo 把路径移动到指定点，不创建线条 * LineTo 添一个新点，建从该点到最后指定点的线条 * stroke 绘制已定义的路径 * strokeStyle 用于颜色 * lineWidth 当前线条的宽度 * lineCap 线条结束端点样式 * globalAlpha 当前透明值 * */

0赞 · 0采集
qqwww 2016-02-24

果实1

截图
0赞 · 0采集
qqwww 2016-02-23

果实2

截图
0赞 · 0采集
sofa 2015-12-23

绘制果实API

截图
0赞 · 0采集
狐狸丢丢 2015-10-30

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

截图
0赞 · 0采集
王子睿 2015-10-14

电脑版右侧有图片和JS文件下载。

截图
1赞 · 1采集
帮秋 2015-10-08

学习了rtyt

0赞 · 2采集
三寸天堂梅 2015-10-08

请问这个游戏中所需要的图片资源在哪里获得呢？？？求解

截图
1赞 · 5采集

数据加载中...