原生JS实现简易打字游戏

Posted 听雪拨弦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生JS实现简易打字游戏相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字小游戏2.0</title>
    <style>
        /* 基础样式 */
        .score {
            margin-top: 50px;
            margin-left: 80px;
            width: 80px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 28px;
            font-weight: bold;
            border: 1px solid black;
            box-sizing: border-box;
        }

        button {
            margin-top: 10px;
            margin-left: 80px;
            width: 80px;
            height: 40px;
        }
    </style>
</head>

<body>
    <!-- 存放分数 -->
    <div class="score">0</div>
    <!-- 开始按钮 -->
    <button>开始</button>
    <!-- 存放字母的盒子 -->
    <div class="box"></div>
    <script>
        class Word {
            constructor() {
                //设置下落距离,下落速度,字母生成速度的初始值
                this.speed = 1;
                this.timeout = 50;
                this.timeout2 = 1000;
                // 设置循环下落状态的初始值 false
                this.flag = false;
                // 调用生成字母的函数
                this.btn = document.querySelector('button');
                // 给按钮添加点击事件
                this.btn.onclick = () => {
                    // 设置循环下落状态为true
                    this.flag = true;
                    this.create(this.speed);
                    // 设置按钮不可用
                    this.btn.disabled = true;
                }
                // 新建数组 用来存放字母标签
                this.arr = [];
                // 设置键盘按下事件
                document.onkeydown = (eve) => {
                    let e = eve || window.event;
                    let keycode = e.keyCode || e.which;
                    //将按下的keyCode值转换成字母
                    let keyword = String.fromCharCode(keycode);
                    //遍历数组 判断keyword是否与数组内某个元素内容相等
                    for (var i = 0; i < this.arr.length; i++) {
                        if (this.arr[i].innerHTML == keyword) {
                            // 打掉一个 - 计分
                            // 获取原来的分
                            let score = document.querySelector('.score').innerText - 0; // -0 为了把字符串改成数字类型
                            // 让分数+1
                            score++;
                            // 加1以后的分数放进div中
                            document.querySelector('.score').innerText = score;
                            // 分数越高 速度越快
                            if (score % 10 == 0) {
                                if (this.timeout2 <= 400) {
                                    this.timeout2 = 300;
                                    if (this.timeout == 1) {
                                        this.timeout = 1;
                                        if (score % 10 == 0) {
                                            this.speed += 1;
                                        }
                                    } else this.timeout -= 7;
                                } else this.timeout2 -= 200;
                            }
                            //从页面中删除这个元素
                            this.arr[i].remove();
                            //从数组内也删除这个元素
                            this.arr.splice(i, 1);
                            break;  //终止循环
                        }
                    }
                }
            }
            create(speed) {
                //新建span标签
                let span = document.createElement('span');
                //将标签添加到数组内
                this.arr.push(span);
                //给新创建的span标签添加样式
                this.setStyle(span, {
                    width: '50px',
                    height: '50px',
                    position: 'absolute',
                    top: '0',
                    left: this.getRandom(500, document.documentElement.clientWidth - 499) + 'px',
                    borderRadius: "50%",
                    lineHeight: '50px',
                    textAlign: 'center',
                    backgroundColor: this.getColor(),
                    color: "#fff",
                    fontWeight: "bold",
                    fontSize: "28px"
                })
                //获取box节点
                let box = document.querySelector('.box');
                //将标签节点追加到box里
                box.appendChild(span);
                //获取65~90的随机数 对应着A-Z的keyCode值
                let randNum = this.getRandom(65, 91);
                //将keyCode值转成字母
                let word = String.fromCharCode(randNum);
                //给新建的span标签添加字母
                span.innerText = word;
                //设置定时器 控制字母下落
                let times = setInterval(() => {
                    //获取span距离顶部的距离
                    let t = span.offsetTop;
                    //加上每次运动的距离
                    t += speed;
                    //判断下落到底部时 游戏结束
                    if (t >= document.documentElement.clientHeight - 50) {
                        //清空定时器&延时器
                        clearInterval(times);
                        clearTimeout(this.t2);
                        //输出游戏结束
                        alert('GAME OVER');
                        //清空页面&数组
                        this.arr = [];
                        box.innerHTML = '';
                        //恢复按钮可用状态
                        this.btn.disabled = false;
                        //清空计分板
                        document.querySelector('.score').innerText = 0;
                        //恢复初始每次下落的距离
                        this.speed = 1;
                        //恢复初始下落速度
                        this.timeout = 50;
                        //恢复初始字母生成速度
                        this.timeout2 = 1000;
                        //设置循环下落状态为false
                        this.flag = false;
                    }
                    //把运动后的距离值设置给span
                    span.style.top = t + "px"
                }, this.timeout);
                //循环下落状态为true时 循环生成字母
                if (this.flag) {
                    clearTimeout(this.t2); //清除延时器 防止叠加
                    this.t2 = setTimeout(() => {
                        this.create(this.speed);
                    }, this.timeout2);
                }
            }
            //构造设置样式的函数
            setStyle(tag, styleObj) {
                for (var attr in styleObj) {
                    tag.style[attr] = styleObj[attr];
                }
            }
            // 封装获取随机数的函数
            getRandom(a, b = 0) {
                var max = Math.max(a, b);
                var min = Math.min(a, b);
                return Math.floor(Math.random() * (max - min)) + min;
            }
            //封装获取随机颜色的函数
            getColor(hex = true) {
                if (hex) {
                    var color = '#';
                    for (var i = 0; i < 3; i++) {
                        var rgb = this.getRandom(256).toString(16);
                        rgb = rgb.length === 1 ? '0' + rgb : rgb;
                        color += rgb
                    }
                    return color;
                }
                return `rgb(${this.getRandom(256)},${this.getRandom(256)},${this.getRandom(256)})`
            }
        }
        new Word;
    </script>
</body>

</html>

 

以上是关于原生JS实现简易打字游戏的主要内容,如果未能解决你的问题,请参考以下文章

原生JS实现简易打字游戏

原生JS实现简易打字游戏

纯原生JS用面向对象class方法实现简易扫雷小游戏

原生JS实现简易扫雷游戏

原生JS实现简易扫雷游戏

原生JS实现简易扫雷游戏