js 超级玛丽(未完成)

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

 

你可能感兴趣的:(js)