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

慕粉3724715 2018-03-26

绘制海葵

截图
0赞 · 0采集
璐哥 2017-10-10

requestAnimFrame

0赞 · 0采集
kevinleelee 2017-09-21

requestAnimFrame

0赞 · 0采集
qq_用心创造未来_03492348 2017-08-26

图片出不来发现是图片src的问题，bgPic.src一直加载不过来，在页面中加个图片隐藏掉，再获取图片地址就可以出来了。<img id="img" src="../img/background.jpg"> bgPic = document.getElementById("img");

0赞 · 0采集
weixin_慕UI3559495 2017-06-03

画背景图直接调用drawBackground()函数死活不出来,必须要加上onload回调函数才行，可能是因为图片的异步加载原因？还有不知道canvas的原理是什么,canvas并没有background这个属性啊，图片是怎么出来的呢？ bgPic.onload = function(){ drawBackground() }

0赞 · 5采集
慕粉1951061543 2017-04-30

绘制海葵绘制直线的API beginPath(); closePath(); strokeStyle; stroke(); linewidth; lineCap;

截图
0赞 · 0采集
小跟班 2017-04-08

canvas.getContext("2d")

0赞 · 0采集
94爱犯傻4053938 2017-01-31

requestAnimFrame(); 是一个比较科学的API，相对于setInterval和setTimeout来讲，requestAnimFrame会更科学 requestAnimFrame的原理就是：当前绘制完成之后，去根据你机器的性能来确定间隔多长时间绘制下一帧，所以它是一个智能计算的过程。而setInterval和setTimeout会有一个固定的时间，比如我们指定给它每过60ms就绘制一帧，万一你绘制的内容非常大，以至于60ms之内不能完成，而requestAnimFrame会是一个科学的方法，但是也有一个问题：fps————frame per second(每秒多少帧). 使用requestAnimFrame会导致帧与帧之间的时间间隔是不固定的，所以有一个动态的时间间隔。

0赞 · 2采集
鱼儿游0 2016-12-06

2-1 9:39

截图
0赞 · 0采集
self_potato 2016-12-06

绘制海葵

截图
0赞 · 0采集
Mr_Qiao 2016-10-27

requestAnimationFrame();这个和老师提供的函数是一致吧，类库里没这个requestAnimaFrame

0赞 · 0采集
LIKE3349117 2016-10-19

game 游戏

0赞 · 0采集
Wilfredo3827904 2016-09-04

now

截图
0赞 · 1采集
tongtong985 2016-08-18

哪里有requestAnimFrame 的代码呀？不然怎么引用

0赞 · 0采集
hhh112123123 2016-08-10

frame per second 每秒多少帧

0赞 · 0采集
hhh112123123 2016-08-10

requestAnimFrame 根据你机器的性能来确定刷新时间

0赞 · 0采集
qq_爱与时光终相遇_03685843 2016-07-22

小鱼 JQUERI

0赞 · 0采集
ASunnyBoy 2016-07-21

浏览器怎么暂停一针一针一直闪

0赞 · 0采集
qq_心悦 2016-07-16

requestAnimFrame

0赞 · 0采集
qq_心悦 2016-07-16

requireami

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

2，绘制海葵绘制海葵用到了这样一些API：绘制直线的API：beginPath();closePath();strokeStyle;stroke();lineWidth;lineCap; 这些东西挺多的，好几个，我们到网页上来看一下：这几个API它们都是如何来定义的。

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

