Spielend lernen mit HTML5 (7) – Der Beginn der Animation: fliegende Elfen

1. Warum HTML5 wählen

HTML5 Lernen beim Spielen Dies ist bereits der siebte Artikel, ich möchte zunächst erklären, warum Es heißt „HTML5“ und lernt beim Spielen, weil einige Leute HTML5 in Frage gestellt haben. Schließlich ist es eine neue Sache. Ich gebe zu, dass ich HTML5 verwende, um Aufmerksamkeit zu erregen. Wenn Sie jeden Artikel in der Reihe „Lernen beim Spielen“ lesen, werden Sie feststellen, dass der Inhalt der ersten sechs Artikel wenig mit HTML5 zu tun hat Hinweise zur 2D-Grafik und Bildprogrammierung.

Wenn wir 2D-Programmierung lernen möchten, stehen tatsächlich unzählige Programmierumgebungen zur Auswahl: MFC und Delphi verfügen alle über Grafik- und Bildverarbeitungsfunktionen (d. h. GDI), ganz zu schweigen von Java und .Net, wenn Sie es unterstützen Open Source, GTK, QT und wxPython sind ebenfalls eine gute Wahl, und Flash ist besonders gut darin. Sogar mehrere beliebte Mobiltelefonplattformen sollten auch über 2D-Module verfügen.

Wenn Sie eine der oben genannten Programmierumgebungen zum Erlernen der 2D-Programmierung auswählen, werden Sie feststellen, dass deren Inhalte im Wesentlichen gleich sind: Linientyp, Füllung, Farbe, Farbverlauf, Bild, Kombination, Beschneidungsbereich, Transformation usw . usw. Sogar viele der Funktionsnamen sind genau gleich. Ihre theoretische Grundlage ist schließlich die Grafik.

Nachdem wir herausgefunden haben, was wir wirklich lernen möchten, ist die Programmierumgebung eigentlich nur ein Werkzeug. Wir wählen basierend auf unseren persönlichen Vorlieben die bequemste aus. Tatsächlich bevorzuge ich die Python-Programmierumgebung, aber wenn ich Python verwende, werden wahrscheinlich nicht allzu viele Leute mit mir kommunizieren und nicht viele Leute werden die Python-Laufzeitumgebung auf ihren Computern installiert haben.

Warum also HTML5 anderen vorziehen? Erstens ist die Javascript-Syntax prägnant und flexibel, die entsprechende Funktionsbibliothek ist klein, aber ausreichend, die 2D-Leistungsfähigkeit des HTML5-Canvas-Tags erfüllt auch die Anforderungen und die Laufgeschwindigkeit des Chrome-Browsers ist zufriedenstellend. Darüber hinaus müssen wir keine umständliche integrierte Entwicklungsumgebung oder Laufzeit installieren. Wir benötigen lediglich einen erweiterten Notizblock und einen Browser, um unsere Ideen umzusetzen und die Auswirkungen direkt im Netzwerk darzustellen. Wir veröffentlichen einfach Artikel, um unsere Gedanken mit anderen zu teilen. Was Plattformen, Frameworks und Sprachfunktionen betrifft, ist es natürlich umso besser, je weniger involviert sie sind.

Verstehen Sie die Bedeutung des Titels bitte nicht falsch: Bei dieser Serie handelt es sich nicht um HTML5-Studiennotizen, sondern es wird lediglich HTML5 verwendet, um einige Wissensinhalte anzuzeigen. Worauf Sie mehr achten sollten, ist das Wissen und der Inhalt selbst . Sie können in jeder anderen Programmierumgebung reproduziert werden.

2. Vorläufige Animation

Animation ist nur eine Reihe fortlaufender Bilder, die der Reihe nach präsentiert werden. In Filmen und im Fernsehen wurde jedoch die Umsetzung dieser Bilder vorbereitet. , und in Computerprogrammen wird jeder Moment, in dem wir das Bild sehen, in Echtzeit gezeichnet. Der allgemeine Vorgang kann wie folgt ausgedrückt werden:

a. Ändern Sie leicht die Daten der Grafiken (Koordinaten, Form, Farbe usw.). .)

b. Räumen Sie die Leinwand frei

c. Zeichnen Sie Grafiken

Zurück zu Schritt a

Natürlich ist dies nur der einfachste Vorgang Um komplexe Animationen zu implementieren, müssen Sie möglicherweise weitere Probleme berücksichtigen, z. B. lokales Löschen, Kollisionserkennung usw.

Darüber hinaus gibt es zwei Geschwindigkeiten, die während des Zeichenvorgangs kontrolliert werden müssen:

Die erste ist die Zeichengeschwindigkeit, also wie oft (Frames) pro Sekunde gezeichnet werden, oder es kann auch gesagt werden, dass jedes Mal, wie lange der Frame angehalten wird. Wenn Ihre Animation in jedem Frame gleich aussieht, aber unterschiedliche Positionen aufweist, hat diese Geschwindigkeit kaum Auswirkungen.

Die Geschwindigkeit, mit der sich die zweite Form bewegt.

Verwechseln Sie diese beiden Geschwindigkeiten also nicht. Je schneller Sie zeichnen, desto flüssiger ist die Animation, aber nicht, dass sich Ihr Bild schneller bewegt.

Die Verwendung von HTML5 zum Zeichnen von Animationen ist im Grunde der oben beschriebene Prozess, Sie müssen jedoch noch auf zwei Punkte achten:

1. Um das Zeichnen von Grafiken zu erleichtern , wir ändern oft den Kontext Der Zustand des Objekts, vergessen Sie also nicht, den Zustand vor und nach dem Zeichnen zu speichern und wiederherzustellen Zustand ist, lesen Sie bitte den vorherigen Artikel „Lernen Sie beim Spielen von HTML5 (6): Autobots, Transformation...》

2. Wir müssen die gesamte Zeichenaktion in den Timer stellen, Andernfalls reagiert der gesamte Browser nicht mehr. Javascript verfügt über zwei Timer-Methoden, nämlich:

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

Ich habe diese beiden Methoden eingeführt. Sie können zu Google gehen, um entsprechende Informationen zu erhalten.

Unten zeigen wir eine kleine Animation, wie sich der Block nach oben und unten bewegt, wenn er auf die Ober- oder Unterseite trifft. Der Code lautet wie folgt:

基本动画



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>

3. Organisieren Sie den Code neu

Der obige Code kann normal funktionieren, es gibt jedoch viele Probleme , hauptsächlich einschließlich Die folgenden Punkte:

1. Der Code zum Berechnen der Position des Blocks und der Code zum Zeichnen des Blocks werden miteinander gemischt, dh die Logik und die Ansicht miteinander vermischt, die im Grunde nicht erweitert werden können

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>

 

四、精灵登场

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

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">

    你的浏览器不支持 <canvas>标签，请使用 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>

Das obige ist der detaillierte Inhalt vonSpielend lernen mit HTML5 (7) – Der Beginn der Animation: fliegende Elfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!