> For the complete documentation index, see [llms.txt](https://johch3n611u.gitbook.io/c50108/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201904/2019-0412.md).

# 2019/0412/JQ動畫實做(寶可夢遊戲開場)&第四次專題報告

JQ動畫

### 寶可夢開場動畫&#xD;

#### 動畫原理&#xD;

利用人的視覺暫留，不同秒數改變物件位置，增加場景

### 題外話 : 如何判別趨勢&#xD;

#### 語言&#xD;

工科 pythen ， 其他科系 R

結果人工智慧深度機器學校較夯 蟒蛇比較適用

#### 協定&#xD;

4g LTE WiMax

技術不重要

殺手集應用 application

任天堂快死掉 - > wii&#x20;

技術陀螺儀

應用體感

但開創一個新的可能性

有應用後就開始重視content&#x20;

遊戲就有獨占遊戲

內容會帶動硬體

#### 押寶性的發展決策&#xD;

M-2003-Taiwan

押錯寶 壓到 wimax

3g 384k 影音通話 就不是殺手級應用

但礙於很多東西，如硬體差、頻寬低

ＩＴＵ決定發展

ＩＮＴＥＬ推動４Ｇ　ＷＩＭＡＸ

台灣北中南各一家電信公司建置網路環境

南部為大同電信，全島ＷＩＭＡＸ

結果只有伺服器端有ＷＩＭＡＸ，但客服端沒有這種技術

南韓壓ＬＴＥ值接押對寶

ＣＡＲＥ基地台蜂巢網路ＨＡＮＤＯＦＦ換基地台

所以移動時根本沒訊號換手速度

後來就改成暫存資料轉換等等技術輔助

日本先從無線網路開始有線網路爛

Pdc phs

但日本網路更慢，日本多貼圖傳簡訊所以

Gprs很夯 <-> 2.5g <-> 3g

根據各地區的使用習性

５Ｇ　無線網路ＷＩＦＩ整合行動通訊網路ＬＴＥ

ＷＩＦＩ無法換手

ＷＩＦＩ　５０Ｍ

ＷＩＭＡＸ　１０ＫＭ

ＶＥＲＴＩＣＡＬＨＡＮＤＯＦＦ

垂直換手　異質性網路換手

無縫換手

手機上網走到某個有ＷＩＦＩ的地方時直接切換ＷＩＦＩ

資安可以靠區塊鏈但速度太慢

彼特畢區塊鏈

金融可以但即時遊戲無法

台灣大缺點　代工依賴品牌要有相關設計，技術也要跟上

但鴻海懂得買別人缺啥直接買公司買技術，得靠高層眼光好看得懂趨勢

ＸＸＸ概念股

公安　人為操作　電腦操作衝突

### 回到正題&#xD;

場景是一層疊一層（圖層概念　還有深度

ＸＹＺ

動畫物件順序

場景變化等等

都是寫程式時要考量的

### 首先&#xD;

用ＤＩＶ建置場景並將需要出現的演員（圖片文字等等．．）置入

此時不考慮位置會依照ＨＴＭＬ預設排列

此時要考慮

上下左右前後與規格（大小．．．）與特性（可拖動）與場景物件變化順序

設置ＤＩＶ　ＩＤ　開始設計ＤＩＶ　ＣＳＳ

字大小置中邊框

元件少且是死的靜態的所以我們直接幫每個物件取ＩＤ比較方便

字下ＩＤ　調整大小跟字形

背景圖ＩＤ　下　ＴＯＰ＝０　

牽涉到位置的一定要打開絕對位置

ＰＯＳＩＳＴＩＯＮ＝ａｂｓｏｌｕｔｅ

但為啥不是在ｄｉｖ裡面？

因為有階層性　必須將最主層的容器設定相對位置ｒｅｌａｔｉｖｅ

不然就會去絕對位置ｗｉｎｄｏｗ

胖丁照片大通常實務上會去把她圖片直接修小而不是在裡面調整，避免佔平寬

下ｉｄ條位置下位置屬性縮小照片

皮卡丘下ｉｄ做ｃｓｓ屬性調整

設定寶貝球　這時ｄｉｖ還是靠她裡面物件去撐開

改ｃｓｓ屬性並改變鼠標顯示

雖然ｂｏｌｄ沒罩住物件但物件期時還是在ｄｉｖ裡面

因為設定是相對於ｄｉｖ的位置

．ｐｏｓｉｔｉｏｎ　每個內物件都要加

所以改成用ｊｑ來加

```
  <script>
        $('#main').children().addClass('position');
    </script>
```

不然本來需要ｃｓｓ每個ｉｄ屬性都下

最一開始的場景完成　拿掉ｂｏｌｄ

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #main{
            /*border:1px solid;*/
            width:610px;
            margin:auto;
            position:relative;
        }
        #title{
            font-family:'Bauhaus 93';
            font-size:24pt;

        }
        #bg{
            top:100px;
      
        }

        #ding {
            top: 450px;
            left: 100px;
         
            width:200px;
        }
        #pica {
            top: 450px;
            left: 250px;
            
            width: 300px;
        }

        #ball {
            top: 20px;
            left: 250px;
           
            width: 50px;
            cursor:pointer;
        }
        .position {
            position: absolute;
        }
    </style>
