Learn while playing with HTML5 (7) - The beginning of animation: flying elves-H5 Tutorial-php.cn

1. Why choose HTML5

HTML5 Learning while playing This is already the seventh article. Before starting this article, I want to Let me first explain why it is called "HTML5" and learn while playing, because some people have questioned HTML5. After all, it is a new thing. I admit that I used HTML5 to attract attention. If you read every article in the learning-by-playing series, you will find that the content of the first six articles has little to do with HTML5. The real content is actually the learning of 2D graphics and image programming. notes.

If we want to learn 2D programming, there are actually countless programming environments to choose from: MFC and Delphi all have graphics and image processing functions (i.e. GDI), not to mention Java and .Net. If you support open source, GTK, QT, and wxPython are also good choices, and Flash is particularly good at it. Even several popular mobile phone platforms should also have 2D modules.

If you choose any of the above programming environments to learn 2D programming, you will find that their contents are basically the same: line type, fill, color, gradient, image, combination, cropping area, transformation, etc. etc. Even many of the function names are exactly the same. After all, their theoretical basis is graphics.

After figuring out what we really want to learn, the programming environment is actually just a tool. We choose the most convenient one to use based on our personal preferences. In fact, I prefer the Python programming environment, but if I use Python, I guess there won’t be too many people communicating with me, and there won’t be too many people who have the Python runtime installed on their machines.

So why choose HTML5 instead of others? First of all, the Javascript syntax is concise and flexible, the corresponding function library is small but sufficient, the 2D performance capabilities of the HTML5 Canvas tag also meet the requirements, and the running speed of the Chrome browser is satisfactory. In addition, we do not need to install a cumbersome integrated development environment or runtime. We only need an enhanced notepad and a browser to implement our ideas, and directly present the effects on the network. We just publish articles to share our thoughts with others. As for platforms, frameworks, and language features, of course the less involved these irrelevant things are, the better. This is why I chose HTML5.

So, please don’t misunderstand the meaning of the title: this series is not HTML5 study notes, but just uses HTML5 to display some knowledge content. What you should pay more attention to is the knowledge and content itself. They can be reproduced in any other programming environment.

2. Preliminary animation

Animation is just a series of consecutive pictures presented in order. However, in movies and television, these pictures have been prepared. , and in computer programs, every moment we see the picture is drawn in real time. The general process can be expressed as follows:

a. Slightly change the data of the graphics (coordinates, shape, color, etc.)

b. Clear the canvas

c. Draw graphics

d. Return to step a

Of course, here is only the simplest process framework. To implement complex animations, you may have to consider more issues, such as local clearing and collision detection.

In addition, there are two speeds that need to be controlled during the drawing process:

The first is the drawing speed, that is, how many times (frames) are drawn per second, or it can be said that each time How long the frame is paused. If your animation looks the same every frame but with different positions, this speed will have little effect.

The speed at which the second graphic moves.

So, don’t confuse these two speeds. The faster you draw, it only means the animation is smoother, but it does not mean that your image moves faster.

Using HTML5 to draw animations is basically the above process, but you also need to pay attention to two points:

1. In order to facilitate the drawing of graphics, we often change the context Object's State, so before and after drawing graphics, don't forget to save and restore the state. If you don't know what the state is, please read the previous article " HTML5 learning while playing (6): Autobot, transformation...》

2. We need to put the entire drawing action in the timer, otherwise the entire browser will become unresponsive. Javascript has two timer methods, which are:

setInterval(code,millisec) 和 setTimeout(code,millisec)

Copy after login

I have introduced these two methods, you can go to Google for related information.

Below we give a small animation of moving the block up and down. When it encounters the top or bottom, it will change the direction. The code is as follows:

基本动画



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="canvas1" width="250" height="300" style="background-color:black">

    你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

帧数：<input  id="txt1" type="text" value="25"/><br/>

每次移动距离：<input type="text" id="txt2" value="10"/><br/>

<input type="button" value="开始" onclick="move_box()"/>

<input type="button" value="暂停" onclick="stop()"/>





