js 超级玛丽(未完成)

最新推荐文章于 2024-08-12 12:14:18 发布

weixin_34072159

最新推荐文章于 2024-08-12 12:14:18 发布

阅读量57

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xinlinux/p/4314959.html

版权

<!doctype html>
<html>

<head>

    <meta charset="utf-8">

    <title>超级玛丽</title>

    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>

    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/>
    
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    

    <style>
        img{
            width:50px;
            position:absolute;
            top: 50%;
            left: 44%;
        }
        .hide{
            display:none;
        }
        .kuop{
            background:#000;
            width:30px;
            height:30px;
            position: absolute;
            
        }
    </style>

</head>


<body>

    <audio src="./images/song.mp3" controls="controls" class="hide" id="music"></audio>

    <img id="imgs" src="./images/Life-Mushroom.png"/>
    
    <div class="kuop">
        
    </div>
    
    
    
    
    <script>

        window.document.onkeydown = keyup;
        var imgs = document.getElementById('imgs');
        var music = document.getElementById('music');
        var modes = 10;
        function keyup(event){
            var keycode = event.keyCode; 
            
            switch(keycode)
            {
                case 37:
                    imgs.style.left = (imgs.offsetLeft + modes*-1)+'px';
                    break;
                case 38:
                    imgs.style.top = (imgs.offsetTop + modes*-1)+'px';
                    break;
                case 39:
                    imgs.style.left = (imgs.offsetLeft + modes)+'px';
                    break;
                case 40:
                    imgs.style.top = (imgs.offsetTop + modes)+'px';
                    break;
            }
            
        }
    
    
    
    
    
    </script>
</body>
</html>