原版_打字游戏.html

最新推荐文章于 2024-06-04 12:31:16 发布

weixin_33807284

最新推荐文章于 2024-06-04 12:31:16 发布

阅读量521

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wwthuanyu/p/10555312.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .main,.wordList{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
            .wordItem{
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                border-radius: 50px;
                background:navajowhite;
                position: absolute;
                top: 20px;
                animation: wangxiadiao 10s linear forwards;
                
            }
            @keyframes wangxiadiao{
                from{
                    /*transform: translate(0,0);*/
                    top: 20px;
                }
                to{
                    /*transform: translate(0,1500px);*/
                    top: 1500px;
                }
            }
            
            .startgame{
                width: 300px;
                height: 150px;
                background: orangered;
                color: #fff;
                text-align: center;
                line-height: 150px;
                border-radius: 30px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -150px;
                margin-top: -75px;
                font-size: 70px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="wordList">
                
            </div>
            
            <div class="menu">
                <button class="startgame">游戏开始</button>
                <h1>游戏结束剩余时间</h1>
                <h1>当前得分：<span class="scroe"></span></h1>
                
            </div>
            
        </div>
        
        
        <script type="text/javascript">
            
            
            var game = {
                gData:{
                    wordList:document.querySelector('.wordList'),
                    newList:[]
                    domList:[]
                },
                startGame:function(){
                    //开始前，程序需要执行的内容
                    var btn = document.querySelector('.startgame')
                    btn.onclick = function(){
                        btn.style.display = 'none'
                        game.gameing()
                    }
                    
                    
                },
                gameimg:function(){
                    //游戏中要执行的程序
                    var fn = function(){
                        var randomNum = parseInt(Math.random()*26) 
                        var newDiv = document.createElement('div')
                        newDiv.innerHTML = word[randomNum]
                        newDiv.className = 'wordItem'
                        
                        game.gData.newList.push(word[randomNum])
                        game.gData.domList.push(newDiv)
                        
                        var x = Math.random()*(document.body.clientWidth-100)
                        newDiv.style.left = x + 'px'
                        
                        game.gData.wordList.appendChild(newDiv)
                        
                        var newWord = word[randomNum]
                        
                        setTimeout(function(){
                            var index = game.gData.newList.indexOf(newWord)
                            if(index!=-1){
                                wordList.removeChild(domList[index])
                                game.gData.newList.splice(index,1)
                                game.gData.domList.splice(index,1)
                                
                            }
                            
                        },10000)
                        
                    }
                
                
                    var interId = setInterval(fn,2000)
                    
                    setTimeout(function(){
                        clearInterval(interId)
                        game.endGame()
                    },10000)
                
                    
                },
                //游戏结束的时候执行的函数
                endGame:function(){
                    alert('游戏结束，你的得分是：')
                }
            }
            
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/wwthuanyu/p/10555312.html

weixin_33807284

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原版_打字游戏.html

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margi...
复制链接

扫一扫