Phaser3游戏三角学应用--一只跟随屏幕点击位置游动的鱼

wangbinke 发布于2019-08-02 12:00 / 1975人阅读

摘要：资源图代码中为初始化代码三角函数得出鱼要旋转的角度判断鱼是否需要反转点击的位置和鱼头相同不反转点击的位置和鱼头相同不反转判断鱼是否需要反转点击的位置和鱼头相反反转点击的位置和鱼头相反反转让鱼移动到点击的位置更多游戏教学为游戏开发

资源图:

代码

var config = {
    type: Phaser.AUTO,
    parent: "iFiero", // game id; html中为 
    width: 500,
    height: 380,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

// 初始化代码
function init() {

}

function preload() {
    this.load.image("bg", "assets/undersea-bg.png");
    //this.load.image("arrow", "assets/sprites/arrow.png");
    this.load.spritesheet("fish", "assets/fish-136x80.png", {
        frameWidth: 136,
        frameHeight: 80
    });
}


function create() {
    this.add.image(0, 0, "bg").setOrigin(0).setScale(0.65);

    // this.arrow =  this.add.image(250, 200, "arrow", Phaser.Math.Between(0, 5));
    this.fish = this.add.image(0, 80, "fish", 0).setScale(0.7);

    this.input.on("pointerdown", function (pointer) {

        // 三角函数 得出鱼要旋转的角度
        this.fish.rotation = Math.atan2(pointer.y - this.fish.y, pointer.x - this.fish.x);

        // 判断鱼是否需要反转:点击的位置和鱼头相同=>不反转
        if ((pointer.x > this.fish.x)) {
            console.log("点击的位置和鱼头相同=>不反转");
            this.fish.flipY = false;
        }

        // 判断鱼是否需要反转:点击的位置和鱼头相反=>反转
        if ((pointer.x < this.fish.x)) {
            console.log("点击的位置和鱼头相反=>反转");
            this.fish.flipY = true;
        }

        // 让鱼移动到点击的位置
        this.tweens.add({
            targets: this.fish,
            x: pointer.x,
            y: pointer.y,
            duration: 3000,
            ease: "Power2",
        });

    }, this);
}

更多游戏教学：www.iFiero.com -- 为游戏开发深感自豪

云服务器 GPU云服务器点击屏幕点击位置 html点击位置 html小鱼游动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53270.html

Phaser3游戏三角学应用--一只跟随屏幕点击位置游动的鱼

摘要：资源图代码中为初始化代码三角函数得出鱼要旋转的角度判断鱼是否需要反转点击的位置和鱼头相同不反转点击的位置和鱼头相同不反转判断鱼是否需要反转点击的位置和鱼头相反反转点击的位置和鱼头相反反转让鱼移动到点击的位置更多游戏教学为游戏开发 showImg(https://segmentfault.com/img/remote/1460000017023462); showImg(https://...

CoderDock 2019-08-26 12:23 评论0 收藏0
AI.App-maya建模与骨骼动画快速实现人工鱼

摘要：在行为中的例子沙丁鱼群游动鱼游动避障鲤鱼跃龙门行为。大法好由于力求简单快速实现，只要求快速入门。鱼的身体摆动如图，通过绑定骨骼，从鱼头到尾部，总共应该有到个节点。前后翻转翻转后快速前进一段距离后速度恢复。平衡没有摆动，在空间内缓慢位移。背景这个月学校举办人工鱼大赛，简单的说就是通过编程实现一或多条鱼的形态、行为、动作、习性等仿真。 ▼涂晓媛的人工鱼概念图showImg(https:...

cikenerd 2019-06-26 18:14 评论0 收藏0
[phaser3入门探坑]使用phaser3制作山寨马里奥

摘要：前言是一个优秀的前端库，封装了很多底层的实现，可以用来制作游戏，场景等。今年月新发布了，到今天为止已经更新到了。声明本游戏来自于小站的官方教程，加入了一些个人的注释，本文旨在帮助各位观众老爷快速上手。前言 phaser是一个优秀的前端canvas库，封装了很多底层的实现，可以用来制作游戏，h5场景等。今年1月新发布了phaser3，到今天为止已经更新到了3.30。声明本游戏来自于...

szysky 2019-08-22 15:43 评论0 收藏0