js做简易开心农场`

简单的开心农场，简单实现

css:

body {margin:0;font-size:12px;
}/*背景图片的位置*/
.main{width:1024px;height:768px;background-image:url(../img/1_100804231616_12.jpg);
}.table_jz{width:820px;height:300px;margin:0 auto;padding-top:320px;margin-left:220px;
}

html:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>qq农场</title><script src="../../js/jquery-3.2.1.min.js"></script><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="1" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="2" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="3" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="4" onclick="changePic(this.id)"/></td></tr><tr><td><img src="img/none.png" id="5" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="6" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="7" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="8" onclick="changePic(this.id)"/></td></tr><tr><td><img src="img/none.png" id="9" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="10" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="11" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="12" onclick="changePic(this.id)"/></td></tr><tr><td><img src="img/none.png" id="13" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="14" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="15" onclick="changePic(this.id)"/></td><td><img src="img/none.png" id="16" onclick="changePic(this.id)"/></td></tr><tr><input type="button" value="播种" style="font-family: 宋体;background-color: #e0e0e0"onclick="changeState(this.value)"/><input type="button" value="采摘" style="font-family: 宋体;background-color: #e0e0e0"onclick="changeState(this.value)"/><input type="button" value="翻地" style="font-family: 宋体;background-color: #e0e0e0"onclick="changeState(this.value)"/></tr></table></div></div>
</body>
</html>

javascript:

<script type="text/javascript">var state = 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;}function changePic(id) {if (state == 1) {if (allLand[id][0] == 1) {document.getElementById(id).src = "img/seed.png";allLand[id][0] = 2;allLand[id][1] = 10;console.log(state);console.log(allLand[id][1])grow(id)}else {alert('土地非空闲！')}}if (state == 4){if (allLand[id][0] == 4){document.getElementById(id).src = "img/harvest.png";allLand[id][0] = 5;}else {alert("植物还没成熟！")}}if (state == 5){if (allLand[id][0] == 5) {document.getElementById(id).src = "img/none.png";allLand[id][0] = 1;}else {alert("植物还没采摘,不能铲除！")}}}function grow(id) {if (allLand[id][1] != 0) {if (allLand[id][1] >= 5){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;}}function changeState(sta) {if (sta == '播种') {state = 1;}if (sta == '发芽') {state = 2;}if (sta == '结果') {state = 3;}if (sta == '采摘') {state = 4;}if (sta == '翻地') {state = 5;}}
</script>

js做简易开心农场`相关推荐

使用js做简易轮播图，可自动
[作者注]:第一次使用js做简易轮播图首先在body里div个容器 div class="box"> <p id="p" ></p&g ...
js做简易ATM机-pink老师的作业
<script> var qian = 100; var order = prompt("1.存钱\n2.取钱\n3.显示余额\n4.退出") * 1; while ( ...
用JS做一个简易的时间显示动态效果
用JS做一个简易的时间显示动态效果运行效果代码 <!DOCTYPE html> <html lang="en"><head><meta ...
js 月份间隔计算器_15分钟用JS做一个简易计算器
原标题:15分钟用JS做一个简易计算器前言这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...
js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
H5案例分享：jquery.qrcode.js生成简易二维码
近期做项目需要生成二维码,并且解码获取信息,jquery.qrcode.js生成二维码比较的方便,写个教程分享给大家.欢迎大家测试留言,我会改进代码. 现在二维码越来越流行啦,支付扫二维码,关注扫二维 ...
Js实现简易的增删改查
Js实现简易的增删改查用JavaScript实现简单增删改查工作,这个应该是多数Js初学者都比较棘手的一个问题在下面我给大家写了一个简单的案例,该案例中没有实现增加操作,大家可以自己探索一下 ht ...
原生js制作简易DOM拾色器实例教程
本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...
JS实现简易网页计算器
js实现简易计算器.计算器的布局不像表格那么公正对称,所以布局这块相对比较繁琐,但是也可以通过这来练习一下CSS. 一.实现功能完成计算器的加减乘除的基本计算功能实现输入框中的字符串拼接二.实现 ...

js做简易开心农场`

js做简易开心农场`相关推荐

最新文章

热门文章