利用js製作一個簡單的QQ農場小遊戲

原創

2020-07-06 21:17

html文件代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>QQ農場</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="main">
			<div class="table_jz">
				<table>
					<tr>
			<td><img src="img/none.png" id="0" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="1" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="2" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="3" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="4" onclick="changeState(this.id)"></td>
					</tr>
					<tr>
			<td><img src="img/none.png" id="5" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="6" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="7" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="8" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="9" onclick="changeState(this.id)"></td>
					</tr>
					<tr>
			<td><img src="img/none.png" id="10" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="11" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="12" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="13" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="14" onclick="changeState(this.id)"></td>
					</tr>
					<tr>
			<td><img src="img/none.png" id="15" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="16" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="17" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="18" onclick="changeState(this.id)"></td>
                        <td><img src="img/none.png" id="19" onclick="changeState(this.id)"></td>
					</tr>
					<tr>
						<input type="button" value="播種" onclick="changeStatu(this.value)"/>
						<input type="button" value="採摘" onclick="changeStatu(this.value)"/>
						<input type="button" value="翻地" onclick="changeStatu(this.value)"/>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>  
 
<script type="text/javascript"> 
	var statu = 1;
	
	var allLand = new Array(20);
	for(var i =0;i<allLand.length;i++){
		allLand[i] = new Array(3);
		allLand[i][0] = 1;//當前狀態
		allLand[i][1] = 0;//發芽到成熟
	}
//	var state=0;
//	var imgs = ["img/none.png","img/seed.png","img/bud.png","img/flower.gif","img/harvest.png"];
//	
	function changeState(id){ 
		 
	   if(statu==1){
	   	console.log("土地狀態："+allLand[id][0]);
	   	if(allLand[id][0] == 1){
	   		document.getElementById(id).src="img/seed.png";
	   		allLand[id][0] = 2;
	   	    allLand[id][1] = 20; 
	   	    grow(id);
	   }else{
	   	alert('土地非空閒狀態，不能播種！');
	   }
	}
	   if(statu==4){
	   	if(allLand[id][0]==4){
	   		document.getElementById(id).src="img/harvest.png";
	   		allLand[id][0] = 5;
	   	}else{
	   		alert('沒有成熟，不能摘');
	   	}
	   }
	   if(statu==5){
	   	if(allLand[id][0]==5){
	   		document.getElementById(id).src="img/none.png";
	   		allLand[id][0] = 1;
	   	}else{
	   		alert('植物非採摘狀態，不能剷除！');
	   	}
	   }
}
	   
	function grow(id){
//		console.log(allLand[id][1]);
		 
		if(allLand[id][1]!=0){
		if(allLand[id][1]>=10){
//			console.log('準  備發芽'); 
		}else{
//			console.log('準備結果');
			document.getElementById(id).src="img/bud.png";
		} 
		allLand[id][1]--;
		setTimeout("grow("+id+")",1000);
		}else{
//			console.log('已經成熟');
			document.getElementById(id).src="img/flower.gif";
			allLand[id][0] = 4;
			console.log("成熟狀態："+allLand[id][0]);
		}
	}  
		function changeStatu(sta){
		if(sta=='播種'){
			statu=1;
		}
		if(sta=='發芽'){
			statu=2;
		}
		if(sta=='結果'){
			statu=3;
		}
		if(sta=='採摘'){
			statu=4;
		}
		if(sta=='翻地'){
			statu=5;
		}
		}
</script>

css文件代碼


.main{
    width:1024px; 
    height:768px; 
    background:url(../img/1_100804231616_12.jpg); 
}

body {
margin:0px; 
font-family:"宋體"; 
font-size:12px; 
}
.banenrzz {
	BACKGROUND:url(../image/qqdaohang.png) no-repeat center 0px; 
	height:120px;
}

/*背景圖片的位置*/
/*.main_x{
width:1024px; 
height:768px; 
background-image:url(../image/1_100804231616_12.jpg); 
margin-left:0px;
}*/

.table_jz{ 
width:820px; 
height:300px; 
margin:0 auto; 
padding-top:280px; 
margin-left:150px;
}

結果圖形演示如下：