</head>
<body>
<div id="main">
        <h1 id="title">Welcome Pokemon Go Game</h1>
        <img src="animate/ball.gif" id="ball" />
        <img src="animate/ding.gif" id="ding" />
        <img src="animate/pica.gif" id="pica" />
        <img src="animate/pokemonBG.png" id="bg" />
    </div>



    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $('#main').children().addClass('position');

    </script>

</body>
</html>


```

### 安排動作與位置&#xD;

直接改動ｃｓｓ初始位置

皮卡丘一開始在場景ｄｉｖ之外上方

標題也在場景ｄｉｖ之外左邊透明度為零

寶貝球在場景ｄｉｖ之外左下方

胖丁透明度為零

首先利用ｊｑ

將背景／胖丁／寶貝球　ｈｉｄｅ

標題也先屬性ｃｓｓ透明度０

利用ｊｑ

將標題ａｎｉｍａｔｅ從左邊到中間透明度漸漸增加　

將背景ｆａｄｅｉｎ淡入

同時執行不用ｃａｌｌｂａｃｋｆｕｎｔｉｏｎ

在背景進來以後才ｃａｌｌｂａｃｋｆｕｎｔｉｏｎ

寶貝球進場ｓｈｏｗ然後ａｎｉｍａｔｅ左下往右上

ｃａｌｌｂａｃｋｆｕｎｔｉｏｎ胖丁ｆａｄｅｉｎ／ｏｕｔ淡入淡出

皮卡丘動作跟胖丁是一起的不ｃａｌｌｂａｃｋ

ａｎｉｍａｔｅ從上往下進場，ａｎｉｍａｔｅｕ縮小放大，以上

看幾秒進場跟胖丁閃的時間一樣或快或慢

此時發現深度跟設計不同

預設前後完全是開　ｄｉｖ匯入圖片時的順序　後蓋前

所以此時調整ｚ軸　（沒有絕對值只有相對值）

ｃｓｓ屬性　ｚ　ｉｎｄｅｘ

可用ｊｑ更改時序

寶貝球發生ｈｏｖｅｒ時必須變大寫事件委派函式

並用ｔｈｉｓ指定自己

發現球在背景後面

所以必須將ｚ軸改大

背景音樂置入取ｉｄ來用ｊｑ控制

但（ｊｑ裏面沒有ｐｌａｙ）怎麼辦呢？

（ｊｑ裡面的方法都是用ｊｓ寫出來的）

所以最簡單的方式是用原生的ｊｓ擷取元素進行撥放

或是在ｂｏｄｙａｕｄｉｏ就直接指定ａｕｔｏｐｌａｙ而不用程式指定

接下來要讓寶貝球可點擊

並進行場景轉換（有時只是同個頁面　ｄｉｖ互相轉換）

ｊｑ事件委派

點擊寶貝球變大並移動到左下

設定場景二的內容位置隱藏

上述動畫跑完後ｃａｌｌｂａｃｋｆｕｎｔｉｏｎ轉換場景１淡出－２淡入

也可設定秒數來決定要不要ｃａｌｌｂａｃｋｆｕｎｔｉｏｎ

然後ｊｑ換歌轉ａｔｔｒ屬性換ｓｏｎｇ的ｓｒｃ

要先停原本的歌曲

在撥放新歌　

不然會撥一樣的

隱藏ａｕｄｉｏ　的　ｃｓｓ屬性　骯錯配紐　控制選單

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #main{
            /*border:1px solid;*/
            width:610px;
            margin:auto;
            position:relative;
        }
        #main2 h1 {
           
            text-align:center;
            font-size:36pt;
            
        }
        #title{
            font-family:'Bauhaus 93';
            font-size:28pt;
            left:-600px;
            opacity:0;
        }
        #bg{
            top:90px;
      
        }

        #ding {
            top: 450px;
            left: 100px;
         
            width:200px;
        }
        #pica {
            top: -400px;
            left: 250px;
            
            width: 300px;
            z-index:10;
        }

        #ball {
            top: 700px;
            left:-300px;
            width: 50px;
            cursor:pointer;
        }
        .position {
            position: absolute;
        }


    </style>
</head>
<body>
    <audio id="bgmusic">
        <source src="animate/PokemonGo.mp3" type="audio/mpeg" id="song" />
    </audio>
    <div id="main">
        <h1 id="title">Welcome Pokemon Go Game</h1>
        <img src="animate/ball.gif" id="ball" />
        <img src="animate/ding.gif" id="ding" />
        <img src="animate/pica.gif" id="pica" />
        <img src="animate/pokemonBG.png" id="bg" />
    </div>

    <div id="main2">
        <h1>Game Over</h1>
    </div>

    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $('#main').children().addClass('position');
        $('#bg').hide();
        $('#ding').hide();
        $('#ball').hide();
        $('#main2').hide();

        var bgmusic = document.getElementById('bgmusic');
        bgmusic.play();

        $('#title').animate({ 'left': '30px', 'opacity': '1' }, 1000);
        $('#bg').fadeIn(1500, function () {
            $('#ball').show().animate({ 'left': '550px', 'top': '50px' }, 1000, function () {
                $('#ding').fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
                $('#pica').animate({ 'top': '390px' }, 700).animate({ 'width': '40px' }, 500).animate({ 'width': '400px' }, 500).animate({ 'width': '40px' }, 500).animate({ 'width': '400px' }, 500);
            });

        });
        $('#ball').hover(function () {
            $(this).animate({ 'width': '168px' }, 500).css({'z-index':'20'});
        });

        $('#ball').click(function () {
            $(this).animate({ 'top': '700px', 'left': '-300px' }, 500, function () {
                $('#main').fadeOut(1000);
                $('#main2').fadeIn(2000);

                $('#song').attr('src', 'animate/Reflection.mp3');
                bgmusic.pause();
                bgmusic.load();
                bgmusic.play();

            });
        });
    </script>

</body>
</html>

```

