js 超级玛丽(未完成)

浏览数：29 / 时间：2015年06月09日

<!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>