当前位置：首页 > 学习笔记 > 正文内容

h5网页版字母消除游戏制作，html+jquery

廖万里3年前 (2022-09-09)学习笔记91027

开始游戏后会随机出现26个英文字母，玩家需要在键盘上按下显示的字母即可消失一个字母并加20分。

效果图：

完整代码（需要自己导入jquery.js文件）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字母消除游戏</title>
    <script src="js/jquery.js"></script>
<!-- 廖万里 -->
<!-- 万策云科技：www.kkkliao.com  -->
<!-- 一封云来信：Message.kkkLiao.com  -->
    <style>
        body {
            width: 100%;
            padding: 0;
            margin: 0
        }
 
        .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 () {
                var keycode = event.keyCode;//获取到我们按下了键盘的哪个按键，返回的是ascii码
                var height = screen.height;
                $('.letter' + keycode).animate({ "top": height + "px" }, 1000, function () {
                    score += 20;//分数累加
                    $("#score").html(score);//把分数显示在页面上的元素中
                    $(this).remove();// 把隐藏元素移除掉
                })
 
 
 
            })
 
        })
    </script>
</body>
</html>

本文链接：https://www.kkkliao.cn/?id=20 转载需授权！

分享到：

返回列表

上一篇：制作简易留言板html5，使用jquery实现留言以及删除功能

下一篇：使用JavaWeb实现企业邮箱登录验证功能

“h5网页版字母消除游戏制作，html+jquery” 的相关文章

如何使用Kali Linux进行DDOS攻防与WEB压力测试？

课前声明：1、本分享仅做学习交流，请自觉遵守法律法规！2、请勿拿去公网尝试，一定要做一个遵规守法的好公民！3、纯教学，造成的任何后果与我无关。二、资源装备1.安装好 Kali Linux 的虚拟机一台2.用于DDOS（拒绝式服务攻击）的网站一个；3.整装待发的小白一个。三、战略安排3.1 下载DDO...

网站一直被篡改首页文件index以及indax怎么办

近期发现公司网站首页文件经常被篡改为indax.php或indax.html,导致网站的功能无法正常使用，百度搜索关键词,在显示结果中点击公司网站,打开后跳转到别的网站上去了，尤其我们在百度做的推广，导致客户无法访问到我们公司网站上，给公司带来很大的影响，领导让尽快解决这个问题。这样的问题已经连续出...

有人给你发了匿名短信

【匿名短信】终于和大家见面了！每个人的心中，应该都会有一些忘不了的人或事！也许是遗憾的，是痛苦的，亦或是开心的，是幸福的...但最让你忘不了的，还是那个陪你创造回忆的TA...现在的你们，也许断了联系，没了交谈，但心里时不时却还会念着对方...【匿名短信】的上线，就是为了帮助你去和心中的Ta对话只需...