美文网首页
jq打字游戏

jq打字游戏

作者: 杰森999 | 来源:发表于2017-08-12 20:33 被阅读0次
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .zimu{
                width: 30px;
                height: 30px;
                position: absolute;
                border-radius: 50%;
                text-align: center;
            }
            
        </style>
    </head>
    <body>
    <span id="count"></span>
    </body>
    <script src="js/jquery-1.11.0.js"></script>
    <script>
        var score = 0;
            function ran(max,min){
                return Math.round(Math.random()*(max-min)+min);
            }
                
            $(function(){
                function create(){
            var r = ran(255,0);
            var g = ran(255,0);
            var b = ran(255,0);
            var a = ran(1,0.5);
            var k = ran(90,65);
            var ch = String.fromCharCode(k);
            var left = ran(document.documentElement.clientWidth,0);
            var top = ran(document.documentElement.clientHeight,0);
            console.log(k);
            $('body').append('<span class="zimu zimu'+k+'"style="background-color: rgba('+r+','+g+','+b+','+a+');top:'+top+'px;left:'+left+'px;">'+ch+'</span>');
            }
            setInterval(create,1100);
        })
            
            $(document).keyup(function(event){
                var keycode = event.keyCode;
                $(".zimu"+keycode).animate({
                    'top':+200,
                    'opacity':0,
                },'slow')
                $(".zimu"+keycode).hide('slow',function(){
                    score+=20;
                    $("#count").html(score);
                    $(this).remove();
                    console.log($(".zimu").length);
                })
            })
            
    </script>
</html>

相关文章

  • jq打字游戏

  • 打字游戏

    效果图如下: html结构代码: js逻辑代码:

  • 【打字游戏】说明

    小极客们,你们好! 打字游戏是由小超老师和小黑老师(刘佳旭老师)合作为大家制作的用来练习打字的小游戏,就是用咱们p...

  • Scratch编程-打字游戏

    从即日起,未来之源将会持续的为大家带来一个全新的编程课——《Scratch入门教程系列》。 新版本的课程汇聚了作者...

  • scratch实现打字游戏

    首先,我们来看一下游戏效果吧~ 看完了游戏效果,那我们接下来来分解一下这个程序 整个游戏分为背景/角色 1.实现角...

  • jq初始,选择器,事件,内容操作,样式操作

    jq初始 jq选择器 jq事件 jq内容操作 jq样式操作

  • 刻意编程D9

    练习内容 打字游戏默写1遍 打字游戏代码片段练习4遍 感想 50分钟内完整默写1遍 限时完成可运行版本,查看运行结...

  • 月千之夜

    这个是2012年做的一个游戏。 这个游戏的地址是 http://ccx01.com/game/T-night-jq...

  • 2022-06-12打字练习的游戏

    打字练习的游戏 好些时候没有打字了,这久看了一本写作方面的书,上面说是要注意打字练习,如果更习惯手写,就要手写,如...

  • 打字游戏(使用Vue开发)

    这是一个打字游戏。 规则如下 1、当输入第一个字母的时候,开始计时,当完全输入正确,计时停止。并且不能继续输入。2...

网友评论

      本文标题:jq打字游戏

      本文链接:https://www.haomeiwen.com/subject/hcwjrxtx.html