<script type="text/javascript">

    //定时器

    var interval=null;

    

    //停止动画

    function stop(){

        clearInterval(interval);

    }



    //===================================================================

    //基本动画

    //====================================================================

    function move_box(){

        //停止动画

        stop();

        //移动速度

        var delta=parseInt(document.getElementById(&#39;txt1&#39;).value);

        //每秒绘制多少次

        var fps=parseInt(document.getElementById(&#39;txt2&#39;).value);



        //画布对象

        var canvas=document.getElementById("canvas1")

        //获取上下文对象

        var ctx = canvas.getContext("2d");

        //设置颜色

        ctx.fillStyle="red";

        

        //方块的初始位置

        var x=100;var y=50;

        //方块的长度和宽度

        var w=30;var h=30;

        

        //开始动画

        interval = setInterval(function(){

            //改变 y 坐标

            y=y+delta;

            //上边缘检测

            if(y<0){

                y=0;

                delta=-delta;

            }

            //下边缘检测

            if((y+h)>canvas.getAttribute("height")){

                y=canvas.getAttribute("height")-h;

                delta=-delta;

            } 

            //清空画布

            ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));

            //保存状态

            ctx.save();

            //移动坐标

            ctx.translate(x,y);

            //重新绘制

            ctx.fillRect(0,0,w,h);

            //恢复状态

            ctx.restore();

        },1000/fps);

    }    

</script>

Copy after login

3. Reorganize the code

The above code can work normally, but there are many problems, mainly as follows: Points:

1. The code for calculating the position of the block and the code for drawing the block are mixed together, that is, the logic and the view are mixed, and basically cannot be expanded

2、代码没办法复用，比如我们需要绘制多个不同的方块对象：起始位置、大小、颜色、速度各不相同，每一种情况都需要重写一遍。

下面我们重新组织一下代码，把方块的共同属性抽象出来，组成一个 Box 类，由这个 Box 类负责计算每一帧方块的位置，这样就可以解决上面两个问题了。代码如下：

重新组织代码



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="canvas2" width="250" height="300" style="background-color:black">

    你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

<input type="button" value="开始" onclick="move_box2()"/>

<input type="button" value="暂停" onclick="stop()"/>



<script type="text/javascript">

    //定时器

    var interval=null;

    

    //停止动画

    function stop(){

        clearInterval(interval);

    }



    //===================================================================

    //重新组织代码

    //====================================================================

    //方块的构造函数

    function Box(color,x,y,w,h,delta){

        this.color=color;

        this.x=x;

        this.y=y;

        this.w=w;

        this.h=h;

        this.delta=delta;

        //三十帧

        this.fps=30;

        //每一帧的延迟时间

        this.delay=1000/this.fps;

        //上一次重绘的时间

        this.last_update=0;

    }

    

    //方块更新

    Box.prototype.update=function(canvas){

        //获取当前时间

        var now=(new Date()).getTime();

        //如果达到了延迟时间，则更新数据

        if((now-this.last_update)>this.delay){

        

            //改变 y 坐标

            this.y=this.y+this.delta;

            //上边缘检测

            if(this.y<0){

                this.y=0;

                this.delta=-this.delta;

            }

            //下边缘检测

            if((this.y+this.h)>canvas.getAttribute("height")){

                this.y=canvas.getAttribute("height")-this.h;

                this.delta=-this.delta;

            } 

            //记下最新一次绘制时间

            this.last_update=now;

        }

        

    }

    

    

    function move_box2(){

        //停止动画

        stop();

        //画布对象

        var canvas=document.getElementById("canvas2")

        //获取上下文对象

        var ctx = canvas.getContext("2d");

        //清空画布

        ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));

        

        //创建多个方块对象

        var boxes=[];

        boxes[0]= new Box("red",3,2,10,35,2,10);//速度10

        boxes[1]= new Box("blue",60,28,44,15,5);//速度20

        boxes[2]= new Box("green",130,200,23,18,10);//速度30

        boxes[3]= new Box("pink",200,150,35,10,20);//速度40

        

        //开始动画绘制

        interval = setInterval(function(){

            for(var i=0;i<boxes.length;i++){

                //取出一个方块

                var box=boxes[i];

                //清空这个方块

                ctx.clearRect(box.x,box.y,box.w,box.h);

                //更新数据

                box.update(canvas);

                //保存状态

                ctx.save();

                //设置颜色

                ctx.fillStyle=box.color;

                //移动坐标

                ctx.translate(box.x,box.y);

                //重新绘制

                ctx.fillRect(0,0,box.w,box.h);

                //恢复状态

                ctx.restore();

            }

        },1);//尽可能快的循环

    }    

</script>

Copy after login

四、精灵登场

据说在很久远的年代，有多远我也不知道，可能是任天堂红白机是哪个年代吧，由于游戏机处理器的计算速度有限，所以专门设置了一个硬件用来处理角色图像的相关数据，这些数据可能包括：

1、计算当前的角色应该绘制哪一帧。上面我们的方块虽然在移动，但是始终都是一个样子；可是在游戏中，一个跑动的精灵，跑动动作是由很多幅连续的图像组成，我们需要知道现在应该绘制其中的哪一幅图像；