![](/files/-LcFzoYfvkfuY92QO5Ah)

如果開場音樂很多首

檔名丟在陣列裡面　ｊｓ三種宣告方式

亂數隨機撥放

多寫一行程式在自動撥放那裡

ｊｓ－ｒａｎｄａｎ只會產生０～１　包含０不包含１的數字

這邊只要產生０或１

只要乘與二無條件捨去ｆｌｏｏｒ

ｃｏｎｓｏｌｅ．ｌｏｇ（ｉ）

做測試

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #main{
            /*border:1px solid;*/
            width:610px;
            margin:auto;
            position:relative;
        }
        #main2 h1 {
           
            text-align:center;
            font-size:36pt;
            
        }
        #title{
            font-family:'Bauhaus 93';
            font-size:28pt;
            left:-600px;
            opacity:0;
        }
        #bg{
            top:90px;
      
        }

        #ding {
            top: 450px;
            left: 100px;
         
            width:200px;
        }
        #pica {
            top: -400px;
            left: 250px;
            
            width: 300px;
            z-index:10;
        }
       #ball {
            top: 700px;
            left:-300px;
            width: 50px;
            cursor:pointer;
        }
        .position {
            position: absolute;
        }


    </style>
</head>
<body>
    <audio id="bgmusic">
        <source type="audio/mpeg" id="song" />
    </audio>
    <div id="main">
        <h1 id="title">Welcome Pokemon Go Game</h1>
        <img src="animate/ball.gif" id="ball" />
        <img src="animate/ding.gif" id="ding" />
        <img src="animate/pica.gif" id="pica" />
        <img src="animate/pokemonBG.png" id="bg" />
    </div>

    <div id="main2">
        <h1>Game Over</h1>
    </div>

    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $('#main').children().addClass('position');
        $('#bg').hide();
        $('#ding').hide();
        $('#ball').hide();
        $('#main2').hide();

        var bgmusic = document.getElementById('bgmusic');

        var music = new Array("PokemonGo.mp3", "PokemonGo2.mp3");
        var i = Math.floor(Math.random() * 2);
        console.log(i);
        $('#song').attr('src', 'animate/' + music[i]);
        bgmusic.load();
        bgmusic.play();

        $('#title').animate({ 'left': '30px', 'opacity': '1' }, 1000);
        $('#bg').fadeIn(1500, function () {
            $('#ball').show().animate({ 'left': '550px', 'top': '50px' }, 1000, function () {
                $('#ding').fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
                $('#pica').animate({ 'top': '390px' }, 700).animate({ 'width': '40px' }, 500).animate({ 'width': '400px' }, 500).animate({ 'width': '40px' }, 500).animate({ 'width': '400px' }, 500);
            });

        });
        $('#ball').hover(function () {
            $(this).animate({ 'width': '168px' }, 500).css({'z-index':'20'});
        });

        $('#ball').click(function () {
            $(this).animate({ 'top': '700px', 'left': '-300px' }, 500, function () {
                $('#main').fadeOut(1000);
                $('#main2').fadeIn(2000);

                $('#song').attr('src', 'animate/Reflection.mp3');
                                bgmusic.pause();
                bgmusic.load();
                bgmusic.play();

            });
        });
    </script>

