資訊專欄INFORMATION COLUMN
摘要：本項(xiàng)目將設(shè)計(jì)一個(gè)多選一的交互場(chǎng)景，用進(jìn)行頁面布局用制作動(dòng)畫效果用原生編寫程序邏輯。中包含個(gè)展示頭像的和個(gè)標(biāo)明當(dāng)前被選中頭像的。
效果預(yù)覽
按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/LXMzRX
可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。
請(qǐng)用 chrome, safari, edge 打開觀看。
第 1 部分：
https://scrimba.com/p/pEgDAM/cQK3bSp
第 2 部分：
https://scrimba.com/p/pEgDAM/cNJWncR
第 3 部分：
https://scrimba.com/p/pEgDAM/cvgP8td
每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀多選一的場(chǎng)景是很常見的，瀏覽器自帶的 控件就適用于這樣的場(chǎng)景。本項(xiàng)目將設(shè)計(jì)一個(gè)多選一的交互場(chǎng)景，用 css 進(jìn)行頁面布局、用 gsap 制作動(dòng)畫效果、用原生 js 編寫程序邏輯。
這個(gè)游戲的邏輯很簡(jiǎn)單，在頁面上部展示出一個(gè)動(dòng)物的全身像，請(qǐng)用戶在下面的小圖片中選擇這個(gè)動(dòng)物對(duì)應(yīng)的頭像，如果選對(duì)了，就可以再玩一次。
整個(gè)游戲分成 3 個(gè)步驟開發(fā)：靜態(tài)的頁面布局、程序邏輯和動(dòng)畫效果。
一、頁面布局定義 dom 結(jié)構(gòu)，容器中包含標(biāo)題 h1、全身像 .whole-body、當(dāng)選擇正確時(shí)的提示語 .bingo、“再玩一次”按鈕 .again、一組選擇按鈕 .selector。.selector 中包含 5 個(gè)展示頭像的 .face 和 1 個(gè)標(biāo)明當(dāng)前被選中頭像的 .slider。全身像和頭像沒有使用圖片，都用 unicode 字符代替：
Which face is the animal"s?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99607.html
相關(guān)文章
前端每日實(shí)戰(zhàn)：163# 視頻演示如何用原生 JS 創(chuàng)作一個(gè)多選一場(chǎng)景的交互游戲（內(nèi)含 3 個(gè)視頻）
摘要：本項(xiàng)目將設(shè)計(jì)一個(gè)多選一的交互場(chǎng)景，用進(jìn)行頁面布局用制作動(dòng)畫效果用原生編寫程序邏輯。中包含個(gè)展示頭像的和個(gè)標(biāo)明當(dāng)前被選中頭像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehope/pen/L...
前端每日實(shí)戰(zhàn)：163# 視頻演示如何用原生 JS 創(chuàng)作一個(gè)多選一場(chǎng)景的交互游戲（內(nèi)含 3 個(gè)視頻）
摘要：本項(xiàng)目將設(shè)計(jì)一個(gè)多選一的交互場(chǎng)景，用進(jìn)行頁面布局用制作動(dòng)畫效果用原生編寫程序邏輯。中包含個(gè)展示頭像的和個(gè)標(biāo)明當(dāng)前被選中頭像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehope/pen/L...
前端每日實(shí)戰(zhàn) 2018年10月至2019年6月項(xiàng)目匯總（共 20 個(gè)項(xiàng)目）
摘要：過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月至年月發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀， 過往項(xiàng)目 2018 年 9 月份項(xiàng)目匯總（共 26 個(gè)項(xiàng)目） 2018 年 8 月份項(xiàng)目匯總（共 29 個(gè)項(xiàng)目） 2018 年 7 月份項(xiàng)目匯總（...
發(fā)表評(píng)論
0條評(píng)論
閱讀 3138·2021-09-22 15:50
閱讀 3339·2021-09-10 10:51
閱讀 3153·2019-08-29 17:10
閱讀 2928·2019-08-26 12:14
閱讀 1845·2019-08-26 12:00
閱讀 960·2019-08-26 11:44
閱讀 659·2019-08-26 11:44
閱讀 2829·2019-08-26 11:41
