h5游戏开发：用html+css+js写一个整蛊游戏

还记得那个一拳打穿显示器的胖子吗？

我来做一个简单的整蛊游戏吧！

演示效果（这个小熊图片请自行替换为恐怖图片，因为网络规定，我就放了个小熊上去，以前其实是很恐怖的一张鬼图）：

既然是整蛊游戏，我们名字就不要起得太明显，根据潘多拉魔盒效应，为了诱导玩家进入我们的陷阱，就取名为：

千万别走到终点！！！

玩法设定：
有玩家看到这个标题可能第一反应是什么恐怖游戏，或者有奇怪的东西在终点等着他，为了消除这种顾虑，我们将游戏设定改一下，设计为通过摇骰子的方式决定玩家走的步数，而不是玩家自己走。这样我们就拥有进一步控制玩家走向的决定权。

第一步，先设计骰子

这一步，很简单，为了速度开发这款游戏，我们写成文字吧！(不是想忽悠你们，主要是时间有限，重点我放在后面一步)

第二步，设计行走的格子

我们用li来做吧，做个横排的表格，简单一点.(不是想忽悠你们，主要是时间有限，重点我放在后面一步)
听说骰子有6面，我们设计6步。

就这样，写出6个格子，刚好可以走6步
咋看起来还有点简陋(是真的简陋)，不慌，黑色制造的神秘将革除白色的虚空，我们将body设置为黑色，然后字体变白

第三步，加入主角头像

布局已经就位了，我们还差个主角
我随便从网上找了一张照片，作为主角，当然，要可爱萌萌哒，制造毫无压力的气氛(虽然背景就很压抑，但是黑色环境可以让人将注意力集中在与黑色形成反差的颜色上🤪)

再加入我们的恐怖图片，实际是个小熊，因为网络监管原因不让放恐怖血腥，就用小熊代替恐怖图片

然后加入声音控件，顺便在加个大块,id为all，后面有用

对了，记得将audio控件隐藏起来，不让人看（bird.wav是恐怖的鸟声）

        <audio controls style="display: none">
            <source src="bird.wav" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        </audio>

第四步，开始写游戏js控制代码

然后开始写逻辑，第一步，写掷骰子的逻辑。
使用随机数方法Math.random()，
然后去除小数，取整数Math.floor(Math.random()*10)，
然后随机数所指向的那个li就是目标li，也就是狗头像将要去到的位置，赋值给一个叫做aim的变量，开始写代码：

        var h4 = document.getElementsByTagName('h4')[0];
        var li = document.getElementsByTagName('li');
        var aim = 0;
        //掷骰子
        h4.onclick = function () {
   
            num = Math.floor(Math.random() * 10);
			//改变p标签显示的内容，好提示玩家将移动几步？
            document.getElementsByTagName('p')[0].innerHTML = '你随机选中的数字是：' + num + '<br>😀狗头像将移动' + num + '步';
            //如果num大于5，就等于5，这样我们有50%的概率(随机数字5,6,7,8,9,10)让玩家直接走出格触发我们的恐怖图片
            if (num >= 5) {
   
                num = 5;
                aim = li[num].offsetLeft;
                //设定一个交kok得函数，用于执行狗头像闪烁效果
                kok();
            } else {
   
                aim = li[num].offsetLeft; //随机数序号的li格子的左边距等于头像最终移动距离
                   //设定一个交kok得函数，用于执行狗头像闪烁效果