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

标签： Javascript

还记得那个一拳打穿显示器的胖子吗？
在这里插入图片描述

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

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

千万别走到终点！！！

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

第一步，先设计骰子

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

第二部，设计行走的格子

我们用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得函数，用于执行狗头像闪烁效果
                kok();
            }
        }

接下来开始写狗头像闪烁以及移动到li后会出现什么效果的代码，也就是游戏的关键所在kok()函数，代码如下:

        function kok() {
            //设置图片消失然后出现在下一个格子的效果，一闪一闪.........500ms一次
            setInterval(function () {
                if (img[0].style.opacity == "1") {
                    img[0].style.opacity = "0";
                } else {
                    img[0].style.opacity = "1";
                }
                //如果狗头像的左边距离小于最终目标移动距离
                if (img[0].offsetLeft < aim) {
                    //就每次加10px的移动距离向前移动
                    img[0].style.marginLeft = img[0].offsetLeft + 10 + 'px';
                } else {
                    //最终目标距离赋值给狗头像的左边距
                    img[0].style.marginLeft = aim - 8 + 'px';
                    if (num == 5) {
                       //id为all的大块消失，恐怖图片出现，吓人音乐响起
						document.getElementById('all').style.display = "none";
                        img[1].style.display = "block";
                        document.getElementsByTagName('audio')[0].play();
                    }
                }
            }, 500);

最终合成代码以及运行效果：
所有代码>>>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>千万别走到终点！！！</title>
    <style>
        body {
            background-color: black;
            color: white;
        }
		
		h4{
            cursor: pointer;
        }
        h4:hover{
            color: red;
        }

        .feets {
            width: 600px;
            list-style: none;
        }

        .feets li {
            display: inline-block;
            font-size: 0px;
            width: 80px;
            height: 80px;
            /* margin-left: 1px; */
            background: linear-gradient(to right, #ccc, #487);
        }

        img {
            /* display: none; */
            position: absolute;
            width: 80px;
            height: 80px;
            margin-top: -100px;
            margin-left: 40px;
        }

        .scareImg {
            display: none;
            position: fixed;
            margin: auto;
            width: 1600px;
            height: 100%;
            z-index: 500;
        }
    </style>
</head>

<body>
    <div id="all">
        <h4>请掷骰子</h4>
        <p>你随机选中的数字是：？</p>
        <ul class="feets">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <img src="./一个头像.jpg" alt="">
        <audio controls style="display: none">
            <source src="bird.wav" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        </audio>
    </div>
    <img class="scareImg" src="./一个恐怖图片.jpg" alt="">
    <script>
        var h4 = document.getElementsByTagName('h4')[0];
        var img = document.getElementsByTagName('img');
        var li = document.getElementsByTagName('li');
        var aim = 0;
        //掷骰子
        h4.onclick = function () {
            num = Math.floor(Math.random() * 10);
            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得函数，用于执行狗头像闪烁效果
                kok();
            }
        }

        function kok() {
            //设置图片消失然后出现在下一个格子的效果，一闪一闪.........500ms一次
            setInterval(function () {
                if (img[0].style.opacity == "1") {
                    img[0].style.opacity = "0";
                } else {
                    img[0].style.opacity = "1";
                }
                //如果狗头像的左边距离小于最终目标移动距离
                if (img[0].offsetLeft < aim) {
                    //就每次加10px的移动距离向前移动
                    img[0].style.marginLeft = img[0].offsetLeft + 10 + 'px';
                } else {
                    //最终目标距离赋值给狗头像的左边距
                    img[0].style.marginLeft = aim - 8 + 'px';
                    if (num == 5) {
                        document.getElementById('all').style.display = "none";
                        img[1].style.display = "block";
                        document.getElementsByTagName('audio')[0].play();
                    }
                }
            }, 500);
        }
    </script>
</body>

</html>

运行效果——移动中：
在这里插入图片描述
运行效果——触发恐怖图形后：

然后就完成了，
对了，还有文件名要改下：

因为国内网络相关制度规定，不传播恐怖血腥，我就没放那种图片，你们可以去百度后自己替换这个恐怖小熊，音乐还可以替换得再惊悚一点，你懂的

对了，我有搞忘了，点击h4标签开始游戏>>>

本文链接：https://blog.csdn.net/qq_41136216/article/details/105487980

智能推荐

用golang写一个简单的游戏

事情是这样子的，前阵子我想重新把算法学习一下，在看到动态规划的时候，莫名想到这些算法题目就跟游戏一样，每个游戏都有规则，要过关，就要在游戏规则下达到特定的目标。所以，我萌生了把算法题做成一个游戏的想法，不管什么算法都行，规则我可以自己定义。那么，做个游戏，它总要有界面，自然我不会写gui，暂时也没有想用golang的gui库的想法。所以我的第一步是用终端先实现一个，在界面上能够显示出东西。这个要...

用C++写的一个‘23’游戏

“23”游戏是一个双人游戏，道具是23根牙签，玩家轮流取1，2或3根牙签。拿到最后一根牙签的是输家。写程序和计算机玩“23”。总是玩家先走，轮到计算机时，它根据以下规则采取行动： a.如果剩余牙签多于4根，计算机就取走4-x根，x为玩家上次取走的牙签数 b.如果剩余2-4根牙签，计算机取走足够多的牙签，确保只剩下1根 c.如果剩余1根牙签，计算机...

用Rust写一个斗兽棋游戏

原文地址：用Rust写一个斗兽棋游戏项目地址： Github: https://github.com/netcan/AnimalChess Crate.io: https://crates.io/crates/animal_chess lib.rs: https://lib.rs/crates/animal_chess 好久没更新blog了，主要技术文章都是在公司内...

用Java写一个简易猜数游戏

用Java写一个简易猜数游戏游戏规则：猜数字的游戏，由系统随机生成一个不同的四个数(0—9)，例如（1234），然后由用户输入四个不同的数字，如果输入的数字与系统生成的数字相同并且位置相同用 A 表示，如果数字相同位置不同用B表示，例如输入（1245）结果显示： 2A1B 给用户10次输入的机会。代码如下：本章要点：流程语句，数组排序，及数组去重...

如何用vue搭建项目

整理一下今天学的用vue搭建项目一、安装最新版本的vue脚手架 vue-cli官网：https://cli.vuejs.org/zh/ 注意：如果不是最新版本，要先卸载旧的版本，然后再下载最新的版本。二、使用vue脚手架创建项目首先要写入的文件夹，打开创建项目手动搭建项目手动选择要搭建的环境是否使用mode模式的路由，选择yes; sass选择node-sass 是否保存？肯定要选择...