火柴人、全jquery、使用jquery制作简单英雄难过棍子关
2024-05-04 20:42:45
火柴人、全jquery、使用jquery制作简单英雄难过棍子关
1.jpg //背景
stick.gif //人物走动图片
stick_stand.png //人物不动时样式
需导入jquery
//页面加载时加载$(document).ready(function () {var count = 0;//分数//创建div,$("body").append("<div class='div1'></div>");//body的样式$("body").css({"margin": "0px","padding": "0px","background": "url('images/1.jpg') no-repeat"});var w = $("body").width();//获取当前body的宽度var h = $(window).height();//获取当前窗体的高度//窗体加载时执行，适应浏览器高度$(".div1").css({"width": w,"height": h,"float": "left","position": "relative",})//改变窗体大小时适应浏览器高度 ，执行$(window).resize(function () {var w = $("body").width();//获取当前body的宽度var h = $(window).height();//获取当前窗体的高度$(".div1").css({"width": w,"height": h,"position": "relative",})//body的样式$("body").css({"margin": "0px","padding": "0px","background": "url('images/1.jpg') no-repeat"});//火柴人脚下的石块样式$(".div_step").css({"bottom": "0px",})$("#btnSha").css({"top": click_button.offset().top + 30,"left": click_button.offset().left - 100,})})//创建一个点击按钮$(".div1").append("<div style=''><button id='click_button'>点击按钮</button></div>");var click_button = $("#click_button");//按钮对象click_button.css({"width": "100px","height": "100px","position": "absolute","top": "20%","left": "50%","border-radius": "50% 50% 50% 50%","color": "black","background": "url('images/btn-bg.png') no-repeat"})//创建的重新开始按钮$(".div1").append("<button style='background:blue;color:white;border:1px solid' id='btnSha'>重新开始</button>");var btnsha = $("#btnSha");btnsha.css({"position": "absolute","top": click_button.offset().top + 30,"left": click_button.offset().left - 100,})btnsha.click(function () {document.location.reload();})//创建一个div显示关卡$(".div1").append("<div id='levelCount'>关卡" + count + "</div>");var levelCount = $("#levelCount");levelCount.css({"width": "100px","height": "50px","font-size": "26px",})//创建石柱var divStep1 = step(0, 0, 100);var random1 = Math.floor(Math.random() * ($(window).height() - 100) + 100);var divStep2 = step(1, random1, Math.floor(Math.random() * (100) + 50));//创建一个桥$(".div1").append("<div id='div_bridge'></div>");var div_bridge = $("#div_bridge"); //桥对象var bridgeW = 5;div_bridge.css({"width": bridgeW + "px","height": "0px","position": "absolute","bottom": $(".div_step").height() - 1,"left": parseInt($(".div_step").width()) - bridgeW,"background-color": "black"})//火柴人人物$(".div1").append("<div id='div_person'></div>");var div_person = $("#div_person");//火柴人人物对象样式div_person.css({"width": "65px","height": "97","background": "url('images/stick_stand.png') no-repeat","position": "absolute","left": $(".div_step").width() - 65,"bottom": $(".div_step").height() - 1,// "border": "1px solid red"})//方法//创建火柴人脚下的石块,参数：索引，位置，宽度function step(i, left, width) {$(".div1").append("<div class='div_step'></div>");//火柴人脚下的石块样式$(".div_step").css({"position": "absolute","bottom": "0px","background": "black","height": "150px"})$(".div_step").eq(i).css({"left": left + "px","width": width + "px",})return $(".div_step").eq(i);}var time;//时间var zop = false;onmousedown(); //调用鼠标按下事件方法onmouseup();//调用鼠标松开事件方法//鼠标按下事件调用方法function onmousedown() {click_button.mousedown(function () {//鼠标移开事件click_button.mouseout(function () {clearInterval(time);return;})//局部变量，控制桥的长度var bridgeHeight = 0;time = setInterval(function () {bridgeHeight += 5;//桥的长度变化增加div_bridge.height(bridgeHeight);}, 15);})}//鼠标松开事件function onmouseup() {click_button.mouseup(function () {click_button.unbind();//解除按钮绑定所有事件clearInterval(time);//棍子倒下div_bridge.animate({}, function () {div_bridge.css({'transform-origin': '0% 100%', //固定旋转的点，以此点为中心旋转'transform': 'rotate(90deg)', //旋转2d动画 90°'transition': 'transform .3s linear',//过渡动画});//人物500毫秒后走动setTimeout(function () {//更改人物的背景图片div_person.css({"background": "url('images/stick.gif')",})seupGo(divStep1, divStep2);//执行方法}, 500, function () {div_bridge.css("left", step2W - div_bridge.width() + "px");//桥的位置为人物所在的柱子的宽度-桥的宽度var step = divStep1;divStep1 = divStep2;divStep2 = step;click_button.bind("mousedown", onmousedown());//恢复按钮绑定的按下事件click_button.bind("mouseup", onmouseup());//恢复按钮绑定的按下事件});})})}//鼠标松开后执行的方法function seupGo(step1, step2) {click_button.unbind();//解除按钮绑定所有事件//问题：如何知道人物是在哪根柱子上，柱子的宽获取var bridgeH = div_bridge.height() + step1.eq(0).width();//桥的长度+柱子1的宽度//人物根据桥的长度移动 ,此时要加上人物所在的柱子的宽度div_person.animate({ "left": bridgeH }, 1000, function () {var step2l = step2.offset().left;//第二根柱子的左边距离var step2W = step2.width();//第二根柱子的宽度//判断是否是在第二个柱子上 : 如果桥的长度 小于 第二根柱子的左边距离 或者 桥的长度 大于 第二个柱子左边距离加上其宽if (bridgeH < step2l || bridgeH > step2l + step2W) {div_person.animate({"bottom": "0px",}, 500, function () {alert("Game Over");document.location.reload();});return;}//桥的恢复样式div_bridge.css({'transform': 'rotate(0deg)', //旋转2d动画 恢复原样'transition': 'transform 0s linear',//过渡动画"height": "0px",//桥的高度恢复为0})//人物恢复原样div_person.css({"background": "url('images/stick_stand.png')",})//待人物走到第二个柱子，人物和柱子都向后移动恢复成加载状态step2.animate({"left": "0px",//人物所在的柱子位置为0}, 500)div_person.animate({//人物的位置为：人物所站的柱子的宽度 - 人物的宽度"left": step2.width() - div_person.width(),}, 500)step1.animate({//柱子1的位置为 本身宽度的负数"left": -step1.width(),}, 500, function () {//柱子消失后从右边进来，step1.css({ "left": "2000px", })step1.animate({"left": Math.floor(Math.random() * ($(window).height() - 100) + 150),//位置可以为：随机数}, 500, function () {div_bridge.css("left", step2W - div_bridge.width() + "px");//桥的位置为人物所在的柱子的宽度-桥的宽度var step = divStep1;divStep1 = divStep2;divStep2 = step;click_button.bind("mousedown", onmousedown());//恢复按钮绑定的按下事件click_button.bind("mouseup", onmouseup());//恢复按钮绑定的按下事件count++;levelCount.text("关卡" + count);})})});}});//加载页面时加载的内容火柴人、全jquery、使用jquery制作简单英雄难过棍子关相关推荐
- python编写会动的火柴人_火柴人跑步怎么画 如何制作一个正在奔跑的火柴人动画形象？火柴人跑步动作怎么画...
小编最近一直致力于制作火柴人动画,制作火柴人各种搞笑的动作.为什么会一直想要制作火柴人动画呢?因为将动画制作成GIF格式之后,再发到微信聊天上就是一个很搞笑的微信表情包啦.然后小编的朋友总说小编制作的 ...
- jQuery+Ajax+PHP 制作简单的异步数据传输（测试用户名是否可用）
实现基本异步数据传输,略去与数据库交换,先直接在PHP端判断:用户名为 user1 即为不可用, 测试时外加了 普遍的 "Loading..." 功能,此功能可直接在PHP中循环延 ...
- 《火柴人联盟》制作人鬼人谈如做好动作手游
<火柴人联盟>制作人鬼人谈如做好动作手游 发布者: justsolo | 发布时间: 2015-1-21 00:20| 评论数: 19 游戏类型:手游游戏/平板游戏 设计类型:[系统/框 ...
- 火柴人小程序linux,推荐这3款射击类的火柴人小程序，一起冲冲冲吧！
射击加在火柴人这款小游戏里面,会有哪一些不一样的玩法呢!是不是会更加的惊险刺激呢!接下来小编推荐的这三款一定符合你的胃口,考验着你的思维能力和玩游戏的水平,快带你身边的小伙伴们一块尝试尝试吧! 火柴人 ...
- 火柴人小程序linux,这里居然有火柴人的一些不一样的小程序？要不来玩一下
火柴人还有不一样的玩法?是的,这几个火柴人结合了搭桥,结合了跑酷,结合了划线小游戏,是不是感觉有一些意外呢?小编推荐的这几款关于火柴人的小游戏考验着玩家种种能力,如果你觉得自己对游戏的天赋好,那就赶紧 ...
- 计算机制作统计图报告,jQuery制作简单的柱状图(数据统计报表)
前段时间使用HTML+CSS制作了一个柱状图,今天将Javascript版的也分享一下,没用做成插件的形式,只需要调用一个函数即可,功能比较简单,使用起来也算方便,只需要将json数据传入给该函数即可 ...
- JQuery的几个简单小案例（基础）
JQuery的几个简单小案例 实现表格的的隔行换色 实现复选框的全选与全不选 QQ表情的选择 多选下拉列表的左右移动 实现表格的的隔行换色 需求:事先制作一个如图所示的table表格,将数据行的奇数行 ...
- gif透明背景动画_火柴人动画制作软件下载_火柴人动画制作软件最新电脑版下载...
火柴人动画制作软件官方版(Pivot Stickfigures Animator)是一款完全免费的火柴人动画制作软件.如果您不具备Flash等专业动画软件制作技能,那么可使用火柴人动画制作 ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
最新文章
- linux insight 使用教程,Insight API开源项目分析
- 1、Angular2 Component 组件
- wordpress常用插件汇总
- VTK：可视化之CameraModel2
- hello.cpp 第一个C++程序（本博客没有特指都是以QT测试）
- C# XML添加删除/SelectNodes/xpath
- [Spring5]IOC容器_Bean管理XML方式_注入其他类型属性
- ADF12C+GLASSFISH4.1配置数据源
- 时钟天气小插件显示没服务器,天气时钟小插件大全
- 仿映客直播礼物特效制作流程
- 智和网管平台SugarNMS网络安全解决方案
- 俄亥俄州立大学计算机硕士申请,俄亥俄州立大学计算机科学系
- CSS之九宫格面试题
- 面向对象-当谈论面向对象的时候，我们到底在谈论什么？
- 银行手机APP软件做性能测试吗,浅谈银行开放平台应用系统性能测试
- 【++运算符重载】c++实现递增运算符重载
- 计算机模拟圣彼得堡游戏
- 无房产证明怎么办理？
- 网页背景颜色渐变效果
- Es6类数组length属性和扩展方法，find()，findIndex()，fill()，copyWithin()，entries()...用法