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;
}结果图形演示如下：
1
2
3
4
5
转载自原文链接, 如需删除请联系管理员。
原文链接：利用js制作一个简单的QQ农场小游戏，转载请注明来源！