js简易打字游戏

最新推荐文章于 2024-04-26 16:47:03 发布

Eureka464

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量836

点赞数

文章标签： javascript 游戏 css

本文链接：https://blog.csdn.net/weixin_70227543/article/details/124892612

版权

思路

1.创建大的背景来接收掉落的字母

2.创建开始按钮，分数统计

3.设置点击开始事件，创建小div放着随机字母，获取键盘码，字母与键盘码转字符相等就删除div，分数+1

4.小div的样式可以随机颜色

5.设置小div的随机掉落范围，到大背景最底部，游戏结束

<!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>
    button {
        margin: 0 10px 5px 120px;
        background-color: cornflowerblue;
        color: antiquewhite;
        height: 25px;
        line-height: 20px;
        text-align: center;

    }

    b {
        margin-left: 10px;
        font-weight: 400;
    }
</style>

<body>
    <button>开始游戏</button>

    <b> 分数：</b><span>0</span>
    <script>
        function PlayGame() {
            // 创建游戏背景盒子
            this.playbg = document.createElement('div')
            document.body.appendChild(this.playbg)
            // 修饰样式
            this.setStyle(this.playbg, {
                width: '1000px',
                height: '550px',
                border: '3px solid lightBlue',
                //自己找图片，插入地址
                backgroundImage: 'url(./image/9d3c3ff5816d97daa699e1d6524b7f1a.jpeg)',
                margin: '0 120px',
                position: 'relative'
            })
            // 将创建的小div放在数组中
            this.brr = []
            // 将小div的定时器放在数组中
            this.arr = []
            // 获取开始标签
            this.start = document.querySelector('button')
            this.span = document.querySelector('span')
            this.bindEven()
            this.click()
            this.time = 1000


        }
        // 绑定事件
        PlayGame.prototype.bindEven = function () {
            this.start.onclick = () => {
                // 创建随机的小div
                this.timer = setInterval(() => {
                    let div = document.createElement('div')
                    this.playbg.appendChild(div)
                    this.brr.push(div)
                    var code = this.getRandom(97, 123)
                    var word = String.fromCharCode(code)
                    div.innerText = word
                    this.setStyle(div, {
                        width: '50px',
                        height: '50px',
                        borderRadius: '50%',
                        color: '#ddd',
                        fontSize: '30px',
                        backgroundColor: this.getColor(),
                        position: 'absolute',
                        lineHeight: ' 50px',
                        textAlign: 'center',
                        left: this.getRandom(50, this.playbg.clientWidth) - 50 + 'px',
                        top: 0

                    })
                    // 设置定时器div随机位置掉落
                    // 初始高度
                    var t = 0
                    var smalltimer = setInterval(() => {
                        t += 2
                        if (t > this.playbg.clientHeight - div.clientHeight) {
                            alert('GAME OVER')
                            // 将所有定时器放在一个数组中
                            for (let a = 0; a < this.arr.length; a++) {
                                clearInterval(this.timer)
                                clearTimeout(this.arr[a])
                            }

                        }
                        div.style.top = t + 'px'
                    }, 20)

                    this.arr.push(smalltimer)

                }, this.time)


            }
        }

        // 获取div的字母，通过键盘码删除相对应的div
        PlayGame.prototype.click = function () {
            var index = 0
            window.onkeyup = () => {
                // 获取键盘码
                var keycode = event.keyCode || event.which
                // 转为小写
                var key = String.fromCharCode(keycode).toLocaleLowerCase()
                for (let a = 0; a < this.brr.length; a++) {
                    if (this.brr[a].innerText === key) {
                        // 在大盒子中删除div
                        this.playbg.removeChild(this.brr[a])
                        // 将div从数组中删除
                        this.brr.splice(a, 1)
                        //   删除定时器
                        clearInterval(this.arr[a])
                        this.arr.splice(a, 1)
                        this.span.innerText = this.span.innerText * 1 + 1
                        if (this.span.innerText == 11) {
                            alert('恭喜进入第二关')
                            this.time /= 2
                            this.bindEven()
                        }
                        break
                    }
                }



            }
        }

        //获取随机颜色
        PlayGame.prototype.getColor = function () {
            var color = '#'
            for (var a = 0; a < 3; a++) {
                var num = this.getRandom(256)
                var bu = num.toString(16)
                // 当随机数为各位时，在前面补0
                bu = bu.length === 1 ? '0' + bu : bu
                color += bu
            }
            return color
        }
        //随机数的函数
        PlayGame.prototype.getRandom = function (a, b = 0) {
            return Math.floor(Math.random() * Math.abs(a - b)) + Math.min(a, b)
        }

        // 样式
        PlayGame.prototype.setStyle = function (ele, obj) {
            for (var key in obj) {
                ele.style[key] = obj[key]
            }
        }
        var p = new PlayGame()
    </script>
</body>

</html>

Eureka464

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js简易打字游戏

思路1.创建大的背景来接收掉落的字母2.创建开始按钮，分数统计3.设置点击开始事件，创建小div放着随机字母，获取键盘码，字母与键盘码转字符相等就删除div，分数+14.小div的样式可以随机颜色5.设置小div的随机掉落范围，到大背景最底部，游戏结束<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="
复制链接

扫一扫