<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>無標題文件</title>
<script>
var obj;
var mytimer;
var c=0;
var y=0;
var x=0;
var speed=0;
var player;
var w = window.innerWidth;
var h = window.innerHeight;
var ctop=parseInt(h/2-50);
var cleft=parseInt(w/2-50);
function move()
{
var key = event.which || event.keyCode;
if(key==37||key==65)//left
{
x=-1;
y=0;
}
else if(key==38||key==87) //top
{
y=-1;
x=0;
}
else if(key==39||key==68) //right
{
x=1;
y=0;
}
else if(key==40||key==83)//down
{
y=1;
x=0;
}
else if(key==107) //+
{
speed++;
speed=speed>5?5:speed;
}
else if(key==109) // -
{
speed--;
speed=speed<0?0:speed;
}
else if(key==67) //C
{
ctop=parseInt(h/2-50);;
cleft=parseInt(w/2-50);;
}
else if(key==82) //R
{
document.querySelector('#box').style.backgroundColor = "red";
}
else if(key==71) //G
{
document.querySelector('#box').style.backgroundColor = "green";
}
else if(key==66) //B
{
document.querySelector('#box').style.backgroundColor = "blue";
}
player.innerHTML=speed+","+x+","+y;
}
function init()
{
player=document.getElementById("box");
myTimer=setInterval(play, 10);
}
function play()
{
ctop=ctop+y*speed; //x, y :控制方向，speed 控制速度
cleft=cleft+x*speed;
if(ctop<-100) ctop=h;
if(ctop>h) ctop=-100;
if(cleft<-100) cleft=w;
if(cleft>w) cleft=-100;
player.style.top=ctop+"px";
player.style.left=cleft+"px";
}
function resizeFun()
{
w = window.innerWidth;
h = window.innerHeight;
}
</script>
<style>
*{
margin:0;
padding:0;
}
body{
overflow: hidden;
}
#box{
position:absolute;
width:100px;
height:100px;
background-color:#386EE4;
font-size:24px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="box" style="left: 670px; top: 379px;">0</div>
<script>
alert(`
Press arrow button to control direction.
"+" & "-" Controls speed.
"C" Reset box position to center.
"R","G","B" Changes the color of the box.`);
window.addEventListener("keydown", move);
window.addEventListener("load", init);
window.addEventListener("resize", resizeFun);
var obj=document.getElementById("box");
obj.style.left=cleft+"px";
obj.style.top=ctop+"px";
window.focus();
</script>
</body></html>