Java代碼
<script>
//用於判定是否是開始初始化方塊
var mark = false;
var starttime, endtime, finaltime = 0; //記錄遊戲時間
var array = new Array(); //用一個數組裝所有綠色方塊對象
var timerarr = new Array(); //記錄每個綠色方塊 和 對應的計時器id
function move(e){
var xy = document.getElementById("xy");
var self = document.getElementById("self");
x = e.clientX;
y = e.clientY;
xy.value = "當前坐標："+x +","+y;
if(x>=454 && x<=530 &&y>=285 && y<=355 && mark==false){
mark = true;
initothers(20);
}
target(e,x,y);
}
//線寬4px 格邊長36px target函數定位白色方塊的位置
function target(e,x,y){
var self = document.getElementById("self");
if(x>=12 && x<=855 && y>=40 &&y<=525 && mark ==true){
self.style.left = x +'px';
self.style.top = y +'px';
}
}
//初始化白方塊位置
function init(){
var today = new Date();
starttime = today.getTime();
document.getElementById("self").style.left = 454+'px';
document.getElementById("self").style.top = 282+'px';
}
//用一個對象存儲綠色方塊信息
function piece(){
piece.prototype.id = -1; //方塊編號 從0開始
piece.prototype.dire = 0; //移動方向 1上 2下 3左 4右
piece.prototype.top = 0;
piece.prototype.left = 0;
}
//初始化num個綠色移動方塊
function initothers(num){
for(var i=0;i<num;i++){
document.getElementById("pan").innerHTML += "<p id='"+i+"'; style='height:36px;width:36px;background-color:#00FF00;z-index:100; position:absolute;left:-50px'></p>";
//num1表示從橫坐標出現還是縱坐標<1表示橫 >1表示縱 num2 >1表示沿著坐標軸運動 <1表示逆著坐標走
var num1 = Math.random()*2;
var num2 = Math.random()*2;
var top1 = 43; //top1表示從上向下移動
var top2 = 563; //top2表示從下向上移動
var left1 = 14; //left1表示左–>右
var left2 = 894; //右–>左
var p = new piece();
p.id = i;
if(num1<1){
if(num2>1){ //從上往下移動
p.dire = 2;
p.top = top1;
p.left = (Math.ceil(Math.random()*23)*40-26);
document.getElementById(i).style.left = p.left+'px';
document.getElementById(i).style.top = top1+'px';
}else{ //從下往上移動
p.dire = 1;
p.top = top2;
p.left = (Math.ceil(Math.random()*23)*40-26);
document.getElementById(i).style.left = p.left+'px';
document.getElementById(i).style.top = top2+'px';
}
}else{
//從左向右移動
if(num2>1){
p.dire = 4;
p.top = (Math.ceil(Math.random()*14)*40+3);
p.left = left1;
document.getElementById(i).style.left = left1+'px';
document.getElementById(i).style.top = p.top+'px';
}else{ //右向左
p.dire = 3;
p.top = (Math.ceil(Math.random()*14)*40+3);
p.left = left2;
document.getElementById(i).style.left = left2+'px';
document.getElementById(i).style.top = p.top+'px';
}
}
array.push(p);
}
//初始化完成 觸發移動
var n;
for(n in array){
go(n,array[n].id,array[n].dire);
}
}
//重新定位一個綠色方塊location
function location(timerid,i,n,p){
clearInterval(timerarr[timerid]);
//alert(timerarr[timerid]);
var num1 = Math.random()*2;
var num2 = Math.random()*2;
var top1 = 43;
var top2 = 563;
var left1 = 14;
var left2 = 894;
if(num1<1){
if(num2>1){
p.dire = 2;
p.top = top1;
p.left = (Math.ceil(Math.random()*23)*40-26);
document.getElementById(i).style.left = p.left+'px';
document.getElementById(i).style.top = top1+'px';
}else{
p.dire = 1;
p.top = top2;
p.left = (Math.ceil(Math.random()*23)*40-26);
document.getElementById(i).style.left = p.left+'px';
document.getElementById(i).style.top = top2+'px';
}
}else{
if(num2>1){
p.dire = 4;
p.top = (Math.ceil(Math.random()*14)*40+3);
p.left = left1;
document.getElementById(i).style.left = left1+'px';
document.getElementById(i).style.top = p.top+'px';
}else{
p.dire = 3;
p.top = (Math.ceil(Math.random()*14)*40+3);
p.left = left2;
document.getElementById(i).style.left = left2+'px';
document.getElementById(i).style.top = p.top+'px';
}
}
go(n,p.id,p.dire);
}
//綠色方塊按規律直線移動
function go(n,i,dire){
//當一個綠色方塊出界 重新初始化一個進入界面
var speed = Math.ceil(Math.random()*3)*10+10; //速度隨機
if(dire==2){
timerarr[i] = setInterval("array["+n+"].top>=565 ? location("+i+","+i+","+n+",array["+n+"]): array["+n+"].top+=8;document.getElementById("+i+").style.top = array["+n+"].top+'px'; check(array["+i+"])",speed);
}
if(dire==1){
timerarr[i] = setInterval("array["+n+"].top<=41 ? location("+i+","+i+","+n+",array["+n+"]): array["+n+"].top-=8;document.getElementById("+i+").style.top = array["+n+"].top+'px';check(array["+i+"])",speed);
}
if(dire==4){
timerarr[i] = setInterval("array["+n+"].left>=896 ? location("+i+","+i+","+n+",array["+n+"]): array["+n+"].left+=8;document.getElementById("+i+").style.left = array["+n+"].left+'px';check(array["+i+"])",speed);
}
if(dire==3){
timerarr[i] = setInterval("array["+n+"].left<12 ? location("+i+","+i+","+n+",array["+n+"]): array["+n+"].left-=8;document.getElementById("+i+").style.left = array["+n+"].left+'px';check(array["+i+"])",speed);
}
}
//檢查是否與白色方塊相撞 傳入綠色方塊的對象進行判斷
function check(t){
if(t.left<=x+75 && t.left>=x-36 && t.top<=y+75 && t.top>=y-36){
var today = new Date();
endtime = today.getTime();
finaltime = (endtime – starttime – 0) / 1000;
window.alert('遊戲結束！你堅持瞭 ' + finaltime + ' 秒…');
//alert('鼠標坐標'+x+','+y+' 方塊坐標'+t.left+','+t.top);
//重新載入頁面
document.location.reload();
}
}
</script>
Java代碼
<body onload="init();">
<input id ="xy" disabled=true/>
<!–<button id="self" style="position:relative;">ssss</button> –>
<p id="pan" style=" height: 565; width: 925; background-image:url(/wp-content/images1/20180918/26d1caeb-c0ca-38e2-87ce-56e862235a7955.jpg);background-repeat:no-repeat;" onmousemove="move(event)">
<p id="self" style="height:76px;width:76px; background-color: white; position:absolute;border-width:1px; border-style:solid;border-color: red;"></p>
</p>
</body>
本文出自“奮鬥的小鳥”