<!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. wamp httpd-vhosts.conf

    配置Apache的httpd.conf文件 Include conf/extra/httpd-vhosts.conf 修改apache的vhost文件 <VirtualHost *:> D ...

  2. Codeforces Round #189 (Div. 2) A. Magic Numbers【正难则反/给出一个数字串判断是否只由1,14和144组成】

    A. Magic Numbers time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  3. windows上安装Anaconda和python的教程详解

    一提到数字图像处理编程,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因 ...

  4. POJ3889Fractal Streets

    Fractal Streets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 445   Accepted: 162 Des ...

  5. docker--docker基本命令使用及发布镜像

    docker镜像可以完全看作一台全新的电脑使用,无论什么镜像都是对某一东西进行了配置,然后打包后可以快速移植到需要的地方直接使用 省去复杂的配置工作 比如java web项目部署,如果是新部署,需要装 ...

  6. Directx11教程39 纹理映射(9)

    原文:Directx11教程39 纹理映射(9)     在myTutorialD3D11_32中,我们在PlaneModelClass中增加一个纹理TextureClass* m_Texture;读 ...

  7. 洛谷 P3951 小凯的疑惑 找规律

    目录 题面 题目链接 题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例: 输出样例: 说明 思路 证明 AC代码 include<bits/stdc++.h> 题面 ...

  8. Minimum Depth of Binary Tree最短深度

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  9. MySql5.7 配置文件 my.cnf 设置

    https://blog.csdn.net/gzt19881123/article/details/52594783 # MySql5.7配置文件my.cnf设置 [client] port = 33 ...

  10. python 列表创建