Phaser3游戲三角學應用--一只跟隨屏幕點擊位置游動的魚

wangbinke 發布于2019-08-02 12:00 / 2012人閱讀

摘要：資源圖代碼中為初始化代碼三角函數得出魚要旋轉的角度判斷魚是否需要反轉點擊的位置和魚頭相同不反轉點擊的位置和魚頭相同不反轉判斷魚是否需要反轉點擊的位置和魚頭相反反轉點擊的位置和魚頭相反反轉讓魚移動到點擊的位置更多游戲教學為游戲開發

資源圖:

代碼

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小魚游動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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