</body>
</html>


```

第四次專題報告

### 第五組&#xD;

![](/files/-Ld8YYzJmaGuKUA8CcI1)

管理員　學生　老師

動態切換商品保留商品新鮮感

安全性帳號密碼額外表單設置

檢舉處理辨識號碼

功能欄位必須要想通，要對應到功能

能量值＜－＞限制次數

利用身份別屬性確認是　家長或學生

最高管理者功能新增

#### 問題：&#xD;

幾乎都是對功能不熟悉所以對欄位有疑問，或者增加功能

#### 總結：&#xD;

感覺系統功能詳細所以需要什麼資料庫也詳細

### 第一組&#xD;

上次流程圖修改

功能增修

![](/files/-Ld8YYzKQVMNHAjxf2kX)

雞爪圖不用雙線表達完全參與

#### 問題：&#xD;

簽到機制是否有權限問題？

是發起人不是管理員所以不會有問題

#### 總結：&#xD;

同上一組

感覺系統功能詳細所以需要什麼資料庫也詳細

### 第三組&#xD;

修正

![](/files/-Ld8YYzL9OKl_YFlZ7j0)

#### 問題：&#xD;

過敏類型應該是多值屬性？

原來是過敏原

多值介面建議？？

匯款紀錄查詢依據？

沒ＫＥＹ變弱實體

加上編號即可

退貨機制？

一定退

但系統裡面有個退貨紀錄

#### 結論：&#xD;

簡單的進銷存系統所以較不會有邏輯上問題

### 第二組&#xD;

![](/files/-Ld8YYzM91qJnddI9c5G)

#### 問題：&#xD;

退貨為什麼跟其他實體沒關係？

為何要用ＥＭＡＩＬ當帳號？

使用者體驗

比較不容易重複

會員編號是？

流水號

一般會員驗證？

啟用機制

電話為何副值？

應該是多值屬性

或者一手機一室話

管理員為何會檢舉有部分參與度？

應為管理員可以不處理

只有一個管理員？

應該改為全部參與

因為只有一個管理員為何要有編號？

錯了

檢舉館裡元編號？

錯了

運費單值？

付款方式單值？

錯了抱歉

付款方式要開表？

遞移相依就看怎處裡

#### 結論：&#xD;

真的就是知道系統ＫＮＯＷＨＯＷ，

且知道系統設計與分析，

就可以正確，不然就很混亂各講各的。

其實這些表單就是為了讓ＫＥＹ表的方便，再來就是考慮安全性，再來就是考慮正確性，所以才會需要ＥＲＭＯＤＥＬ

實體聯絡

ＥＲ－ＭＯＤＥＬ是青蛙詳細的規格

<https://zh.wikipedia.org/wiki/ER%E6%A8%A1%E5%9E%8B>

ＥＲ－ＤＩＡＧＲＡＭ是表示實體間關係

<https://zh.wikipedia.org/wiki/ER%E6%A8%A1%E5%9E%8B>

### 第四組&#xD;

一定要配對才能加好友

管理員無法修改會員資料

![](/files/-Ld8YYzNpPIgVzt5fY3a)

#### 問題：&#xD;

好友編號／帳號／暱稱？

暱稱可以改

會員好友一對多（好友清單

會員跟好友期時是同一個實體

違規者帳號？

不就是會員帳號

處理狀態有哪些？

有處理跟未處理

違規？

程式寫得出來就自動

為什麼時間要日期跟時間的複合屬性？

期時跟功能無關可以單一欄位

貼文讚數？案過的怎統計

還是可以重複瘋狂點讚

貼文跟寵物如果有關西　中間的關聯？？

沒關係

違規類別？

要獨立一個實體定好

#### 結論：？？？&#xD;

老師結論：

條一下，開始實做，開始做專題

ＥＲＭＤ－＞資料庫－＞模擬資料－＞簡單的功能開始寫，商品上下架。

之後要報告的時間點與內容

下一次４月１９號修改後的ＥＲＭＯＤＥＬ實作的資料庫

欄位　資料型態　長度　合理性

需要出關聯圖

不用簡報值皆ＤＡＭＯＬ

４月２６號ＵＳＥＣＡＳＥ

２個半月後

{% embed url="<https://www.youtube.com/watch?v=-18W84_pBYk>" %}

程式邏輯不等於資料邏輯　不會出現在ＥＲ圖中
