jquery动画--字母消除游戏_jquery 游戏-优快云博客

本文链接：https://blog.youkuaiyun.com/lu__lala/article/details/121021549

本文介绍了如何利用jQuery创建一个字母消除游戏。玩家点击开始后，网页会随机生成带颜色的字母，通过键盘输入匹配字母，对应字母下落消失，成功消除后得分增加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现点击开始游戏后网页随机生成带有背景颜色的字母

2.按下键盘上的字母，网页中与之匹配的字母下落消失

3.字母成功消失后分数累加

如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>字母消除游戏</title>
    <script src="js/jquery.js"></script>
    <style>
        body {
            width: 100%;
            padding: 0;
            margin: 0
        }

        /* 存放随机生成的字母的span的类样式 */
        .letter {
            position: absolute;
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 5px;
        }

        #start {
            width: 100px;
            text-align: center;
            background-color: #0070b5;
            color: #ffffff;
            padding: 15px 15px;
            margin: 0 auto
        }

        #start:hover {
            cursor: pointer
        }

        #score {
            font-size: 46px;
            text-align: right;
            top: 30px;
            right: 50px;
            display: none
        }
    </style>
</head>
<body>
    <div id="score">0</div>
    <div id="start">开始游戏</div>
    <script>
        $(function () {

            var score = 0;// 分数

            $("#start").click(function () {
                $("#score").show();//显示分数
                $(this).fadeOut("slow");//按钮隐藏
                getLetter();//调用随机生成的字母
            })

            //生成一个随机的字母在A-Z之间
            function getLetter() {
                var color = randomcolor();
                
                
                //A-Z 对应编码 65-90
                var code=Math.floor(Math.random()*26)+65;
                var ch=String.fromCharCode(code)
                
                var swith = screen.width - 300;
                var sheight = screen.height - 300;
                //随机出现的位置
                var top = Math.floor(Math.random() * sheight);
                var left = Math.floor(Math.random() * swith);
                
                
                //拼接好元素向页面追加
                $("body").append('<span class="letter letter'+code+
                    '"style="left: '+left+'px;top:'+top+
                    'px;background-color: #'+color+'">'+ch+'</span>');
                setTimeout(getLetter,1000)
                //每隔一秒生成一个字母
                
                
            }
            //随机一个背景颜色
            function randomcolor() {
                var color = '';
                var arr = ['a', 'b', 'c', 'd', 'e', 'f', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
                for (var i = 0; i < 6; i++) {
                    color += arr[Math.floor(Math.random() * 15)];
                }
                return color;
            }

            //键盘按下事件
            $(document).keydown(function () {
                // 获取到我们按下了键盘的哪个按键，返回的是ascii码
                var keycode=event.keyCode;
                var height=screen.height;
                // 自定义字母元素的下落动画，并在动画结束后实现：
                $('.letter'+keycode).animate({"top":height+"px"},1000,function () {
                    score+=20;   //  1、分数累加
                    $("#score").html(score);    //  2、把分数显示在页面上的元素中
                    $(this).remove();        //  3、把字母元素移除掉
                })




                
            })

        })
    </script>
</body>
</html>