Jscex版Loading插件预览版本抢先看

一.简介

在大量游戏制作过程当中，必不可少的一个重要元素就是Loading.在大量的flash游戏当中我们经常可以看到，比如《XXX》的Loading

 

一个好的Loading,可以给用户不错的第一感觉，可以吸引更多的玩家。在Canvas中，我们也可以制作一个动态的loading.

这一篇，我们先看看效果，在后续的文章当中，我们一步一步把它提取成插件可配置的形式，方便大量的游戏复用。

二.预览版制作

        Word = function (text, fontSize, color, position) {
            this.text = text;
            this.fontSize = fontSize;
            this.color = color;
            this.position = position;
        }
        Vector2 = function (x, y) {
            this.x = x || 0;
            this.y = y || 0;
        };
        var textL = new Word("L", 30, "#ffffff", new Vector2(40, 60));
        var textO = new Word("o", 30, "#ffffff", new Vector2(60, 60));
        var textA = new Word("a", 30, "#ffffff", new Vector2(80, 60));
        var textD = new Word("d", 30, "#ffffff", new Vector2(100, 60));
        var textI = new Word("i", 30, "#ffffff", new Vector2(120, 60));
        var textN = new Word("n", 30, "#ffffff", new Vector2(140, 60));
        var textG = new Word("g", 30, "#ffffff", new Vector2(160, 60));
        var textPoint1 = new Word(".", 30, "#ffffff", new Vector2(180, 60));
        var textPoint2 = new Word(".", 30, "#ffffff", new Vector2(200, 60));
        var textPoint3 = new Word(".", 30, "#ffffff", new Vector2(220, 60));
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.fillStyle = "#ffffff";
        var text = [];
        text.push(textL);
        text.push(textO);
        text.push(textA);
        text.push(textD);
        text.push(textI);
        text.push(textN);
        text.push(textG);
        text.push(textPoint1);
        text.push(textPoint2);
        text.push(textPoint3);

        function drawAllWords() {
            cxt.font = "bolder " + textL.fontSize + "px 宋体";
            cxt.fillText(textL.text, textL.position.x, textL.position.y);
            cxt.font = "bolder " + textO.fontSize + "px 宋体";
            cxt.fillText(textO.text, textO.position.x, textO.position.y);
            cxt.font = "bolder " + textA.fontSize + "px 宋体";
            cxt.fillText(textA.text, textA.position.x, textA.position.y);
            cxt.font = "bolder " + textD.fontSize + "px 宋体";
            cxt.fillText(textD.text, textD.position.x, textD.position.y);
            cxt.font = "bolder " + textI.fontSize + "px 宋体";
            cxt.fillText(textI.text, textI.position.x, textI.position.y);
            cxt.font = "bolder " + textN.fontSize + "px 宋体";
            cxt.fillText(textN.text, textN.position.x, textN.position.y);
            cxt.font = "bolder " + textG.fontSize + "px 宋体";
            cxt.fillText(textG.text, textG.position.x, textG.position.y);
            cxt.font = "bolder " + textPoint1.fontSize + "px 宋体";
            cxt.fillText(textPoint1.text, textPoint1.position.x, textPoint1.position.y);
            cxt.font = "bolder " + textPoint2.fontSize + "px 宋体";
            cxt.fillText(textPoint2.text, textPoint2.position.x, textPoint2.position.y);
            cxt.font = "bolder " + textPoint3.fontSize + "px 宋体";
            cxt.fillText(textPoint3.text, textPoint3.position.x, textPoint3.position.y);
        }

        var currentMap = 0;
        drawAllWords();
        var drawAsync = eval(Jscex.compile("async", function () {
            while (true) {
                cxt.clearRect(0, 0, c.width, c.height);
                drawAllWords();
                if (currentMap > 395) currentMap = 0;
                currentMap += 5;
                if (parseInt(currentMap / 40) <= text.length - 1) {
                    text[parseInt(currentMap / 40)].fontSize = 60 - currentMap % 40;

                }
                if (parseInt(currentMap / 40) + 1 <= text.length - 1) {

                    text[parseInt(currentMap / 40) + 1].fontSize = currentMap % 40 + 20;
                }
                $await(Jscex.Async.sleep(10));

            }
        }));
        drawAsync().start();

整个预览版不到一百行代码，因为它只是一个预览版，离文字内容、文字大小、文字位置、轮循速度等可配置还有很大的距离。

 

三.在线演示

Your browser does not support the canvas element.

 

四.同步

本文已同步更新至：

HTML5实验室【目录】:   http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html