<!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{
50px;
position:absolute;
top: 50%;
left: 44%;
}
.hide{
display:none;
}
.kuop{
background:#000;
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>