8，我们还有一个准备工作，其实它主要是工作了一部分，只是它非常简单，所以把它(绘制背景) 作为准备工作的一部分。好，为了代码清晰，我们首先新建一个文件，ctrl+N,ctrl+S,把它保存到 js文件夹下，命名为background.js 在这个脚本里面。 /* 在这个脚本里面，我们只做绘制background这一件事情，那么刚才说了我们有两个canvas，是有分工的， canvas2是绘制背景的，我们要使用ctx2这个场景，绘制图片，我们有一个背景图片background.jpg 我们直接把这个图片绘制上去，就可以了，那么绘制图片应该用drawImage(pic,locx,locy,w,h) 参数pic指绘制pic这张图绘制在哪里？locx，和locy。这张背景我们肯定是绘制在canvas的从最左上角一直到右下角，那么讲一下canvas的坐标，canvas的坐标是以canvas的左上角为原点(00点)，x轴向右为正方向，y轴向下为正方向。现在在main.js文件的开头定义一张背景图片。然后在init方法中加载这张图片，然后当这张图片加载进来后，把它放到drawImage的第一个参数里。然后第二个和第三个参数表示从哪里开始绘制，当然是从canvas的00点开始，然后给定宽度和高度。宽和高就是canvas的宽和高 canvas是从左上角原点00点，然后右下角是x轴的正方向，和y轴的正方向，也就是说x轴是向右为正， y轴是向下为正，那么我们再来获取一下canvas的尺寸。因为这两个canvas呢，是一样大的，定义的尺寸是一样大的，所以我们只需要获取一个就够了(在main.js开头获取)。获取canvas1的宽和高,然后将获取的宽和高加在background.js中drawImage函数的第4个和第5个参数里。然后到浏览器中刷新一下，并且要把这个函数drawBackground放在gameloop中。并且 background.js这个脚本文件要加载到html里面来。然后刷新浏览器，背景图片已经绘制好了。到这里，我的准备工作已经结束了。 */ function drawBackground(){ ctx2.drawImage(bgPic,0,0,canWidth,canHeight); }

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

