打字游戏

Posted zsmdbk

tags:

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

简单的打字游戏：

（自己下载一个jquery版本的jQuery-1.7.2.js或者其他版本）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .a {
            margin-top: 0px;
            position: absolute;
        }
        #oneDiv{
            position: relative;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="oneDiv"></div>
    <script src="jquery-1.7.2.js"></script>

    <script>
        $(function () {
            $("#oneDiv").css({ ‘background-color‘: ‘#fff‘, ‘width‘: ‘900px‘, ‘height‘: ‘600px‘, ‘border‘: ‘1px solid red‘, ‘margin‘: ‘auto‘ });
             time = setInterval(‘RandomNum()‘, 1000);

        });
        var number=0,time;
        function RandomNum() {

            var num = Math.floor(Math.random() * 26 + 65);//随机数
            var LeftNum = Math.floor(Math.random() * 860 + 10);//位置的随机数
            //alert(LeftNum);
            var one = String.fromCharCode(num);//把数字转换为字母
            var div = $("<div class=‘a‘>" + one + "</div>");
            div.css("margin-left", LeftNum).css({‘width‘:‘40px‘,‘font-size‘:‘32px‘,‘font-weight‘:‘bolder‘,‘border‘:‘0px solid red‘});
            $("#oneDiv").append(div);
            //console.log($("div"));
            $(".a").css("color", Method2);

            $(‘.a‘).each(function(){
                //alert($(this).offset().top);
                if($(this).offset().top > $(‘#oneDiv‘).height()-1){
                    $(this).remove();
                    number++;
                }
            })
            if(number>=3){
                clearInterval(time);
                alert(‘getOver!‘);
            }
            HuaMan();//调用动画的
        };
        function Method2() {
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += (Math.random() * 16 | 0).toString(16);
            }
            return color;
        };//获取所有的颜色  
        //动画
        function HuaMan() {
            $(".a")
                .animate({
                    ‘top‘: $(‘#oneDiv‘).height()+‘px‘
                }, 3000);
        }//结束

        window.onkeydown=function(event){
            var key = String.fromCharCode(event.keyCode)
            $(‘.a‘).each(function(){
                if($(this).text()==key){
                    $(this).remove();
                    return false;
                }
            })
        }
    </script>
</body>
</html>

 

以上是关于打字游戏的主要内容，如果未能解决你的问题，请参考以下文章

json 打字稿片段

typescript 打字稿+角度1的启动片段

Java JUI打字小游戏项目

前端搭建打字通游戏（内附源码）

C语言项目实战：《打字母游戏》零基础项目丨183 行源代码示例

html + css + js 实现一个打字小游戏（建议收藏）