JQ实现谷歌小恐龙小游戏
2024-05-08 22:03:19
JQ实现谷歌小恐龙小游戏
啦啦啦做个小恐龙试试！！！！
楼下效果图
先来列举一下要做这个需要什么技能或工具~
1，会使用键盘
2，会使用鼠标
3，会使用百度
4，拥有一颗智慧的大脑
好啦现在这些必备技术已经准备好了，新建一个页面
当然别忘了引用JQ
接下来写html部分啦
<div class="outline">@*外面最大的框*@<div class="insidecasing">@*小框（内容在的框）*@<div class="hinderdw0" id="hinder0"></div><div class="hinderdw2" id="hinder1"></div><div class="hinderdw4" id="hinder2"></div><div class="hinderdw6" id="hinder3"></div><div class="hinderdwSE" id="hinder4"></div></div><div class="Dinosaur" id="dinosaur">@*恐龙直立*@<img id="zl1" src="~/image/kl.png" />@*走路1*@<img id="zl2" src="~/image/Snipaste_2017-12-01_14-30-58.png" />@*走路2*@<img id="tq" src="~/image/T.png" /> @*跳起*@</div><div class="Dinosaurpx" id="dinosaurpx">@*恐龙趴下*@<img id="px1" src="~/image/4.png" /><img id="px2" src="~/image/2.png" /></div><div class="yun1" id="yun1">@*云1*@<img src="~/image/yun.png" /></div><div class="yun2" id="yun2">@*云2*@<img src="~/image/yun.png" /></div><div class="yun3" id="yun3">@*云3*@<img src="~/image/yun.png" /></div></div>
这部分主要内容有：
框框、恐龙、障碍物
接下来这里是怎么让这个小家伙“跑”起来的呢，我用的方法是一个DIV里面放了两张图片一张左脚落地一张右脚落地，这样两张图片不停切换呢吗它就跑起来啦，趴下时候也是一样的，跳跃再换另外一张图片就好啦。
$("body").keydown(function () {//敲了回车if (event.keyCode == "13") {//keyCode=13是回车键topa();//恐龙动作}});$("body").keydown(function () {//敲了上if (event.keyCode == "38") {topa();//恐龙动作}});$("body").keydown(function () {//敲了空格if (event.keyCode == "32") {topa();//恐龙动作}});$("body").keydown(function () {//敲了下（按下）if (event.keyCode == "40") {dongxuo1();//恐龙动作}});$("body").keyup(function () {//敲了下(抬起)if (event.keyCode == "40") {dongxuo2();//恐龙动作}});function topa() //恐龙跳起{$("#tq").css('display', 'block').css('transition', 'display 0s linear');var y = $("#dinosaur").css('margin-top');$("#dinosaur").css('margin-top', '-133px').css('transition', 'margin-top 0.3s ease');setTimeout(function () { down() }, 260);//延时调用}function down() {var y = $("#dinosaur").css('margin-top');$("#dinosaur").css('margin-top', '-38px').css('transition', 'margin-top 0.3s linear');setTimeout(function () { luoxia() }, 400);//延时调用}
不要说我写的笨我也想把它写在一个里面的但是写在一个里面后我就不能按下键趴下了~你们有空可以试试
现在动作也有了，就到障碍物的出现了
我的解决方案是，把所有的障碍物都写好然后写一个随机数，根据随机数去显示不同的障碍物这样就能随机出现了。
js代码我就不一段段放了，来直接上全部~
备注写的比较仔细
var boji = 0;//补给内容collide(); //碰撞检测//setInterval("suiji();", 3000); //一直有东西出来window.setInterval(function () {zoulu1();}, 150);window.setInterval(function () {zoulu2();}, 300);window.setInterval(function () {zoulu1dx1();}, 150);window.setInterval(function () {zoulu1dx2();}, 300);window.setInterval(function () {yundz1();}, 15000);window.setInterval(function () {yundz2();}, 15000);window.setInterval(function () {yundz3();}, 15000);window.setInterval("suiji() ", 3000); //方块计时器$("body").keydown(function () {//敲了回车if (event.keyCode == "13") {//keyCode=13是回车键topa();//恐龙动作}});$("body").keydown(function () {//敲了上if (event.keyCode == "38") {topa();//恐龙动作}});$("body").keydown(function () {//敲了空格if (event.keyCode == "32") {topa();//恐龙动作}});$("body").keydown(function () {//敲了下（按下）if (event.keyCode == "40") {dongxuo1();//恐龙动作}});$("body").keyup(function () {//敲了下(抬起)if (event.keyCode == "40") {dongxuo2();//恐龙动作}});function topa() //恐龙跳起{$("#tq").css('display', 'block').css('transition', 'display 0s linear');var y = $("#dinosaur").css('margin-top');$("#dinosaur").css('margin-top', '-133px').css('transition', 'margin-top 0.3s ease');setTimeout(function () { down() }, 260);//延时调用}function down() {var y = $("#dinosaur").css('margin-top');$("#dinosaur").css('margin-top', '-38px').css('transition', 'margin-top 0.3s linear');setTimeout(function () { luoxia() }, 400);//延时调用}//碰撞~~~function collide(){var oDiv0 = document.getElementById('dinosaur');//恐龙（站立）var oDiv1 = document.getElementById('dinosaurpx');//恐龙（趴下）var oDiv2 = document.getElementById('hinder0');//方块0var oDiv3 = document.getElementById('hinder1');//方块1var oDiv4 = document.getElementById('hinder2');//方块2var oDiv5 = document.getElementById('hinder3');//方块3var oDiv6 = document.getElementById('hinder4');//方块4(补给)var disX = 0; var disY = 0; var tc = oDiv0.offsetTop;var lc = oDiv0.offsetLeft;var rc = oDiv0.offsetLeft + oDiv0.offsetWidth;var bc = oDiv0.offsetTop + oDiv0.offsetHeight;var tb = oDiv1.offsetTop;var lv = oDiv1.offsetLeft;var rv = oDiv1.offsetLeft + oDiv1.offsetWidth;var bv = oDiv1.offsetTop + oDiv1.offsetHeight;var t0 = oDiv2.offsetTop;var l0 = oDiv2.offsetLeft;var r0 = oDiv2.offsetLeft + oDiv2.offsetWidth;var b0 = oDiv2.offsetTop + oDiv2.offsetHeight;var t1 = oDiv3.offsetTop;var l1 = oDiv3.offsetLeft;var r1 = oDiv3.offsetLeft + oDiv3.offsetWidth;var b1 = oDiv3.offsetTop + oDiv3.offsetHeight;var t2 = oDiv4.offsetTop;var l2 = oDiv4.offsetLeft;var r2 = oDiv4.offsetLeft + oDiv4.offsetWidth;var b2 = oDiv4.offsetTop + oDiv4.offsetHeight;var t3 = oDiv5.offsetTop;var l3 = oDiv5.offsetLeft;var r3 = oDiv5.offsetLeft + oDiv5.offsetWidth;var b3 = oDiv5.offsetTop + oDiv5.offsetHeight;var t4 = oDiv6.offsetTop;var l4 = oDiv6.offsetLeft;var r4 = oDiv6.offsetLeft + oDiv6.offsetWidth;var b4 = oDiv6.offsetTop + oDiv6.offsetHeight;if(bc<t0 || lc>r0 || tc>b0 || rc <l0){// 表示没碰上 (站立)if (bc < t1 || lc > r1 || tc > b1 || rc < l1) {// 表示没碰上if (bc < t2 || lc > r2 || tc > b2 || rc < l2) {// 表示没碰上if (bc < t3 || lc > r3 || tc > b3 || rc < l3) {// 表示没碰上if (bc < t4 || lc > r4 || tc > b4 || rc < l4) {// 表示没碰上（补给）}else {//碰上（补给）$("#hinder4").css('display', 'none').css('transition', 'display 0s linear');boji++; //补给加1setTimeout(function () { bujis() }, 2000);//延时调用}}else{//碰上alert("碰到啦~~");}}else{//碰上alert("碰到啦~~");}}else{//碰上alert("碰到啦~~");}}else { //表示碰上了alert("碰到啦~~");}if (tb < t0 || tb > r0 || tb > b0 || tb < l0) {// 表示没碰上 (趴下) if (tb < t1 || tb > r1 || tb > b1 || tb < l1) {// 表示没碰上 if (tb < t2 || tb > r2 || tb > b2 || tb < l2) {// 表示没碰上 if (tb < t3 || tb > r3 || tb > b3 || tb < l3) {// 表示没碰上 if (bc < t4 || lc > r4 || tc > b4 || rc < l4) {// 表示没碰上（补给）}else {//碰上（补给）$("#hinder4").css('display', 'none').css('transition', 'display 0s linear');boji++; //补给加1setTimeout(function () { bujis() }, 2000);//延时调用}}else {//碰上alert("碰到啦~~");}}else {//碰上alert("碰到啦~~");}}else {//碰上alert("碰到啦~~");}}else { //表示碰上了alert("碰到啦~~");}setTimeout(function () { collide() }, 10);//延时调用} //end碰撞~~~function suiji(){var timer0 = null;var numb = Math.floor(Math.random() * 5); //均衡获取0到4的随机整数。var shiyong = "hinder" + numb;$("#" + shiyong).css('margin-left', '900px').css('transition', 'margin-left 0s linear');$('#' + shiyong).css('margin-left', '-20px').css('transition', 'margin-left 3s linear');}function zoulu1() //假装走路1{$("#zl1").css('display', 'none').css('transition', 'display 0s linear');$("#zl2").css('display', 'block').css('transition', 'display 0s linear');}function zoulu2() //假装走路2{$("#zl1").css('display', 'block').css('transition', 'display 0s linear');$("#zl2").css('display', 'none').css('transition', 'display 0s linear');}function luoxia() //恐龙落下{$("#tq").css('display', 'none').css('transition', 'display 0s linear');}function zoulu1dx1() //假装走路1(趴下){$("#px1").css('display', 'none').css('transition', 'display 0s linear');$("#px2").css('display', 'block').css('transition', 'display 0s linear');}function zoulu1dx2() //假装走路2(趴下){$("#px1").css('display', 'block').css('transition', 'display 0s linear');$("#px2").css('display', 'none').css('transition', 'display 0s linear');}function dongxuo1() //趴下动作1{$("#dinosaurpx").css('display', 'block').css('transition', 'display 0s linear');$("#dinosaur").css('display', 'none').css('transition', 'display 0s linear');}function dongxuo2() //趴下动作2{$("#dinosaurpx").css('display', 'none').css('transition', 'display 0s linear');$("#dinosaur").css('display', 'block').css('transition', 'display 0s linear');}setTimeout(function () { yundz1() }, 1000);//延时调用云1setTimeout(function () { yundz2() }, 3000);//延时调用云2setTimeout(function () { yundz3() }, 3900);//延时调用云3function yundz1()//云1动作左{$("#yun1").css('margin-left', '1000px').css('transition', 'margin-left 0s linear');$("#yun1").css('margin-left', '-60px').css('transition', 'margin-left 12s linear');}function yundz2()//云2动作左{$("#yun2").css('margin-left', '1000px').css('transition', 'margin-left 0s linear');$("#yun2").css('margin-left', '-60px').css('transition', 'margin-left 11s linear');}function yundz3()//云3动作左{$("#yun3").css('margin-left', '1000px').css('transition', 'margin-left 0s linear');$("#yun3").css('margin-left', '-60px').css('transition', 'margin-left 15s linear');}function bujis()//补给框显示{$("#hinder4").css('display', 'block').css('transition', 'display 0s linear');}
css代码
.outline {width:900px;height:300px;background-color:#ffffff;top:50%;left:50%;position:absolute;margin-left: -450px; /*width的一半*/margin-top: -150px; /*height的一半*/overflow:hidden; }.insidecasing {height:260px;width:100%;margin-top:20px;border-bottom:#959393 solid 2px;}.Dinosaur {position:absolute;z-index:1000;margin-top:-38px;margin-left:40px;overflow:hidden;transition: margin-top 0.1s ease-in;}.Dinosaurpx {position:absolute;z-index:10000;margin-top:-24px;margin-left:40px;overflow:hidden;transition: display 1s linear;display:none;}.yun1 {position:absolute;z-index:10000;margin-top:-184px;margin-left:40px;overflow:hidden;margin-left:900px;transition: margin-left 15s linear;}.yun2 {position:absolute;z-index:10000;margin-top:-224px;margin-left:40px;overflow:hidden;margin-left:900px;transition: margin-left 15s linear;}.yun3 {position:absolute;z-index:10000;margin-top:-200px;margin-left:40px;overflow:hidden;margin-left:900px;transition: margin-left 15s linear;}.hinderdw0 {width:13px;height:40px;margin-top:220px;background-color:#000000;position:absolute;z-index:1000;margin-left:900px;transition: margin-left 12s linear;}.hinderdw2 {width:13px;height:28px;margin-top:232px;background-color:#000000;position:absolute;z-index:1000;margin-left:900px;transition: margin-left 12s linear;}.hinderdw4 {width:13px;height:15px;margin-top:245px;background-color:#000000;position:absolute;z-index:1000;margin-left:900px;transition: margin-left 12s linear;}.hinderdw6 {width:13px;height:15px;margin-top:208px;background-color:#000000;position:absolute;z-index:1000;margin-left:900px;transition: margin-left 12s linear;}#tq { /*恐龙跳起图*/ display:none;position:absolute;z-index:1000;}#zl1 {float:left;display:none;transition: display 1s linear;}#zl2 {float:left;display:block;transition: display 1s linear;}#px1 {float:left;display:none;transition: display 1s linear;}#px2 {float:left;display:block;transition: display 1s linear;}.hinderdwSE {width:13px;height:15px;margin-top:208px;background-color:#4cff00;border-radius:100px;position:absolute;z-index:1000;margin-left:900px;transition: margin-left 12s ease;}
大家有兴趣的话可以提提建议~或者修修bug(笔芯)
JQ实现谷歌小恐龙小游戏相关推荐
- C++ 谷歌小恐龙#1 游戏制作实录
版本号:1.0 嗨,我是一块铌金属,新年快乐呀! 之前不是说啃了EGE库嘛,所以我打算做一个项目练练手. 做什么呢--?谷歌小恐龙! 谷歌小恐龙就是一款谷歌浏览器内置的小游戏--多的我就不说了,在谷歌 ...
- 生活记录：挑战制作谷歌小恐龙的游戏
挑战制作小恐龙游戏 开始工作 目标 动机 设定的开始时间 后面大体要做的工作 结语 开始工作 今天突发奇想,挑战试着制作谷歌浏览器断网后的那只小恐龙游戏.专门整一个专栏,记录下每一天的的制作进度,看多 ...
- java实现-现奔跑吧小恐龙-小游戏
文章目录 现奔跑吧!小恐龙 效果 源码 main包 modle包 service包 view包 现奔跑吧!小恐龙 项目结构 效果 源码 main包 package main;import view.M ...
- python小游戏毕设 仿谷歌浏览器小恐龙小游戏设计与实现 (源码)
文章目录 0 项目简介 1 游戏介绍 2 实现效果 3 Pygame介绍 4 原理和实现 4.1 环境配置 4.2 游戏初始化 4.3 创建游戏类 4.4 云.路面以及仙人掌类 4.5 计分板 4.6 ...
- python小游戏 仿谷歌浏览器小恐龙小游戏设计与实现
文章目录 0 项目简介 1 游戏介绍 2 实现效果 3 Pygame介绍 4 原理和实现 4.1 环境配置 4.2 游戏初始化 4.3 创建游戏类 4.4 云.路面以及仙人掌类 4.5 计分板 4.6 ...
- 用Python写个超级小恐龙跑酷游戏，上班摸鱼我能玩一天
目录 啥也不多说,先来一个效果图展示 工具使用 游戏思路解析 项目整体的框架搭建 创建小恐龙对象 创建障碍物对象 创建地板对象 游戏的基本配置信息 啥也不多说,先来一个效果图展示 工具使用 开发环境: ...
- 2022-用Python写个超级小恐龙跑酷游戏，上班摸鱼我能玩一天10-22
啥也不多说,先来一个效果图展示 **工具使用 ** ** 开发环境:win10.python3.7** ** 开发工具:pycharm 工具包:pygame** 游戏思路解析 准备相对应的游戏图片 准 ...
- Phaser（二）：小恐龙跑酷游戏
效果展示 资源 图片资源 地图资源 src/GameScenes/Scene02/Tilemaps/map.json { "compressionlevel":-1,"h ...
- Python谷歌小恐龙--Pygame
文章目录 Python谷歌小恐龙(持续更新,未完结) 前言 正文 创建窗口 添加静态背景图 添加静态小恐龙 让小恐龙动起来 程序小优化(增加小知识) 背景动起来 小恐龙跳跃(代码大改,做好心理准备) ...
- python实现图片找不同游戏_用Python实现谷歌的小恐龙游戏
(给Python开发者加星标,提升Python技能) 来源: Charles的皮卡丘-白露未晞me理 谷歌流量器中有个很有名的彩蛋:当你网络出现问题时,就会出现一个"小恐龙游戏". ...
最新文章
- 2020年香港将推两个创新研发平台，专注医疗及AI领域
- 软件官网与memcached介绍
- Netty : netty 3如何解决空轮询bug
- 麦克纳姆轮平台坐标系说明
- 流程图的虚线是什么意思_这些新标识啥意思？交警教你怎么走
- 如何将两个pdf合成一个？
- Navicat Premiumx64 使用注册机激活
- 下载各版本cuda，下载以前版本的cuda
- iOS安装包ipa文件安装及模拟app版本更新
- 10分钟让你掌握Linux常用命令(+2万+++收藏)
- java正则判断所有的标点符号_java正则匹配标点符号
- 6款CSS特效边框样式
- NSIS安装包制做软件的常用小技巧
- 基于切比雪夫空间距离的空间跳跃体绘制加速方法(Empty Space Skipping-ESS)
- 安装步骤_Saber 2016 安装步骤
- 解决通过硬盘或U盘安装ubuntu server出现无法挂载光盘的问题教程
- Ubuntu 16.04 LTS 初体验
- 【车辆计数】基于matlab GUI背景差分法道路行驶多车辆检测【含Matlab源码 1911期】
- 将https安全证书导入jdk中
- matlab读取excel数据