资讯专栏INFORMATION COLUMN

前端每日实战:163# 视频演示如何用原生 JS 创作一个多选一场景的交互游戏(内含 3 个视频)

The question / 3391人阅读

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

效果预览

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

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?

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114325.html

相关文章

  • 前端每日实战163# 视频演示何用原生 JS 创作选一场景交互游戏内含 3 视频

    摘要:本项目将设计一个多选一的交互场景,用进行页面布局用制作动画效果用原生编写程序逻辑。中包含个展示头像的和个标明当前被选中头像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/L...

    pakolagij 评论0 收藏0
  • 前端每日实战163# 视频演示何用原生 JS 创作选一场景交互游戏内含 3 视频

    摘要:本项目将设计一个多选一的交互场景,用进行页面布局用制作动画效果用原生编写程序逻辑。中包含个展示头像的和个标明当前被选中头像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/L...

    antz 评论0 收藏0
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 项目)

    摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月至年月发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读, 过往项目 2018 年 9 月份项目汇总(共 26 个项目) 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(...

    muddyway 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<