<!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>
时间: 2024-10-11 11:20:52