原生JS实现游戏--棍子英雄（简单版）

游戏思路

1、当棍子的长度落在右边块的左侧到右侧之间，角色向前进，游戏继续；

2、当棍子的长度没有到达右边块的左侧，让角色向前走，走到棍子的末端的时候角色掉下，游戏结束；

3、棍子的长度超出右边块，让角色往前走，超过范围，角色掉下，游戏结束；

游戏玩法

1、当鼠标按下时棍子（stick）棍子伸长，松开鼠标时，棍子停止伸长倒下，人物移动到棍子倒下位置

页面布局

js代码实现过程

当鼠标按下时，开启定时器，改变棍子（stick）的宽度（width）,设置棍子棍子（stick）transition属性，让改变时候有过渡效果。
当鼠标松开时，棍子（stick）倒下，即棍子（stick）的transition过渡效果结束时，改变人物（hero）的位置
在棍子（stick）倒下同时，判断棍子的长度是否在第二根柱子（middlediv）的范围内，即判断棍子（stick）的宽度应在棍子（stick）到middlediv左边框距离以及棍子（stick）到middlediv右边框的距离。
若大于或小于，游戏失败
当人物（hero）运动完毕时,游戏背景（gameContent）往前移动。
当游戏背景（gameContent）往前移动结束时，让背景图瞬间回到原位，并改变middlediv的宽已以及位置
上面是实现游戏的基本过程，下面是实现中用到的方法

第一次写博客，文笔不是很好，所以充斥大量图片，各位将就看。若有说的不对，欢迎指出谈论，谢谢大家。