前端基础-终极任务
做项目其实就是一个拆解的过程，最开始的时候可能会觉得好难呀，完全不知道该怎么做，此时需要静下心来，慢慢的进行拆解。
第一次做这个事情很难一些，但最终实现后回过头来再看，就会发现一切都变得简单起来了。经过一次又一次的这个过程，未来再遇到新的项目，即便完全陌生的领域，从一种编程语言的另一种语言，从一个框架到另一个框架，慢慢拆解，体会这个过程，一切都会迎刃而解。到最后会发现，做应用其实就是一个堆积时间的过程，只要慢慢学，没有什么学不会，搞不定的东西。
小试身手
如果做了 html&css 的任务，那么你已经已经画好了计算器 的样子，然后我们可以通过 js 绑定 dom，将用户的点击再回显到计算器上边。
关于计算方法，我这里给大家直接提供一个方法直接调用就好，回头学了数据结构里的栈以后可以再深入理解这个算法，更多解法可以参考 leetcode 227题。
这里文档显示代码有问题，给大家个 百度云链接: 提取码: gmxv ，下载好大家把计算函数复制出来即可。
相应的函数没有考虑括号和和小数，输入一个字符串 1+3*5 就会返回一个最终的结果 16。大家只需要用一个变量来保存用户输入的东西，然后点等号时候调用上边提供的函数，将返回的结果再回显给用户即可。
小试身手 2
如果做了 html&css 的任务，现在已经有了卡片的样式，但如果你没有用 flex 实现这里需要重新用 flex 实现一下，任务是将下边的 json 数据，通过 for 循环生成 dom 对象，在页面中展示出来。
const list = [
{
"title": "数据结构与算法之美",
"subTitle": "为工程师量身打造的数据结构与算法私教课",
"count": 262206,
"priceMarket": 19900,
"price": 13900,
"backAmount": 2000,
"pic": "https://static001.geekbang.org/resource/image/11/5b/11a3a5aa2f5879ec88b284044bacd55b.jpg"
},
{
"title": "MySQL实战45讲",
"subTitle": "从原理到实战，丁奇带你搞懂MySQL",
"count": 196901,
"priceMarket": 19900,
"price": 13900,
"backAmount": 2000,
"pic": "https://static001.geekbang.org/resource/image/59/db/598593a4da4fd7ea898711cc623292db.jpg"
},
{
"title": "左耳听风",
"subTitle": "洞悉技术的本质，享受科技的乐趣",
"count": 159401,
"priceMarket": 39900,
"price": 27900,
"backAmount": 2900,
"pic": "https://static001.geekbang.org/resource/image/21/da/216b472de3f9027371576e107601c2da.jpg"
},
{
"title": "从0开始学架构",
"subTitle": "前阿里P9技术专家的实战架构心法",
"count": 133054,
"priceMarket": 19900,
"price": 13900,
"backAmount": 2000,
"pic": "https://static001.geekbang.org/resource/image/a9/ed/a96b163e2d9bf19cdfc0f5d0d69e13ed.jpg"
},
{
"title": "Java核心技术面试精讲",
"subTitle": "前Oracle首席工程师带你修炼Java内功",
"count": 120074,
"priceMarket": 12900,
"price": 9000,
"backAmount": 1800,
"pic": "https://static001.geekbang.org/resource/image/6f/51/6f1829aeae4e740e949340c663834551.jpg"
},
{
"title": "趣谈网络协议",
"subTitle": "像小说一样的网络协议入门课",
"count": 115355,
"priceMarket": 19900,
"price": 13900,
"backAmount": 2000,
"pic": "https://static001.geekbang.org/resource/image/99/57/99f9772bb4ff0d815bb75f6812d24f57.jpg"
},
{
"title": "设计模式之美",
"subTitle": "前Google工程师手把手教你写高质量代码",
"count": 112949,
"priceMarket": 29900,
"price": 19900,
"backAmount": 2900,
"pic": "https://static001.geekbang.org/resource/image/37/47/37db2297526f625866b66cee9aea0547.jpg"
},
{
"title": "深入剖析Kubernetes",
"subTitle": "Kubernetes原来可以如此简单",
"count": 98127,
"priceMarket": 19900,
"price": 13900,
"backAmount": 2000,
"pic": "https://static001.geekbang.org/resource/image/3d/a3/3d7751a2844e063b00125c017bf360a3.jpg"
},
{
"title": "重学前端",
"subTitle": "每天10分钟，重构你的前端知识体系",
"count": 91887,
"priceMarket": 12900,
"price": 9000,
"backAmount": 1800,
"pic": "https://static001.geekbang.org/resource/image/80/e2/80293b21a2cc9c02ccde5cec6838efe2.jpg"
},
{
"title": "玩转Spring全家桶",
"subTitle": "一站通关Spring、Spring Boot与Spring Cloud",
"count": 84774,
"priceMarket": 19900,
"price": 13900,
"backAmount": 2000,
"pic": "https://static001.geekbang.org/resource/image/b1/bd/b16a3f21e6e615b3403deef8decc7cbd.jpg"
}
]
实现移动端的效果，两边边距是 10px，这样中间卡片宽度就是不确定的了，最终实现下边的效果，就是一个卡片列表
Chrome 右键检查元素，可以点手机形状来开启手机样式的预览：
升级任务
下边以两个项目为例，大致拆解一下，大家的任务就是沿着思路把这两个项目实现。
扫雷
一下实现扫雷我们可能我们可能没什么思路，不妨拆成下边的步骤一步一步实现：
- 如何画一个方块
-
如何在方块上加数字
-
如何在方块上加个雷
-
怎么画出一排方块
-
怎么响应到某一个方块的点击
-
怎么根据点击改变某个方块的状态
上边的问题解决以后就是扫雷核心逻辑的问题了，会涉及到一些递归算法。首先确定哪些方块会生成雷，再根据这些雷反向推导出每个方块周围的雷数，点击的时候判断是否点击到了雷，如果点击到了雷结束游戏，如果是数字就展开，如果不是数字就将周围所有不是数字的都展开。
如果没有思路，可以参考其他人的项目进行拆解，把别人的项目一步一步代码复制出来进行尝试，这也是未来写东西用的最多的方式，常常调侃的 ctrl + c 和 ctrl + v 完成一个项目。
https://github.com/zhangxiaoleiwk/MineSweeper-HTML，这个项目实现的会比较完整，我们可以抽主要逻辑出来即可。
canvas 实现贪吃蛇游戏
1）canvas 是什么
2）casvas 上边怎么画方块
3）canvas 上边方块怎么动起来
4）怎么监听键盘的方向键按下
5）怎么判断方块和另一个方块相交
代码参考，https://github.com/im333/canvas/blob/master/%E8%B4%AA%E5%90%83%E8%9B%87.html ，本地新建 index.html 文件，用浏览器打开即可使用。
五子棋
自己独立查找资料，完成单机的五子棋，有问题可以微信私我。
思考
dom 操作起来比较复杂，可以怎么优化？