HTML+CSS+JS实现【别踩鸡块】，含(源码+思路)

写在前面：

你是否想要掌握人工智能的最新技术和应用？你是否想要成为未来社会的创新者和领导者？你是否想要和全球的优秀导师和同学一起学习和交流？如果你的答案是肯定的，那么欢迎来到床长人工智能教程网站，这里是你实现梦想的起点！

个人名片：

🐼作者简介：一名大一在校生 🐻‍❄️个人主页：小新爱学习. 🐼个人WeChat：hmmwx53 🕊️系列专栏：零基础学java ----- 重识c语言 ---- 计算机网络 🐓每日一句：那些看似不起波澜的日复一日，一定会在某一天让你看见坚持的意义

前言：🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊

最近有许多小伙伴问小新有没有好用的刷题网站，想提升一下自我能力 经过小新缜密的思考与亲身体验，推荐超实用的🎉点击直接访问牛客网🎉 里面用丰富的大厂面试真题、各类算法由易到难层层递进、专项题库应有尽有，还不快来体验体验🎏🎏🎏

别踩鸡块🐓 内容介绍🐓 1.简介：🐓

别踩白块这个游戏相信很多人在网页手机都玩过吧，那时候的我们没有它没有什么特别之处，大多数只是能证明自己单身20年的手速，但今天的它更新换名又换面，是我们一个个ikun粉(这个粉字怎么有点黑)的共同努力,是对鸡哥(啊不对，是对蔡徐坤努力成果的纪念之作)——别踩鸡块

2、知识点🐓

• HTML/CSS
• JavaScript
• PHP
• MySOL
• 元素节点增删
• 属性节点操作
• 采用json建立数据交互

3、项目框架🐓

 puzzle
    |index.html
    |css/index.css
    |js/index.js

4、项目原理🐓

在开始码文之前，让我们先来分析下整个游戏的流程：首先白块和鸡哥以一定的速度下移，点击鸡哥，鸡哥变为母鸡🐤即为img的交互，并鸡叫一声，如果不小心点到白块也有专属bgm嘿嘿嘿，然后游戏结束，如果时间到则游戏结束，跳出分数框并弹出相应“嘲讽语句”。游戏分为三种模式 注意： 而以开发者来说，应将每一个“鸡哥”和白块抽象成一个个的数据结构，鸡哥的消失和出现其实就是数据结构的创造和销毁，如不销毁，积累的数量多的话会极大的占用内存空间

5、实现步骤+思路🐓

页面布局 可以用 div+css 布局来实现别踩鸡块的静态效果展示，直接上 HTML 代码，我来简要说下 HTML 思路，将主界面分解成一个 4x4 的大矩形格子，每一个方块代表其中一个小的矩形格，其中每一行的四个白块中有一个鸡块，每一行中鸡块位于哪一列是随机生成的，但是我们这里现在是静态页面就自己确定了，然后通过 css 控制样式。

添加样式 下面源码是 css 代码，这里有一个要注意的地方，我将 div#con 块级元素向上提了 100 px，这样在游戏的开始就出现了最底一行的空白，隐藏最上面那行，为什么要这样呢，继续往下看就知道了。设置黑白块的样式，为 js 部分动态插入鸡块白块做准备。

让鸡块动起来 在可以通过 js 来创造和销毁 div 后，我们就要让鸡块动起来，这个时候我们就用到了之前 css 提到的设定 < div id=“con”> 隐藏了一行的 < div id=“row”>，我们通过 js 的 DOM 操作使其向下方移动，并设置定时器每 30 毫秒移动一次，这样就实现了鸡块的平滑移动，在鸡块移动的同时，我们要判断鸡块是否已经触底，触底则游戏失败，停止调用 move()，触底后调用函数 fail() 游戏失败，具体方法如下：

点击黑块事件 让鸡块动起来之后呢，我们就来考虑怎么判断用户有没有点击到鸡块呢，同时用户若点击到鸡块，我们要让所在那一行消失，并在内存中删除已消失的行数

其实程序写到这里，几个核心的功能点都已经实现了，是不是感觉很简单呢。剩下来的就是将这些方法组合起来，组成完整的逻辑关系，添加有一个记分器记录用户分数的功能，同时设置加速方法，使鸡块的移动越来越快等等。

源码：🐓 index.js🐓

const MODE_NORMAL = 1, MODE_ENDLESS = 2, MODE_PRACTICE = 3;

(function(w) {
    const DEFAULT_I18N_RESOURCE = 'en';

    function getJsonI18N() {
        let res;
        let lang = navigator.language.substring(0, 2);

        function ajax(name, error) {
            $.ajax({
                url: `./static/i18n/${name}.json`,
                dataType: 'json',
                method: 'GET',
                async: false,
                success: data => res = data,
                error: error
            });
        }

        ajax(lang, () => {
            ajax(DEFAULT_I18N_RESOURCE, () => {});
        })

        return res;
    }

    const I18N = getJsonI18N()

    $('[data-i18n]').each(function() {
        const content = I18N[this.dataset.i18n];
        $(this).text(content);
    });

    $('[data-placeholder-i18n]').each(function() {
        $(this).attr('placeholder', I18N[this.dataset.placeholderI18n]);
    });

    $('html').attr('lang', I18N['lang']);

    let isDesktop = !navigator['userAgent'].match(/(ipad|iphone|ipod|android|windows phone)/i);
    let fontunit = isDesktop ? 20 : ((window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth) / 320) * 10;
    document.write('' +
        'html,body {font-size:' + (fontunit ';
            for (let j = 0; j