HTML小游戲代碼文庫是一個為大家提供HTML小游戲代碼的在線庫，可以幫助大家更好地學習HTML編程知識。
<!DOCTYPE html>
<html>
<head>
<title>水果連連看</title>
<style>
/*CSS樣式表*/
#gamebox{
width:600px;
height:600px;
margin:0 auto;
border:1px solid #333;
position:relative;
}
.pic{
width:75px;
height:75px;
background:url('fruit.jpg') no-repeat;
position:absolute;
display:none;
}
.block{
width:75px;
height:75px;
background:url('block.jpg') no-repeat;
position:absolute;
}在這個文庫中，你可以學習如何編寫一個簡單的HTML小游戲。下面是一個簡單的水果連連看游戲的代碼示例：
<body>
<div id="gamebox"></div>
<script>
var picArr=[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8];
picArr.sort(function(){return 0.5-Math.random();}); //打亂數組
var clickArr=[]; //存儲點擊的方塊
var mark=0; //表示點擊的次數
for(var i=0;i<picArr.length;i++){
var picDiv=document.createElement("div");
picDiv.className="pic";
picDiv.id="pic_"+i;
picDiv.setAttribute("picnum",picArr[i]);
document.getElementById("gamebox").appendChild(picDiv);
var blockDiv=document.createElement("div");
blockDiv.className="block";
blockDiv.id="block_"+i;
document.getElementById("gamebox").appendChild(blockDiv);
document.getElementById("pic_"+i).style.left=i%4*75+"px";
document.getElementById("pic_"+i).style.top=Math.floor(i/4)*75+"px";
(function(i){ //為每個picDiv添加點擊事件
picDiv.addEventListener("click",function(){
if(clickArr.length<2&&clickArr.indexOf(i)==-1&&this.style.display=="none"){
this.style.display="block";
clickArr.push(i);
if(clickArr.length==2){
var picA=document.getElementById("pic_"+clickArr[0]);
var picB=document.getElementById("pic_"+clickArr[1]);
if(picA.getAttribute("picnum")==picB.getAttribute("picnum")){
clickArr=[];
mark++;
if(mark==8){
alert("游戲完成！");
}
}else{
setTimeout(function(){
picA.style.display="none";
picB.style.display="none";
clickArr=[];
},500);
}
}
}
},false);
})(i);
}
</script>
</body>通過以上代碼，我們就可以實現一個簡單的水果連連看小游戲了。使用HTML進行編程非常容易，只要按照正確的語法書寫即可。希望大家可以在這個HTML小游戲代碼文庫中發現更多的樂趣。