7，在这之后，我们还有一个任务：也是一个准备工作：因为requestAnimFrame这个API会导致这个帧的时间间隔，会不统一不一致，不稳定，所以我们需要知道当前帧执行在两帧之间，执行了多长时间，我们在 main.js的开头定义两个变量lastTime,deltaTime 在game函数中，初始化完之后，给它一个初始值， function game(){ //初始化工作 init(); //我们在初始化完之后，来给lastTime一个初始值，当前时间。 lastTime=Date.now(); //deltaTime首先给一个零值。 deltaTime=0; // gameloop(); } 在gameloop里面呢？我们需要每次更新，每次刷新一下deltaTime。获取一下当前两帧之间间隔是多少。那我们这时候就需要获得当前时间，var now=Date.now();deltaTime就等于当前时间减去lastTime: deltaTime=now-lastTime;同时需要更新一下上一次的时间：lastTime=now;然后打印一下deltaTime 是否像我刚才说的是一个变化的值:console.log(deltaTime);然后，保存，在浏览器中刷新一下：我们看到在console中一连串的数字，16,17有时候甚至是15,13，还有20.帧与帧之间的时间间隔是不稳定的，是在一个区间范围之内浮动的。做这件事情的意义是什么呢？你想，每一帧间隔的时间相等，里面假设有一个小人在走动，那么每次给它一个速度，这个时候，它就是在做匀速运动，但是如果每一帧的间隔时间不是固定的，那么就是一个一直在变化的速度在运动，为了维持游戏角色的运动是平滑的，我们需要使用时间差来调整物体的运动速度，大家可以记得这个地方，到时候我们在写的时候会去用，结合具体的内容去理解这个东西。应该说到这个地方，我们所有的准备工作，做了一半了。

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

6，我们首先看这个gameloop是否循环起来了？在控制台打印出一个字符loop。然后在 function game(){ //初始化工作 init(); // gameloop(); } 中引用gameloop。我们希望game函数在作为主入口初始化完成之后，来执行第二个 gameloop循环。在浏览器中loop已经在循环打印了。

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

/* 我们来看看这个打包好的函数做了什么事情： return 返回一个function，如何返回function？根据什么条件？需要根据浏览器的类型，比如：webkit(safari浏览器，chrome浏览器)，比如mozilla(火狐浏览器)，还包括opera(opera浏览器) ms(微软浏览器)。根据这些浏览器类型去访问，如果所有的都不适应，那我们就用setTimeout，给它一个固定的帧率的间隔1000 / 60，这是一个打包好的功能，我们就直接使用它，这是我比较省事的方法，我每次html5游戏的时候，就不需要重新写这些东西，因为这些东西写起来也容易出错，我每次只需要将整个文件放进来，然后直接引用这个function就可以了。 */ window.requestAnimFrame = (function() { return window.requestAnimationFrame window.webkitRequestAnimationFrame window.mozRequestAnimationFrame window.oRequestAnimationFrame window.msRequestAnimationFrame function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { return window.setTimeout(callback, 1000 / 60); }; })();

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

5，接下来还有一个关键的知识点：如何让游戏动起来？动起来就是要靠刷新，像动画一样需要一帧一帧的来画，如何让它来刷新呢？我们需要一个这样的功能gameloop()————游戏循环。比如游戏中，小鱼要不断的走动，靠每一帧会有一个位移，然后每一帧的位移慢慢相加，就产生了一个动的效果。这个时候需要一个gameloop。gameloop在js中有专门的API来做这个事情。 requestAnimFrame();这个API怎么来使用：这是一个比较科学的API，相对于setInterval和setTimeout来讲， requestAnimFrame会更科学，为什么呢？requestAnimFrame的原理就是：当前绘制完成之后，去根据你机器的性能来确定间隔多长时间绘制下一帧，所以它是一个智能计算的过程。而setInterval和setTimeout会有一个dis的时间，比如我们指定给它每过60ms就绘制一帧，万一你绘制的内容非常大，以至于60ms之内不能完成，而requestAnimFrame会是一个科学的方法，但是也有一个问题：fps————frame per second(每秒多少帧). 使用requestAnimFrame会导致帧与帧之间的时间间隔是不固定的，所以有一个动态的时间间隔。 requestAnimFrame在不同的浏览器上面，需要进行配饰，我之前已经写好了不同浏览器下面的配饰，并且把它打包好————commonFunctions.js 我先把这个文件拷贝过来。拷贝在E:\h5游戏\tityheart\js下。这是我比较偷懒的一个方法了。先把commonFunctions.js放到html里面。把它加载进来。

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

1,准备工作：搭建html网页结构。绘制背景：在canvas上面绘制背景。如何使用canvas API呢？也就是画布已经有了，画笔在哪里？如何引用这些API？先进行一些初始化工作。 1.获得canvas1标签。 2.canvas是画布，context是画笔，可以用画笔在画布上画画了。 3.怎么画呢？当然是使用canvas的API了。 canvas1的场景：canvas的API：getContext()-------->获得场景。 canvas1中绘制： fishes(鱼妈和小鱼),dust(灰尘)，UI(用户界面)，circle（圈圈的特效）:大鱼吃到果实的时候，会有一个白色圈特效，包括大鱼把食物给小鱼时有个橙色的圈特效，这个特效绘制在canvas1中。 canvas2中绘制：background(背景)，ane(海葵anemone，简写ane),fruits(果实) 4，首先看一下canvas1和canvas2哪个在前，哪个在后？我们在定义css的时候，定义了z-index，即顺序。因为两个canvas是被包含在allcanvas的div 里面，那么这两个canvas就有个前后顺序。 z-index的规则是这样的： z-index的值越小，越在后面。值越大，越在前面。所以canvas1在前面，canvas2在后面。

0赞 · 0采集
weibo_火着_0 2016-06-14

document.body.onload=game;

截图
0赞 · 0采集
EyreSS 2016-05-11

绘制海葵API

截图
0赞 · 0采集
LYUWENCHAO 2016-05-04

设置canvas的宽高，不能在style样式表里面修改，而要在标签里面修改，例如<canvas height='600' width='800'></canvas>.这两种写法是有区别的，canvas对象的默认宽高属性是300、150。第一种修改style，相当于将300*150拉伸至800*600，会变形。第二种是修改canvas对象的默认宽高属性，不会变形。console.log(canWidth,canHeight)会发现是300,150；而不是800,600。所以老师这里实际绘图，图片是先转换成300*150，再缩放为800*600，反复缩放会造成图片失真。视频没出现失真是因为老师用的背景图本来就是800*600，如果换成其他大小的明显图片，比如含文字的1366*768,就能看出区别了。另外，canWidth = can1.width;是获得canvas对象的width属性，不是它的宽度样式。这里没有加var，canWidth是个全局变量，所以之后的作图函数能够直接读取到int（）函数里面的canWidth。也算是var加深了理解

2赞 · 4采集

数据加载中...