Phaser拖拽线条交互效果实现代码_HTML

Phaser拖拽线条
为什么要拖拽线条，感觉是像扯拉面一样。但这个效果是目前一个小游戏应用需要的，就是儿童游戏连线找答案。

如何实现
线条在Phaser的世界里就是一个一个矩形组合而成的集合，通过让这些矩形填充相同的颜色目测就是一条直线。当然我们使用圆形来组合也可以，那么你需要接受圆形带来的低下效率。

于此同时，我们还需要实现交互效果，通过鼠标移动来拖拽线条的长度和方向。在Phaser中提供了一个update函数，Phaser会周期性调用update函数。那么我们需要控制线条长度和方向需要在这个函数里来实现。

代码例子

代码如下

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/phaser.min.js"></script>

</head>
<body>
<script>
    var game = new Phaser.Game(728,640, Phaser.CANVAS,"", {
        preload:onPreload,
        create:onCreate,
        update: update
    }, true);
    var totem;

    // 游戏预加载
    function onPreload() {
        game.load.spritesheet('balls', 'images/balls.png', 17, 17);
    }

    // 游戏已创建
    function onCreate() {
        handle1 = game.add.sprite(200, 160, 'balls' );
        handle1.key = "ball_1";
        handle1.anchor.set(0.5);
        handle1.inputEnabled = true;
        handle1.events.onInputDown.add(set);
        handle1.events.onInputUp.add(launch);

        // 用于绘制线条的bitmap
        this.bmd = this.add.bitmapData(this.game.width, this.game.height);
        this.bmd.addToWorld();
    }

var catchFlag = false;//是否拖拽

    var points = {
        'x': [ 0, 0 ],
        'y': [ 0, 0 ]
    };
    function set(e){
        points.x[0] = game.input.activePointer.worldX;
        points.y[0] = game.input.activePointer.worldY;
        catchFlag = true;
    }

    function launch(){//鼠标弹起
        catchFlag = false;
        //判断连线是否符合规范
        var p = {
            x:[points.x[0],points.x[1]],
            y:[points.y[0],points.y[1]]
        }
        data4Line.push(p);
    }

    var data4Line = [];
    function update(){
        if(catchFlag){
            this.bmd.cls();// 清除面板内容重新绘制
            points.x[1] = game.input.activePointer.worldX;
            points.y[1] = game.input.activePointer.worldY;
            var x = 0.001;
            // 通过X轴生成路径
            for (var i = 0; i <= 1; i += x) {
                // 线性算法生成路径点
                var px = this.math.linearInterpolation(points.x, i);
                var py = this.math.linearInterpolation(points.y, i);
                var a = this.bmd.rect(px, py, 2, 2, 'rgba(0, 0, 0, 1)');
            }

            // 绘制已连的线
            for(var j =0; j<data4Line.length;j++){
                var p = data4Line[j];
                var x = 0.001;
                for (var i = 0; i <= 1; i += x) {
                    // 线性算法生成路径点
                    var px = this.math.linearInterpolation(p.x, i);
                    var py = this.math.linearInterpolation(p.y, i);
                    this.bmd.rect(px, py, 2 ,2, 'rgba(0, 0, 0, 1)');
                }
            }
        }
    }
</script>
</body>
</html>

搜索

热门标签:

Phaser拖拽线条交互效果实现代码