jquery制作html小游戏,使用css+JQuery制作开心农场小游戏模拟画面
效果如图所示:
代码如下所示:
#bg {
width: 500px;
height: 280px;
background-image: url(img/plowland.jpg);
background-repeat: no-repeat;
position: absolute;
}
img {
position: absolute;
width: 56px;
height: 56px;
}
#seed {
width: 56px;
height: 56px;
background-image: url(img/btn_seed.png);
top: 226px;
left: 30px;
position: absolute;
cursor: hand;
}
#grow {
width: 56px;
height: 56px;
background-image: url(img/btn_grow.png);
top: 226px;
left: 110px;
position: absolute;
cursor: hand;
}
#bloom {
width: 56px;
height: 56px;
background-image: url(img/btn_bloom.png);
top: 226px;
left: 190px;
position: absolute;
cursor: hand;
}
#fruit {
width: 56px;
height: 56px;
background-image: url(img/btn_fruit.png);
top: 226px;
left: 270px;
position: absolute;
cursor: hand;
}
#harvest {
width: 56px;
height: 56px;
background-image: url(img/btn_harvest.png);
top: 226px;
left: 350px;
position: absolute;
cursor: hand;
}
.border {
border: 2px solid red;
border-radius: 50px;
}
#reaps{
width: auto;
height: auto;
margin-top: 300px;
position: absolute;
}
#num{
margin-top: 310px;
margin-left: 65px;
position: absolute;
font-size: 30px;
}
$(function(){
//给播种设置点击事件
$("#seed").on("click",function(){
$("#grow").removeClass("border");//移除生长的class的值
$("#bloom").removeClass("border");//移除开花的class的值
$("#fruit").removeClass("border");//移除结果的class的值
$("#harvest").removeClass("border");//移除收获的class的值
$(this).addClass("border");//给播种设置选中样式
//给id为bg的div设置点击事件
$("#bg").on("click", function(e) {
//给图片设置一个class,值为img1
$("").addClass("img1").prependTo("#bg").css("top", e.pageY - 30).css("left", e.pageX - 34);
});
$(this).off("click");//移除播种的点击事件(因为已经有了种子,所以可以不再点击播种就能种了)
});
//给id为seed的span标签设置点击事件
$("#grow").on("click", function() {
$("#seed").removeClass("border");;//移除播种的class的值
$("#bloom").removeClass("border");;//移除开花的class的值
$("#fruit").removeClass("border");;//移除结果的class的值
$("#harvest").removeClass("border");;//移除收获的class的值
$(this).addClass("border");//给生长设置选中样式
//判断如果class值为img1的图片的src路径为img/seed.png,则把src路径改变为img/grow.png,否则让它先播种
if($(".img1").attr("src") == "img/seed.png") {
$(".img1").attr("src", "img/grow.png");
} else {
alert("请先播种!");
}
});
$("#bloom").on("click", function() {
$("#seed").removeClass("border");
$("#grow").removeClass("border");
$("#fruit").removeClass("border");
$("#harvest").removeClass("border");
$(this).addClass("border");
if($(".img1").attr("src") == "img/grow.png") {
$(".img1").attr("src", "img/bloom.png");
} else {
alert("请先生长!");
}
});
$("#fruit").on("click", function() {
$("#seed").removeClass("border");
$("#grow").removeClass("border");
$("#bloom").removeClass("border");
$("#harvest").removeClass("border");
$(this).addClass("border");
if($(".img1").attr("src") == "img/bloom.png") {
$(".img1").attr("src", "img/fruit.png");
} else {
alert("请先开花!");
}
});
$("#harvest").on("click", function() {
$("#seed").removeClass("border");
$("#grow").removeClass("border");
$("#bloom").removeClass("border");
$("#fruit").removeClass("border");
$(this).addClass("border");
//如果class值为img1的图片的src路径为img/fruit.png,则把该图片放到id为reaps的div中,
//然后删除之前的class值,在重新添加一个class值,并设置css样式中的top和left设置为0px
if($(".img1").attr("src") == "img/fruit.png") {
$(".img1").attr("src","img/fruit.png").prependTo("#reaps").removeClass("img1").addClass("reap").css("top",0).css("left",0);
//获取class值为reap的图片的个数,并把个数放到id为num的span标签中
var length = $(".reap").length;
$("#num").text("×" +length);
} else {
alert("作物还没成熟!");
}
$("#harvest").removeClass("border");
});
});
jquery制作html小游戏,使用css+JQuery制作开心农场小游戏模拟画面相关推荐
- 实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
任务一: 任务1:建立站点并完成页面整体布局 任务2:制作网页头部和导航 任务3:制作banner和最新更新栏目 任务4:制作苹果之家栏目 任务5:制作Apple独家栏目 任务6:制作底部版权区域与C ...
- 前端游戏巨制! CSS居然可以做3D游戏了
前言 偶然接触到CSS的3D属性, 就萌生了一种做3D游戏的想法. 了解过css3D属性的同学应该都了解过perspective.perspective-origin.transform-style: ...
- html中展开的小箭头,纯css实现各种方向小箭头
原理:一个高宽相等的正方形,选取你所需要的某一边,截取之,就是一个梯形,当高宽都为0,且其他边为透明颜色时,一个三角形就出来了 梯形 Document .arrow { width: 10px; he ...
- css实现旋转的小流星动画
效果如下: 完整代码如下 : <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
- 微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)
上一篇讲了WXML:小程序版HTML,这一篇介绍WXSS:小程序版CSS. 1. WXSS:小程序版CSS. WXSS是一套样式语言,为了便于前端开发的上手,WXSS同HTML的CSS样式文件大部分特 ...
- 每个人都能制作的简易版QQ音乐(HTML+CSS+JQuery)
自制系列二它来了. 如果在制作过程中有如何问题你都可以私信我,我会答复你的. 今天中秋节,首先祝大家中秋节快乐! 因为没什么礼物送给大家,所以在这里给大家安利一份简易版QQ音乐的制作,过程很简单,每个 ...
- 毕业设计游戏类网站设计静态页面基于html,div+css+jquery(含源码)
首页.游戏简介.游戏资料.单机攻略.手游攻略.网络攻略.登录|注册等相关功能页面 适合商业项目或大学生毕业设计程序,整套静态页面html,div+css+jquery相关技术 更多相关内容,请点击下载 ...
- HTML+CSS+JS制作【飞机大战】小游戏(键盘版和鼠标版)
文章目录 一.效果演示 设计思路 二.鼠标版飞机大战代码展示 1.HTML结构代码 2.CSS样式代码 3.JavaScript代码 js.js文件 plane.js文件 三.键盘版飞机大战代码展示 ...
- HTML+CSS+jquery实现飞机大战游戏
这几天闲着没事运用html+css+jquery写了个飞机大战的游戏 分享下自己的思路: 一:界面构建: 1.首先,先用HTML+CSS构建基本的页面结构,这里的设计 ...
最新文章
- 目标检测一卷到底之后,终于有人为它挖了个新坑|CVPR2021 Oral
- 详解AI Lab 21篇CVPR 2018论文(附论文)
- cocos2d-x的win32编译环境
- C# 基础知识 (二).独特的知识及用法篇
- how to debug Opportunity change implementation - entry onOKParticipantDialog
- List和DataTable的Limit
- uniapp中实现每次点击左侧菜单右边区域都从顶部开始
- linux代码段起始地址设置,Arch Linux安装后的一些初始设置简介
- ICLR2020满分论文 | 为什么梯度裁剪能加速模型训练?
- 日站会——你的站会姿势正确吗?
- 【杭州云栖】飞天技术汇CDN与边缘计算专场:让内容离消费者更进一步
- python文件操作的方法_Python文件常用操作方法
- 疫情下的创业品牌如何逆风翻盘?
- 【6.10校内test】T3 加分二叉树
- Linux打开终端命令
- 玩机搞机----安卓全机型修改开机第一屏步骤教程
- 笑喷了,我用Python帮韦小宝选最佳老婆组合
- 选课系统软件测试计划规划,职业生涯规划测评系统 测评软件
- 如何给网站添加IE浏览器升级提示
- 计算机系统概论输入输出,计算机系统概论笔记-4-冯·诺依曼模型
热门文章
- java调接口实现发送手机短信验证码功能,手机验证码,接口调用
- 贪心算法之圣诞老人的礼物
- 企业中小型机房UPS电源及环境微信云监控解决方案
- 6步骤实现CentOS系统环境精简优化
- nvidia驱动程序下载失败?
- 2021单机游戏排行榜前十名
- 【UCIe】UCIe Standard 256B Flit for PCIe 6.0 vs. PCIe 6.0 Flit
- Feign-独立使用-实战
- 使用一个高数值孔径离轴抛物面反射镜对飞秒脉冲聚焦
- 华中师大计算机专业陈鹏,华师男子不满工作分配流浪16年 与弟弟见面后拒回家...