原生JS完成石头剪刀布小游戏

• 原生JS完成石头剪刀布小游戏

• 2020-03-18
• 今天花了快两个小时，使用原生JS完成了石头剪刀布小游戏
• 源码在：https://gitee.com/jimmyxuexue/excellent_interface/tree/master/%E7%9F%B3%E5%A4%B4%E5%89%AA%E5%88%80%E5%B8%83
• 效果图：
• 
• 
• 
• 
• 因为使用的是原生JS，没有使用Vue等框架，所以zaiJS代码部分的代码量会比较大，下面是哥哥部分的知识点：

• HTML部分

• 
• 石头剪刀布的图片是通过引入fontasome字体图标库的cdn完成的，然后就是各种界面的布局，其中弹出显示输赢的小对话框是使用定位定在屏幕最中央的
• 因为引入字体图标的类含有空格，所以使用JS动态添加类的时候不会识别空格会出错，所以我直接在页面中写了三种清空的盒子，当个某个条件达成的时候，就让哪个盒子display为flex就行

• CSS部分

• CSS部分的代码都不难，主要使用到的就是弹性盒模型的方式布局，比较简单，当给元素display属性设置为none的时候，元素在页面中就会消失，改成block或者flex的时候就会显现，所以主要是根据这个特点来做的弹出框的效果

• javascript部分

• 使用document.querySelectorAll()查找到的多个dom结点是一个数组，想要给每个dom结点绑定事件可以使用for循环来根据索引来绑定事件
• 
• js控制元素css样式可以使用dom.style.样式名 = ‘样式值’的方式 例如restar.style.display = ‘flex’
• 给dom元素添加类的方法是dom.classList.add()添加样式
• 当dom元素绑定事件的时候事件都会默认传递一个参数e，这个e包含这个dom元素的所有信息，如clientX offsetWidth等等 ，其中我们使用 e.target.id 可以获取点击事件绑定的那个Dom元素的id值。
• 最后JS尽量使用函数来写功能，一方面是函数可以很好的复用，高类聚，低耦合。另外一方面也可以让我们少打很多的代码，让真个页面结构更加的清晰/好看
• 
• 
• 
• 
• 可以看出来，因为没使用框架，所以代码量特别的大~~~ 但是也算是复习了一下自己的JS基础语法的知识了吧~~
• 撒花~~