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>
————————————————原文链接：https://blog.csdn.net/qq_45746493/article/details/102730070body页面的布局```css
<div id="bg"></div>
<span id="seed"></span><span id="grow"></span><span id="bloom"></span><span id="fruit"></span>

<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>
————————————————
https://blog.csdn.net/qq_45746493/article/details/102730070

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

cocos编写农场偷菜小游戏的总结
源码及效果图见GitHub:https://github.com/bigsinger/Farm 起因是要做游戏保护,需要了解游戏引擎并创建demo进行自测使用.于是先从比较简单的cocos了解,由于本 ...
使用jquery—Canvas实现html5小游戏——《坦克大战》
目录 1.项目背景 2.项目展示 3.设计思路 3.1.坦克移动 3.2.坦克开火 3.3.击中坦克 4.实现代码 5.总结 1.项目背景 2021年春节期间在家无聊,正好又学过一些前端的知识,因此就 ...
jquery制作html小游戏,JQuery手速测试小游戏实现思路详解
(-1)写在前面我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个 ...
c++ 小游戏_C/C++编程笔记：C语言写推箱子小游戏，大一学习C语言练手项目
C语言,作为大多数人的第一门编程语言,重要性不言而喻,很多编程习惯,逻辑方式在此时就已经形成了.这个是我在大一学习 C语言后写的推箱子小游戏,自己的逻辑能力得到了提升,在这里同大家分享这个推箱子小游 ...
利用js写的见缝插针小游戏
利用js写的见缝插针小游戏今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 游戏截图失败时代码如下 js代码 index.js 测试游 ...
Python写王者荣耀小游戏
Python写王者荣耀小游戏文章目录 Python写王者荣耀小游戏说明: 一.socket创建二.实现多进程三.面向对象版本四.主体部分搭建 1. 服务器主要步骤的实现 1-1主体部分 1- ...
弹力细胞，一个由JavaScript写的网页小游戏
弹力细胞 (BounceCell) 一个由JavaScript写的网页小游戏作为大一菜鸟,这是我第一次比较正式的写文章 [害臊] 游戏玩法通过鼠标或触屏控制屏幕底部的滑动弹板将发射的小球反弹出去撞 ...
python弹球小游戏程序设计_Python写的弹球小游戏
原标题:Python写的弹球小游戏 Python 的功能强大应用广泛,从爬虫到 Web 开发,从科学计算到人工智能,都能见到它的身影.当然,Python 还可以编写游戏代码,虽然不是主流,但却十分有趣 ...
jQuery实现Windows扑克牌小游戏代码
下载地址jQuery实现Windows扑克牌小游戏代码,使用jQuery基于CSS3制作的WINDOWS7系统电脑自动的蜘蛛纸牌游戏. dd:

JQuery写农场的小游戏

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

最新文章

热门文章