<!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>Document</title>

    <style>

        #wrap {

            width: 400px;

            margin: 30px auto;

            font-size: 18px;

            box-shadow: 5px 5px 20px rgb(231, 188, 130);

            border-radius: 8px;

        }

        #header p:first-child{

            float: left;

            margin-left: 20px;

        }

        #header p:last-child{

            float: right;

            margin-right: 20px;

        }

        #main {

            clear: both;

            font-size: 150px;

            text-align: center;

            margin: 120px auto;

        }

        #wrap>p {

            text-indent: 2em;

            line-height: 35px;

            margin: 5px;

        }

        .choose{

            display: flex;

            justify-content: space-around;

        }

        .choose p {

            font-size: 30px;

            cursor: pointer;

        }

        </style>

</head>

<body>

    <div id="wrap">

        <div id="header">

            <p>倒计时：<span id="time">10</span>s</p>

            <p>得分：<span id="mark">0</span>分</p>

        </div>

        <div id="main"></div>

        <p>根据上面字体的颜色从下面选择正确的字，选择正确游戏自动开始.</p>

        <div id="choose" class="choose">

            <p>蓝</p>

            <p>黄</p>

            <p>绿</p>

            <p>粉</p>

            <p>红</p>

        </div>

    </div>

    <script>

    var time = document.getElementById("time");

    var mark = document.getElementById("mark");

    var main = document.getElementById("main");

    var smallFont = document.querySelector('#choose');

    var choose = document.querySelectorAll('#choose p');

    // console.log(choose);

    // 文字的数组

    var fontArr = ["红","橙","黄","绿","蓝"];

    // 文字颜色的数组

    var colorArr = ["red","orange","yellow","green","blue"];

    // 声明分数，时间，倒计时，

    var grade = 0;

    var djs = 10;

    var timer;

    // 设置flag

    var flag = true;

    // 封装函数生成随机数

    function random(a,b){

        return Math.round(Math.random()*(a-b)+b);

    }

    // 随机数组

    function rnArr(){

        var arr = [];

        // 去重

        // 数组长度小于5时

        while(arr.length<5){

            // 生成0-4的随机数作为数组下标

            var n = random(0,4);

            // 生成对应下标的数字在之前数组中不存在，push

            if(arr.indexOf(n)==-1){

                arr.push(n);

            }

        }

        return arr;

    }

    rnArr();

    // 创建页面文字

    function createFont(){

        // 随机文字数组，随机取出一个作为页面大字（随机的索引的value）

        main.innerHTML = fontArr[random(0,4)];

        // 随机颜色数组，取出一个颜色给大字

        main.style.color = colorArr[random(0,4)];

        // 创建小字

        // 随机数组，作为小字和小字颜色

        var smallIndexArr = rnArr(); //小字数组

        var smallColorArr = rnArr(); //小字颜色数组

        // 让小字随机变化

        // 循环遍历小字数组

        for(var j = 0; j < smallIndexArr.length; j++){

            // 小字数组的每一项设为字体颜色

            var fontIndex = smallIndexArr[j];

            // 小字数组内容作为数组元素的下标，找原始数组内容

            // 给页面小字的元素集合赋值

            choose[j].innerText= fontArr[fontIndex];

            var colorIndex = smallColorArr[j];

            choose[j].style.color = colorArr[colorIndex];

        }

    }

    createFont();

    // 给小字循环绑定点击时间

    for(var k = 0; k < choose.length; k++){

        choose[k].onclick = function(){

            // 获取当前大字的颜色

            var bigColor = main.style.color;

            // 获取当前的的文字

            var word = this.innerText;

            // 判断大字颜色下标和小字内容在文字数组里的下标

            if(colorArr.indexOf(bigColor)==fontArr.indexOf(word)){

                grade++;

                mark.innerHTML = grade;

                createFont();

                if(flag){

                    // console.log(djs);

                    timer = setInterval(function(){

                        djs--;

                        time.innerHTML = djs;

                        // console.log(djs);

                        if(djs == -1){

                            // 清楚计时器

                            clearInterval(timer);

                            // 结束弹窗

                            alert('辣鸡' + grade +'分');

                            grade = 0;

                            djs = 10;

                            mark.innerHTML = grade;

                            time.innerText = djs;

                            creatFont();

                            flag = true;

                        }

                    },1000)

                }

                flag = false;

            }

        }

    }

    </script>

