用JQuery写出农场的小游戏

农场小游戏

效果

通过css来布局页面内的位置

<style type="text/css">
div{font-size:12px;border:#999 1px solid;padding:5px;
}
#bg{  /*控制页面背景*/width:456px;height:266px;background-image:url(images/plowland.jpg);
}
img{  /*控制图片*/position:absolute;top:85px;left:195px;
}
#seed{  /*控制播种按钮*/background-image:url(images/btn_seed.png);width:56px;height:56px;position:absolute;top:229px;left:49px;cursor:hand;
}
#grow{  /*控制生长按钮*/background-image:url(images/btn_grow.png);width:56px;height:56px;position:absolute;top:229px;left:154px;cursor:hand;
}
#bloom{  /*控制开花按钮*/background-image:url(images/btn_bloom.png);width:56px;height:56px;position:absolute;top:229px;left:259px;cursor:hand;
}
#fruit{  /*控制结果按钮*/background-image:url(images/btn_fruit.png);width:56px;height:56px;position:absolute;top:229px;left:368px;cursor:hand;
}
.border{border: 2px solid green;}
.a{border: 0px;}
</style>

body页面的布局

<div id="bg"></div>
<span id="seed"></span><span id="grow"></span><span id="bloom"></span><span id="fruit"></span>

通过JQuery控制播种、生长、开花、结果 off()删除上次的点击事件removeClass()将所有的边框样式删掉addClass()点击添加样式

<script type="text/javascript">
$(document).ready(function(){$("bg").off();$("#bg").on("click",function(e){$("<img src='images/"+img+"'/>").prependTo("#bg").css("top",e.clientY-60).css("left",e.clientX-45).on('click',function () {$(this).remove();});});$("#seed").bind("click",function(e){   //绑定播种按钮的单击事件$('span').removeClass('border');$(this).addClass('border');img= "seed.png";}); $("#grow").bind("click",function(){   //绑定生长按钮的单击事件$('span').removeClass('border');$(this).addClass("border");img = "grow.png";}); $("#bloom").bind("click",function(){  //绑定开花按钮的单击事件$('span').removeClass('border');$(this).addClass("border");img = "bloom.png";});$("#fruit").bind("click",function(){   //绑定结果按钮的单击事件$('span').removeClass('border');$(this).addClass("border");img = "fruit.png"});        });
</script>

用JQuery写出农场的小游戏相关推荐

Pygame实战项目：用300行代码写出贪吃蛇小游戏
贪吃蛇是一款逻辑清晰.操作简单.老少咸宜.备受欢迎的休闲小游戏. 下面就给大家介绍一下贪吃蛇游戏的基本原理,以及实现贪吃蛇所需要的相关方法. 一.主要思路我们的贪吃蛇游戏将主要包括三个核心模块,分别 ...
cocos编写农场偷菜小游戏的总结
源码及效果图见GitHub:https://github.com/bigsinger/Farm 起因是要做游戏保护,需要了解游戏引擎并创建demo进行自测使用.于是先从比较简单的cocos了解,由于本 ...
html数字拼图游戏,JavaScript_JS写的数字拼图小游戏代码[学习参考]，复制代码代码如下:html - phpStudy...
JS写的数字拼图小游戏代码[学习参考] 复制代码代码如下: 拼图 td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100 ...
python恶搞小程序-知道了这个，你也能写出 Python 趣味小程序
原标题:知道了这个,你也能写出 Python 趣味小程序前两天在 51CTO 看见某篇推荐博文,大概是一个豆子比较感兴趣,在知乎和 github 上搜索了相关的源代码,发现原来实现起来非常的简单, ...
python的pygame库使用方法_python基础教程使用Python第三方库pygame写个贪吃蛇小游戏...
今天看到几个关于pygame模块的博客和视频,感觉非常有趣,这里照猫画虎写了一个贪吃蛇小游戏,目前还有待完善,但是基本游戏功能已经实现,下面是代码: # 导入模块 import pygame impo ...
python有趣小程序-知道了这个，你也能写出 Python 趣味小程序
原标题:知道了这个,你也能写出 Python 趣味小程序前两天在 51CTO 看见某篇推荐博文,大概是一个豆子比较感兴趣,在知乎和 github 上搜索了相关的源代码,发现原来实现起来非常的简单, ...
【牛客刷题】上手用C语言写一个三子棋小游戏超详解哦（电脑优化）
作者:[南航科院小张南航科院小张的博客专栏:从c语言的入门到进阶学习知识不只是要懂,还要会用:想要找到好的工作,这里给大家介绍一件可以斩获诸多大厂offer的利器–牛客网点击免费注册和我一起开 ...
你写一个web网页小游戏
写一个 web 网页小游戏需要以下几个步骤: 选择一种编程语言,常用的有 HTML.CSS.JavaScript 和 Python. 使用编辑器创建一个 HTML 文件,这个文件将是你的网页的基础. ...
c语言写一个简单的小游戏-推箱子
在学习C语言之后,写了一个简单的小游戏来锻炼自己的代码以及C语言知识的掌握能力. 推箱子作为手机上最常见的简单游戏,其代码也相对简单,想法也比较简单,下面为其代码和运行图. /************ ...

用JQuery写出农场的小游戏

农场小游戏

用JQuery写出农场的小游戏相关推荐

最新文章

热门文章