<!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. Django项目：CRM(客户关系管理系统)--08--03PerfectCRM创建基本数据03

    如果感觉本章博客对您有帮助,请尽情打赏吧!

  2. sublime3安装javascript控制台环境 方法1

    Sublime Text 3    http://www.sublimetext.com/3 node.js        http://nodejs.cn/download 1.安装完成后. 2.打 ...

  3. 从0开始学习 GitHub 系列之「06.团队合作利器 Branch」

    Git 相比于 SVN 最强大的一个地方就在于「分支」,Git 的分支操作简直不要太方便,而实际项目开发中团队合作最依赖的莫过于分支了,关于分支前面的系列也提到过,但是本篇会详细讲述什么是分支.分支的 ...

  4. arcgis信息窗口

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 【eclipse】解决：eclipse或STS运行maven工程出现Missing artifact jdk.tools:jdk.tools:jar:1.7问题

    eclipse或STS运行maven工程出现Missing artifact jdk.tools:jdk.tools:jar:1.7问题 最近项目中使用到大数据平台,代码中应用了hbase-clien ...

  6. WPF MVVM简单介绍

     前面文章中,我们已经知道,WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的,WPF提供了数据绑定机制,当数据发生变化时,WPF会自动发出通知去更新UI. 我们不管 ...

  7. [Vue CLI 3] 配置解析之 indexPath

    在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...

  8. Leetcode868.Binary Gap二进制间距

    给定一个正整数 N,找到并返回 N 的二进制表示中两个连续的 1 之间的最长距离. 如果没有两个连续的 1,返回 0 . 示例 1: 输入:22 输出:2 解释: 22 的二进制是 0b10110 . ...

  9. 为什么你应该使用OpenGL而不是DirectX?

    这是一篇很意思的博文,原文链接为:http://blog.wolfire.com/2010/01/Why-you-should-use-OpenGL-and-not-DirectX 大家可以思考一下: ...

  10. php实现图片以base64显示的方法达到效果

    目前Data URI scheme支持的类型有: data:text/plain,文本数据data:text/html,HTML代码data:text/html;base64,base64编码的HTM ...