</body>

</html>

效果图

游戏逻辑： 随机产生页面文字和颜色，选择正确加分。

文章地址  https://www.cnblogs.com/sandraryan/

原生js实现选字游戏的更多相关文章

  1. 一个简单用原生js实现的小游戏----FlappyBird

    这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...

  2. 原生JS+Canvas实现五子棋游戏

    一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代 ...

  3. JQuery&原生js ——实现剪刀石头布小游戏

    前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...

  4. 原生js做h5小游戏之打砖块

    前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...

  5. 原生js完成打地鼠小游戏

    :这是首页,有简单模式和地狱模式两种模式进行选择 这是选择完模式之后的游戏界面:30秒一局游戏倒计时,每打中一只老鼠加一分,没砸中减一分,没砸不加不减 首先准备几张图片 html代码: <!-- ...

  6. 原生js完成拼图小游戏

    废话不说,看代码,图片可以自己找,我这直接引用了百度的了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...

  7. 原生js 复选框全选案例

    注 : 本文章主要写功能 代码示例 : <body> <input type="checkbox" id="che" /><br& ...

  8. 原生JS实现拼图游戏

    最近无聊,练练原生JS:实现拼图游戏.两种玩法:第一种是单击元素进行交换位置:第二种是拖拽元素进行位置交换.首先需要上传图片并进行回显(需要用到FileReader):下面是部分截图: 可以自行设置切 ...

  9. JS开发打气球游戏

    JS开发打气球游戏 观视频<月薪4万的程序员有多强?半小时原生JS开发打气球游戏,征服现场数万人!> 清晨,日常打开B站,被首页此视频的标题所吸引,虽一看就是标题党,但还是没能抑制住好奇心 ...

随机推荐

  1. Data Visualisation Cheet Sheet

    Univariate plotting with pandas import pandas as pd reviews = pd.read_csv() reviews.head() //bar rev ...

  2. myeclipse设置自动热部署

    MyEclipse中开发网站项目如何设置关联的Tomcat服务器热启动,即修改项目源代码时不需要每次都重启Tomcat 目前在做一个网站项目,使用MyEclipse+Tomcat,每次修改项目源代码时 ...

  3. 【Pyqt5】自定义信号简单原理（易懂版）,多窗口交互，传输数据，调用方法

    PS:如果你想在2窗口调用1窗口的内部方法,或者在2窗口传递数据给1窗口数据,本片博客可以放心食用 主窗口: class MainWindow(QWidget,Ui_MainFrom): insert ...

  4. SQLSERVER 时间函数汇总

    1.求当天的年份 (getdate(): 2012/05/08 18:07:26) SELECT YEAR(GETDATE())     --2012 2. 求当天的月份       SELECT M ...

  5. 网页性能测试之WebPageTest

    想知道您的网站,性能怎么样? 很自然,首先得找一个广被认可的测试工具.我们推荐WebPageTest: WebPageTest 它是google 开源项目”make the web faster “的 ...

  6. Codeforces 442C

    题目链接 C. Artem and Array time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  7. Hdu 4143

    题目链接 好久没有在Hdu水题了,于是乎在无聊之际还是找了一道水题, 但是看完题目之后,明显是个数学题,我还是感觉有点打触的. 因为一直对数学题没有多大信心. 分析了一下,Y^2 = X^2 + n ...

  8. 【JZOJ4803】【NOIP2016提高A组模拟9.28】求导

    题目描述 输入 输出 样例输入 2x^2+3x+1 样例输出 4x+3 数据范围 样例解释 求导的意思: 多项式是由若干个单项式构成的 单项式的一般形式是ax^b,其中ab都是常数,x是自变量 对于单 ...

  9. [Offer收割]编程练习赛104

    题目过于简单,没啥好说的,但是拿了个第一感觉很爽,记录一下 题目1 : 小Hi与魔法 排序,从1开始递增 #include <bits/stdc++.h> using namespace ...

  10. VIM中空格和TAB的替换

    在.vimrc中添加以下代码后,重启vim即可实现按TAB产生4个空格:set ts=4  (注:ts是tabstop的缩写,设TAB宽4个空格)set expandtab 对于已保存的文件,可以使用 ...