<!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. node的源码安装

    Node.js 安装配置 本章节我们将向大家介绍在 Windows 和 Linux 上安装 Node.js 的方法. 本安装教程以 Node.js v4.4.3 LTS(长期支持版本)版本为例. No ...

  2. GDSOI2017第三轮模拟4.21 总结

    1 第一题看着就觉得猎奇,于是就想着打暴力就跑. 但是很严重的问题就是... \(D\)和\(B\)打反了,都不知道当时在干什么??? 原本可以拿35. 2 第二题看着就觉得套路,于是想着今天就攻这题 ...

  3. NFS客户端挂载目录后无写入权限的解决方案

    转载至:https://blog.csdn.net/younger_china/article/details/52089337 在客户机通过 mount -o rw -t nfs 192.168.1 ...

  4. Codeforces Round #416 (Div. 2) A. Vladik and Courtesy【思维/模拟】

    A. Vladik and Courtesy time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  5. [Vue CLI 3] 插件开发之 registerCommand 到底做了什么

    首先,我们看到在 package.json 中有 scripts 的定义: "scripts": { "serve": "vue-cli-servic ...

  6. 【花般绽放】balibali

    先放项目地址:https://github.com/1067011734/balibali 感谢无私的程序员们分享 我们边看效果边看代码 项目运行出来的效果 先看Home页面 轮播 //src\pag ...

  7. 廖雪峰Python总结5

    1.错误,调试和测试 程序编写造成了bug(必须修复) 用户输入出错(通过检查用户输入) 异常:无法在程序运行过程中预测的.异常是必须被处理的,否则程序会因为各种问题终止并且退出 1.try: try ...

  8. Cannot read property 'appendChild' of null

    1.js报错解决办法 这个一般是你获取的节点不存在引起的. 可能出现这种情况的原因:你获取这节点时,节点还没加载,例如:你的JS写在head里面,取body里面的某一节点,这时候是取不到的.这种情况的 ...

  9. UCloud-201809-001:Redis服务未授权访问漏洞安全预警

    UCloud-201809-001:Redis服务未授权访问漏洞安全预警 尊敬的UCloud用户,您好! 发布时间  2018-09-11更新时间  2018-09-11漏洞等级  HighCVE编号 ...

  10. R语言与非参数统计（核密度估计）

    R语言与非参数统计(核密度估计) 核密度估计是在概率论中用来估计未知的密度函数,属于非参数检验方法之一,由Rosenblatt (1955)和Emanuel Parzen(1962)提出,又名Parz ...