C50108
Search…
職訓局里程碑
2019/0412/JQ動畫實做(寶可夢遊戲開場)&第四次專題報告

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

工科 pythen , 其他科系 R
結果人工智慧深度機器學校較夯 蟒蛇比較適用

4g LTE WiMax
技術不重要
殺手集應用 application
任天堂快死掉 - > wii
技術陀螺儀
應用體感
但開創一個新的可能性
有應用後就開始重視content
遊戲就有獨占遊戲
內容會帶動硬體

M-2003-Taiwan
押錯寶 壓到 wimax
3g 384k 影音通話 就不是殺手級應用
但礙於很多東西,如硬體差、頻寬低
ITU決定發展
INTEL推動4G WIMAX
台灣北中南各一家電信公司建置網路環境
南部為大同電信,全島WIMAX
結果只有伺服器端有WIMAX,但客服端沒有這種技術
南韓壓LTE值接押對寶
CARE基地台蜂巢網路HANDOFF換基地台
所以移動時根本沒訊號換手速度
後來就改成暫存資料轉換等等技術輔助
日本先從無線網路開始有線網路爛
Pdc phs
但日本網路更慢,日本多貼圖傳簡訊所以
Gprs很夯 <-> 2.5g <-> 3g
根據各地區的使用習性
5G 無線網路WIFI整合行動通訊網路LTE
WIFI無法換手
WIFI 50M
WIMAX 10KM
VERTICALHANDOFF
垂直換手 異質性網路換手
無縫換手
手機上網走到某個有WIFI的地方時直接切換WIFI
資安可以靠區塊鏈但速度太慢
彼特畢區塊鏈
金融可以但即時遊戲無法
台灣大缺點 代工依賴品牌要有相關設計,技術也要跟上
但鴻海懂得買別人缺啥直接買公司買技術,得靠高層眼光好看得懂趨勢
XXX概念股
公安 人為操作 電腦操作衝突

