摘要：本項目將設(shè)計一個多選一的交互場景，用進(jìn)行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標(biāo)明當(dāng)前被選中頭像的。

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/LXMzRX

此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

第 1 部分：
https://scrimba.com/p/pEgDAM/cQK3bSp

第 2 部分：
https://scrimba.com/p/pEgDAM/cNJWncR

第 3 部分：
https://scrimba.com/p/pEgDAM/cvgP8td

每日前端實戰(zhàn)系列的全部源代碼請從 github 下載：

https://github.com/comehope/front-end-daily-challenges

多選一的場景是很常見的，瀏覽器自帶的 控件就適用于這樣的場景。本項目將設(shè)計一個多選一的交互場景，用 css 進(jìn)行頁面布局、用 gsap 制作動畫效果、用原生 js 編寫程序邏輯。

這個游戲的邏輯很簡單，在頁面上部展示出一個動物的全身像，請用戶在下面的小圖片中選擇這個動物對應(yīng)的頭像，如果選對了，就可以再玩一次。

整個游戲分成 3 個步驟開發(fā)：靜態(tài)的頁面布局、程序邏輯和動畫效果。

定義 dom 結(jié)構(gòu)，容器中包含標(biāo)題 h1、全身像 .whole-body、當(dāng)選擇正確時的提示語 .bingo、“再玩一次”按鈕 .again、一組選擇按鈕 .selector。.selector 中包含 5 個展示頭像的 .face 和 1 個標(biāo)明當(dāng)前被選中頭像的 .slider。全身像和頭像沒有使用圖片，都用 unicode 字符代替：

        
Which face is the animal"s?
        
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         GPU云服務(wù)器
                                             
                         云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               如何用vue開發(fā)實時音視頻
                                                                                                           如何用php開發(fā)游戲
                                                                                                           如何用c語言開發(fā)游戲
                                                                                                           如何用云服務(wù)器做一個個人網(wǎng)站
                                                         
                 
               
              
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53375.html
               
                      
               

                 
                                  
上一篇：從谷歌的JavaScript編寫風(fēng)格中，13 點(diǎn)值得我們注意的！
  
                                                
                                       
下一篇：前端面試之路一(HTML+CSS面試整理)
                                  
              
              

                
相關(guān)文章
                

                             
                                                                    

                                                

                          
前端每日實戰(zhàn)：163# 視頻演示如何用原生 JS 創(chuàng)作一個多選一場景的交互游戲（內(nèi)含 3 個視頻）
                                                     
摘要：本項目將設(shè)計一個多選一的交互場景，用進(jìn)行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標(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...
                                                   
                          

                                

                                    pakolagij
                                    2019-08-23 13:49
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                                                       

                                                

                          
前端每日實戰(zhàn)：163# 視頻演示如何用原生 JS 創(chuàng)作一個多選一場景的交互游戲（內(nèi)含 3 個視頻）
                                                     
摘要：本項目將設(shè)計一個多選一的交互場景，用進(jìn)行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標(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...
                                                   
                          

                                

                                    The question
                                    2019-08-29 17:26
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
前端每日實戰(zhàn) 2018年10月至2019年6月項目匯總（共 20 個項目）
                                                     
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月至年月發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，

過往項目
2018 年 9 月份項目匯總（共 26 個項目）
2018 年 8 月份項目匯總（共 29 個項目）
2018 年 7 月份項目匯總（...
                                                   
                          

                                

                                    muddyway
                                    2019-08-30 15:44
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
發(fā)表評論
                   

                                      
                      

                        登陸后可評論
                      
                   
               
              

                

                  
0條評論