菜菜菜的前端學習日誌 - Day22

好玩兒～

最近接了一個小案子是要做手機版的網頁，其中有一個小功能就是指南針！！

當下茫茫然...不知道要如何下手做＠口＠

上網查了一下，結果發現其實並不難，就是用運用陀螺儀

接著將它實做出來，感覺挺好玩的

以前網頁上根本無法實作陀螺儀的應用

但近幾年行動裝置的普及化，陀螺儀的應用隨之增加

例如：今天要講的指南針效果、Real Racing3(之前挺愛玩的賽車遊戲)...等

許多應用都能使用此技術，但今天就只講指南針吧哈哈！！！

陀螺儀

取值

要做出這指南針的效果就是運用行動裝置上的陀螺儀

我們必須要先取得陀螺儀的值才能利用它來實作

而陀螺儀的值主要有3個，alpha、beta及gamma

分別是偵測行動裝置上的Z軸、X軸及Y軸

那我們要怎麼取得它的值呢？！

其實陀螺儀就是一個事件，跟click跟mouseover...等事件是一樣的方式

所以我們需要透過事件監聽去監聽deviceorientation來取得他的值

首先我要來測試到底有沒有成功的取到值，所以先在body標籤新增以下程式碼

alpha：<p id="alpha"></p>
beta：<p id="beta"></p>
gamma：<p id="gamma"></p>

再來在script標籤內新增監聽事件

將event參數傳進function就能取得alpha、beta、gamma值了
再來將值印出來看看，因為取到的值會有小數點所以我們用Math.round()來四捨五入取整數值

window.addEventListener('deviceorientation', function(event) {
    var z = document.getElementById('alpha'),
        x = document.getElementById('beta'),
        y = document.getElementById('gamma'),

        alpha = event.alpha,
        beta = event.beta,
        gamma = event.gamma;

        z.innerHTML = Math.round(alpha);
        x.innerHTML = Math.round(beta);
        y.innerHTML = Math.round(gamma);

}, false);

結果就會像這樣

好的！！我們取到值了那就可以來實作指南針效果了

指南針

既然要做指南針效果就需要先放一張指南針的圖片囉～

因為指南針效果是以Z軸旋轉360度，所以我們只取alpha值就好

再來就是利用前幾天講過的transform搭配alpha來改變圖片的角度

var compass = document.getElementById('compass')

window.addEventListener('deviceorientation', function(event) {
    alpha = event.alpha;

    compass.style.transform = 'rotate(' + alpha + 'deg)';
    compass.style.webkitTransform = 'rotate('+ alpha + 'deg)';
  }, false);

實作的結果就會是這樣拉

是不是很簡單又很好玩呢！！！