2、表现精灵动作的很多幅连续的图像通常是集中放置在一个大图中，我们需要计算当前绘制的那一幅，在大图中处于什么位置，并把它截取出来

上面说到这个硬件，曾经被叫做 Sprite 精灵。现如今，我们的处理器已经十分强大，不再需要 Sprite 这样的辅助硬件，但是这样的功能仍然需要，只不过用软件来实现罢了，所以，我们依然用 Sprite 来称呼游戏中的一个角色。

这里有一幅图像，他描绘了一个小精灵的飞行动作

下面我们将实现一个 Sprite 类，让他在浏览器里面飞起来。

精灵登场



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="canvas3" width="250" height="300" style="background-color:black">

    你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

帧数：<input  id="txt4" type="text" value="10"/><br/>

速度：<input type="text" id="txt5" value="5"/><br/>

比例：<input type="text" id="txt6" value="2"/><br/>

<input type="button" value="开始" onclick="animate()"/>

<input type="button" value="暂停" onclick="stop()"/>



<script type="text/javascript">

    //定时器

    var interval=null;

    

    //停止动画

    function stop(){

        clearInterval(interval);

    }

    

    //===================================================================

    //精灵登场

    //====================================================================

    //每一帧在大图中的位置

    var frames=[];

    frames[0]=[0,4,19,19];

    frames[1]=[22,1,24,19];

    frames[2]=[49,0,18,17];

    frames[3]=[1,32,18,17];

    frames[4]=[22,33,24,19];

    frames[5]=[49,36,19,19];

    

    //精灵类

    function Sprite(dx,dy,delta,fps){

        this.dx=dx;

        this.dy=dy;

        this.fps=fps;

        this.delay=1000/fps;

        this.last_update=0;

        //移动速度

        this.delta=-delta;

        //帧编号

        this.index=0;

        //方向

        this.dir_left=true;

    }

    

    Sprite.prototype.update=function(canvas){

        //获取当前时间

        var now=(new Date()).getTime();

        if((now-this.last_update)>this.delay){

            if(this.dir_left){

                //方向朝左,只绘制0 1 2帧

                if(this.index>2)

                    this.index=0;

            }

            else{

                //方向朝右,只绘制 3 4 5 帧

                if(this.index>5)

                    this.index=3;

            }

            //取出当前帧的坐标

            this.frame=frames[this.index];

            

            //当前帧在大图中的位置

            this.sx=this.frame[0];

            this.sy=this.frame[1];

            this.sw=this.frame[2];

            this.sh=this.frame[3];

            

            //当前帧大小

            this.dw=this.frame[2];

            this.dh=this.frame[3];

            

            //改变 x 坐标

            this.dx=this.dx+this.delta;

            //左边缘检测

            if(this.dx<0){

                this.dx=0;

                //转向

                this.delta=-this.delta;

                this.dir_left=false;

                this.index=3;

            }

            //右边缘检测

            if((this.dx+this.dw)>canvas.getAttribute("width")){

                this.dx=canvas.getAttribute("width")-this.dw;

                //转向

                this.delta=-this.delta;

                this.dir_left=true;

                this.index=0;

            }         

            this.dy=this.dy;//y 不移动

            



            this.index++;

            this.last_update=now;

        }

    }

    

    function animate(){

        //停止动画

        stop();

        //移动速度

        var delta=parseInt(document.getElementById(&#39;txt4&#39;).value);

        //每秒绘制多少次

        var fps=parseInt(document.getElementById(&#39;txt5&#39;).value);

        //比例

        var scale=parseInt(document.getElementById(&#39;txt6&#39;).value);

        

        //画布对象

        var canvas=document.getElementById("canvas3")

        //获取上下文对象

        var ctx = canvas.getContext("2d");

        //清空画布

        ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));

        

        var img=new Image();

        img.src="http://images.cnblogs.com/cnblogs_com/myqiao/html5/sprite.gif";



        var sprite=new Sprite(120,150,delta,fps);

        interval = setInterval(function(){

            //清空画布

            ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));

            //更新数据

            sprite.update(canvas);

            //保存状态

            ctx.save();

            //移动坐标

            ctx.translate(sprite.dx,sprite.dy);

            ctx.scale(scale,scale);

            ctx.drawImage(img,sprite.sx,sprite.sy,sprite.sw,sprite.sh,0,0,sprite.dw,sprite.dh);

            //恢复状态

            ctx.restore();

        },1);

        

    }

    

</script>

Copy after login

The above is the detailed content of Learn while playing with HTML5 (7) - The beginning of animation: flying elves. For more information, please follow other related articles on the PHP Chinese website!