摘要：本项目将设计一个多选一的交互场景，用进行页面布局用制作动画效果用原生编写程序逻辑。中包含个展示头像的和个标明当前被选中头像的。

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

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?
        
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         服务器托管
                                             
                         混合云
                                                                                                                                                 
                                      
                     
                    
                                                                                               如何用vue开发实时音视频
                                                                                                           如何用php开发游戏
                                                                                                           如何用c语言开发游戏
                                                                                                           如何用云服务器做一个个人网站
                                                         
                 
               
              
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   
转载请注明本文地址：https://www.ucloud.cn/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 
                                
                          
                      
                    
 
                                                                                                                       

                                                

                          
前端每日实战：163# 视频演示如何用原生 JS 创作一个多选一场景的交互游戏（内含 3 个视频）
                                                     
摘要：本项目将设计一个多选一的交互场景，用进行页面布局用制作动画效果用原生编写程序逻辑。中包含个展示头像的和个标明当前被选中头像的。

showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302);
效果预览
按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。
https://codepen.io/comehope/pen/L...
                                                   
                          

                                

                                    sixleaves
                                    2019-08-05 15:38
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
前端每日实战 2018年10月至2019年6月项目汇总（共 20 个项目）
                                                     
摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月至年月发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，

过往项目
2018 年 9 月份项目汇总（共 26 个项目）
2018 年 8 月份项目汇总（共 29 个项目）
2018 年 7 月份项目汇总（...
                                                   
                          

                                

                                    twohappy
                                    2019-08-05 17:41
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
前端每日实战 2018年10月至2019年6月项目汇总（共 20 个项目）
                                                     
摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月至年月发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，

过往项目
2018 年 9 月份项目汇总（共 26 个项目）
2018 年 8 月份项目汇总（共 29 个项目）
2018 年 7 月份项目汇总（...
                                                   
                          

                                

                                    muddyway
                                    2019-08-30 15:44
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
发表评论
                   

                                      
                      

                        登陆后可评论
                      
                   
               
              

                

                  
0条评论