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

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。

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

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

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

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

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

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

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

        
Which face is the animal"s?
        
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         GPU云服務器
                                             
                         云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               如何用vue開發實時音視頻
                                                                                                           如何用php開發游戲
                                                                                                           如何用c語言開發游戲
                                                                                                           如何用云服務器做一個個人網站
                                                         
                 
               
              
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114325.html
               
                      
               

                 
                                  
上一篇：跳出彈窗頁面禁止滾動（PC端和手機端）
  
                                                
                                       
下一篇：前端面試之路一(HTML+CSS面試整理)
                                  
              
              

                
相關文章
                

                             
                                                                    

                                                

                          
前端每日實戰：163# 視頻演示如何用原生 JS 創作一個多選一場景的交互游戲（內含 3 個視頻）
                                                     
摘要：本項目將設計一個多選一的交互場景，用進行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標明當前被選中頭像的。

showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302);
效果預覽
按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/L...
                                                   
                          

                                

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

                                                

                          
前端每日實戰：163# 視頻演示如何用原生 JS 創作一個多選一場景的交互游戲（內含 3 個視頻）
                                                     
摘要：本項目將設計一個多選一的交互場景，用進行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標明當前被選中頭像的。

showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302);
效果預覽
按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/L...
                                                   
                          

                                

                                    antz
                                    2019-08-02 12:09
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                                                       

                                                

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

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

                                

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

                  
                  
發表評論
                   

                                      
                      

                        登陸后可評論
                      
                   
               
              

                

                  
0條評論