場景是一層疊一層(圖層概念 還有深度
XYZ
動畫物件順序
場景變化等等
都是寫程式時要考量的

用DIV建置場景並將需要出現的演員(圖片文字等等..)置入
此時不考慮位置會依照HTML預設排列
此時要考慮
上下左右前後與規格(大小...)與特性(可拖動)與場景物件變化順序
設置DIV ID 開始設計DIV CSS
字大小置中邊框
元件少且是死的靜態的所以我們直接幫每個物件取ID比較方便
字下ID 調整大小跟字形
背景圖ID 下 TOP=0 
牽涉到位置的一定要打開絕對位置
POSISTION=absolute
但為啥不是在div裡面?
因為有階層性 必須將最主層的容器設定相對位置relative
不然就會去絕對位置window
胖丁照片大通常實務上會去把她圖片直接修小而不是在裡面調整,避免佔平寬
下id條位置下位置屬性縮小照片
皮卡丘下id做css屬性調整
設定寶貝球 這時div還是靠她裡面物件去撐開
改css屬性並改變鼠標顯示
雖然bold沒罩住物件但物件期時還是在div裡面
因為設定是相對於div的位置
.position 每個內物件都要加
所以改成用jq來加
<script>
$('#main').children().addClass('position');
</script>
不然本來需要css每個id屬性都下
最一開始的場景完成 拿掉bold
<!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>

直接改動css初始位置
皮卡丘一開始在場景div之外上方
標題也在場景div之外左邊透明度為零
寶貝球在場景div之外左下方
胖丁透明度為零
首先利用jq
將背景/胖丁/寶貝球 hide
標題也先屬性css透明度0
利用jq
將標題animate從左邊到中間透明度漸漸增加 
將背景fadein淡入
同時執行不用callbackfuntion
在背景進來以後才callbackfuntion
寶貝球進場show然後animate左下往右上
callbackfuntion胖丁fadein/out淡入淡出
皮卡丘動作跟胖丁是一起的不callback
animate從上往下進場,animateu縮小放大,以上
看幾秒進場跟胖丁閃的時間一樣或快或慢
此時發現深度跟設計不同
預設前後完全是開 div匯入圖片時的順序 後蓋前
所以此時調整z軸 (沒有絕對值只有相對值)
css屬性 z index
可用jq更改時序
寶貝球發生hover時必須變大寫事件委派函式
並用this指定自己
發現球在背景後面
所以必須將z軸改大
背景音樂置入取id來用jq控制
但(jq裏面沒有play)怎麼辦呢?
(jq裡面的方法都是用js寫出來的)
所以最簡單的方式是用原生的js擷取元素進行撥放
或是在bodyaudio就直接指定autoplay而不用程式指定
接下來要讓寶貝球可點擊
並進行場景轉換(有時只是同個頁面 div互相轉換)
jq事件委派
點擊寶貝球變大並移動到左下
設定場景二的內容位置隱藏
上述動畫跑完後callbackfuntion轉換場景1淡出-2淡入
也可設定秒數來決定要不要callbackfuntion
然後jq換歌轉attr屬性換song的src
要先停原本的歌曲
在撥放新歌 
不然會撥一樣的
隱藏audio 的 css屬性 骯錯配紐 控制選單
<!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>
如果開場音樂很多首
檔名丟在陣列裡面 js三種宣告方式
亂數隨機撥放
多寫一行程式在自動撥放那裡
js-randan只會產生0~1 包含0不包含1的數字
這邊只要產生0或1
只要乘與二無條件捨去floor
console.log(i)
做測試
<!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>

管理員 學生 老師
動態切換商品保留商品新鮮感
安全性帳號密碼額外表單設置
檢舉處理辨識號碼
功能欄位必須要想通,要對應到功能
能量值<->限制次數
利用身份別屬性確認是 家長或學生
最高管理者功能新增

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

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

上次流程圖修改
功能增修
雞爪圖不用雙線表達完全參與

簽到機制是否有權限問題?
是發起人不是管理員所以不會有問題

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

修正

過敏類型應該是多值屬性?
原來是過敏原
多值介面建議??
匯款紀錄查詢依據?
沒KEY變弱實體
加上編號即可
退貨機制?
一定退
但系統裡面有個退貨紀錄

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

退貨為什麼跟其他實體沒關係?
為何要用EMAIL當帳號?
使用者體驗
比較不容易重複
會員編號是?
流水號
一般會員驗證?
啟用機制
電話為何副值?
應該是多值屬性
或者一手機一室話
管理員為何會檢舉有部分參與度?
應為管理員可以不處理
只有一個管理員?
應該改為全部參與
因為只有一個管理員為何要有編號?
錯了
檢舉館裡元編號?
錯了
運費單值?
付款方式單值?
錯了抱歉
付款方式要開表?
遞移相依就看怎處裡

真的就是知道系統KNOWHOW,
且知道系統設計與分析,
就可以正確,不然就很混亂各講各的。
其實這些表單就是為了讓KEY表的方便,再來就是考慮安全性,再來就是考慮正確性,所以才會需要ERMODEL

ER-MODEL是青蛙詳細的規格
https://zh.wikipedia.org/wiki/ER%E6%A8%A1%E5%9E%8B
ER-DIAGRAM是表示實體間關係
https://zh.wikipedia.org/wiki/ER%E6%A8%A1%E5%9E%8B

一定要配對才能加好友
管理員無法修改會員資料

好友編號/帳號/暱稱?
暱稱可以改
會員好友一對多(好友清單
會員跟好友期時是同一個實體
違規者帳號?
不就是會員帳號
處理狀態有哪些?
有處理跟未處理
違規?
程式寫得出來就自動
為什麼時間要日期跟時間的複合屬性?
期時跟功能無關可以單一欄位
貼文讚數?案過的怎統計
還是可以重複瘋狂點讚
貼文跟寵物如果有關西 中間的關聯??
沒關係
違規類別?
要獨立一個實體定好

條一下,開始實做,開始做專題
ERMD->資料庫->模擬資料->簡單的功能開始寫,商品上下架。
之後要報告的時間點與內容
下一次4月19號修改後的ERMODEL實作的資料庫
欄位 資料型態 長度 合理性
需要出關聯圖
不用簡報值皆DAMOL
4月26號USECASE
2個半月後
程式邏輯不等於資料邏輯 不會出現在ER圖中
Copy link
On this page
JQ動畫
寶可夢開場動畫
題外話 : 如何判別趨勢
回到正題
首先
安排動作與位置
第四次專題報告
第五組
第一組
第三組
第二組
實體聯絡
第四組
老師結論: