原生JS面向对象实现打字小游戏

Madge ·

更新时间:2024-11-13

· 476 次阅读

本文实例为大家分享了JS面向对象实现打字小游戏的具体代码，供大家参考，具体内容如下

Demo介绍

通过键盘点击下落小球所显示的数字，小球刷新再任意位置重新掉落。并且，每五个球后掉落速度加快
小球刷新位置大小，颜色随机。用面向对象class方法实现
该demo源码可直接使用。赋值到html文件然后打开就可以使用，可用作学校课设使用

源码


<!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>Document</title>
</head>
<style>
    .title{
        width: 1200px;
        height: 80px;
        margin:400px auto;
        color: darkblue;
        text-shadow: 3px 3px 3px black;
        font-size: 80px;
        font-weight: bolder;
        text-align: center;
        font-family: "楷体";
    }
    .name{
        width: 1000px;
        height: 40px;
        margin:0 auto;
        color: skyblue;
        text-shadow: 3px 3px 3px black;
        font-size: 40px;
        font-weight: bolder;
        text-align: center;
        font-family: "楷体";
    }
</style>
<body>
    <div style="font-size: 40px;">当前分数<div class="score" >0</div></div>
    <div class="title">原生js小Demo：打字练习游戏</div>
    <div class="name">作者：lz</div>
</body>
<script>
    class TypingGame {
        constructor() {
            this.oSpan
            this.speed = 2;
            this.timer = "";
            this.word;
            this.colors = ["red", "orange", "purple", "black", "pink", "blue", "skyblue", "yellowgreen", "brown", "tomato", "indianred", "orchid", "peru", "aqua", "slateblue", "gray", "grey", "crimson","green"]//颜色集合
            this.createWord(this.speed);
            document.onkeydown = e => {
                var e = e || window.event;
                var keycode = e.keyCode || e.which;
                // TypingGame.oSpan=this.$$("span");
                var keyword = String.fromCharCode(keycode).
                    toLowerCase()
                if (this.word === keyword) {
                    // 打掉一个 - 计分
                    // 获取原来的分
                    var score = this.$('.score', false).innerText - 0
                    // 让分数+1
                    score++
                    // 加1以后的分数放进div中
                    document.querySelector('.score').innerText = score
                    if (score === 5) {
                        this.speed += 2//每过五个字母，下落速度加快
                    }
                    this.oSpan.parentElement.removeChild(this.oSpan)
                    this.createWord(this.speed)
                }
            }
        }
        createWord(speed) {
            let wh=this.getRandom(30,80);//随机大小
            this.oSpan = this.creEle('span');
            //    console.log(this.oSpan)
            this.setStyle(this.oSpan, {
                width: wh+"px",
                height: wh+"px",
                position: 'absolute',
                top: 0,
                left: this.getRandom(document.documentElement.clientWidth - 30) + "px",
                borderRadius: "50%",
                lineHeight: '30px',
                textAlign: 'center',
                backgroundColor: this.colors[this.getRandom(18)],
                color: "white",
                fontWeight: "bold",
                textAlign:"center",
                lineHeight:wh+"px"
            })
            document.body.appendChild(this.oSpan)
            // 随机字符：97~122
            var randomNum = this.getRandom(97, 123)
            this.word = String.fromCharCode(randomNum);
            this.oSpan.innerText = this.word
            // 这个标签要慢慢向下运动
            this.elementsMove(this.speed);
        }
        elementsMove() {
            // console.log(this.oSpan)
            // 定时器
            clearInterval(this.timer)
            this.timer = setInterval(() => {
                // 获取高度
                var t = this.oSpan.offsetTop;
                // 加大高度
                t += this.speed;
                console.log(this.speed)
                // 如果这个标签到了浏览器的最低端，GAME OVER
                if (t >= document.documentElement.clientHeight - 30) {
                    clearInterval(this.timer)
                    if (confirm("GAME OVER, 是否重玩?")) {
                        location.reload();//刷新重玩
                    }
                }
                // 加大后设置给标签的top
                this.oSpan.style.top = t + "px"
            }, 50)
        }
        setStyle(ele, styleObj) {
            for (var attr in styleObj) {
                ele.style[attr] = styleObj[attr]
            }
        }
        $(tag, all = false) {
            return all ? document.querySelectorAll(tag) : document.querySelector(tag);
        }
        creEle(tag) {
            return document.createElement(tag)
        }
        getRandom(a, b = 0) {
            var max = Math.max(a, b);
            var min = Math.min(a, b)
            return Math.floor(Math.random() * (max - min)) + min
        }
    }
    new TypingGame;
</script>
</html>

Demo截图