看書看到的一個jQuery小例子，分享給大家。（jquery引入可以選擇下載引入或者在jQuery官網找CDN） ...
看書看到的一個jQuery小例子，分享給大家。（jquery引入可以選擇下載引入或者在jQuery官網找CDN）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>單機游戲</title>
</head>
<body>
<div id="container"></div>
<script src="js/jquery.min.js"></script>
<script>
var width=$(window).width(),height=$(window).height(),//首先使用jq獲取視窗尺寸
countdown=20, countup=0;//定義兩個變數分別存放剩下要顯示的方塊數和用戶已單擊的方塊數
var nextElement=function(){//定義nextElement函數，每調用一次，就添加一個方塊到頁面中
if(countdown==0){//剩下要點擊的方塊數為0時游戲結束
gameOver();
return;
}//未結束時，添加創建一個50*50的方塊生成隨機的xy位置並且樣式化
var x=Math.random ()*(width-50),y=Math.random ()*(height-50);
$("<div>").css({
position:'absolute',
left:x,top:y,
width:50,height:50,
backgroundColor:'red'
}).appendTo("#container");
countdown--;
};
var gameOver=function(){//定義gameOver函數
clearInterval (timer);//首先清除間隔定時器，然後彈出一個提醒消息輸贏
if(countup>15){
alert("You won!");
}else{
alert("You lost!");
}
};
var timer=setInterval (nextElement,500);//指向setInterval的調用，每500毫秒創建一個新方塊
$("#container").on('mousedown','div',function(e){//$(selector).on調用，游戲捕獲#container元素內部的所有<div>的所有mousedown事件
countup++;
$(this).fadeOut();
});
</script>
</body>
</html>
