指尖大冒险、跳一跳升级版html5游戏全代码

指尖大冒险、跳一跳升级版html游戏全代码

博主的话
文件目录
运行图片
指尖大冒险.html
style.css
进行下一个游戏的开发！

博主的话

 这是最后一个纯原生js代码编出来的游戏了。我连这个一共写了三个小游戏。写得越多，越发现自己用原生js写游
戏的不足之处。所以在这里立个flag，下次写的h5小游戏一定要是用游戏引擎写的。文件夹路径也展示给大家。

所以，大家有需要的话，下载地址：https://download.csdn.net/download/qq_43592352/12368533

文件目录

运行图片

指尖大冒险.html

<html>
<head><title>指尖大冒险</title><link rel="stylesheet" type="text/css" href="css/style.css"/><script src="jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body><div id="container"><div id="con_left"></div><div id="main"><div id="gameBox"><img id="hero" src="css/img/hero_left.png"></div></div><div id="con_right"></div></div>
</body>
<script>function sleep(ms){//时间延迟函数return new Promise(resolve =>setTimeout(resolve,ms))}/******************************键盘事件***********************/var pressNum=0;var frontPressNum=0;$(document).keydown(function(event){if(event.which==39){$("#hero").attr("src","css/img/hero_right.png");moveRight();$("#hero").css({"margin-top":heroY+'px',"margin-left":heroX+'px'})allDown();deleteStair();addStair();background();check();}else if(event.which==37){$("#hero").attr("src","css/img/hero_left.png");moveLeft();$("#hero").css({"margin-top":heroY+'px',"margin-left":heroX+'px'})    allDown();deleteStair();addStair();background();check();}});
/*********************************封装函数*************************************/
var moveRightFlag=0;//全局变量
function moveRight(){moveRightFlag++;heroX++;var y=heroY-parseInt(61*Math.sin(moveRightFlag/60*Math.PI));$("#hero").css({"margin-top":y+'px',"margin-left":heroX+'px'})if(moveRightFlag<44)setTimeout("moveRight()",1);else {moveRightFlag=0;heroY-=45;heroX+=1;}
}
var moveLeftFlag=0;//全局变量
function moveLeft(){moveLeftFlag++;heroX--;var y=heroY-parseInt(61*Math.sin(moveLeftFlag/60*Math.PI));$("#hero").css({"margin-top":y+'px',"margin-left":heroX+'px'})if(moveLeftFlag<44)setTimeout("moveLeft()",1);else {moveLeftFlag=0;heroY-=45;heroX--;}
}
/********************************台阶类***************************/
var nowX=160,nowY=540,directionFlag,heroX=175,heroY=470;//全局变量
function Stair(x0,y0){this.x=x0;this.y=y0;var img=$(new Image());img.attr({'src':'css/img/stair.png','class':'stair',});img.css({'margin-left':this.x+'px','margin-top':this.y+'px',});$("#gameBox").append(img);
}
var ppp=new Stair(nowX,nowY);
for(var i=0;i<=6;i++)
{directionFlag=parseInt(Math.random()*2+1);if(directionFlag==1){nowX-=45;nowY-=45;ppp=new Stair(nowX,nowY);}else{nowX+=45;nowY-=45;ppp=new Stair(nowX,nowY);}
}
/********************************障碍物类***************************/
function StairOb(x0,y0){this.x=x0;this.y=y0;var img=$(new Image());img.attr('class','stairOb');img.css({'margin-left':this.x+'px','margin-top':this.y-90+'px','opacity':0});this.setImg1=async function(){img.attr('src','css/img/stairOb1.png');$("#gameBox").append(img);for(var i=1;i<10;i++){img.css({'opacity':i*0.1+0.1,'margin-top': this.y+i*10+'px'});await sleep(10);}}this.setImg2=async function(){img.attr('src','css/img/stairOb2.png');$("#gameBox").append(img);for(var i=1;i<10;i++){img.css({'opacity':i*0.1+0.1,'margin-top': this.y+i*10+'px'});await sleep(10);}}this.setImg3=async function(){img.attr('src','css/img/stairOb3.png');$("#gameBox").append(img);for(var i=1;i<10;i++){img.css({'opacity':i*0.1+0.1,'margin-top': this.y+i*10+'px'});await sleep(10);}}this.setImg4=async function(){img.attr('src','css/img/stairOb4.png');$("#gameBox").append(img);for(var i=1;i<10;i++){img.css({'opacity':i*0.1+0.1,'margin-top': this.y+i*10+'px'});await sleep(10);}}this.setImg5=async function(){img.attr('src','css/img/stairOb5.png');$("#gameBox").append(img);for(var i=1;i<10;i++){img.css({'opacity':i*0.1+0.1,'margin-top': this.y+i*10+'px'});await sleep(10);}}}
var qqq=new StairOb(nowX+80,nowY-35);qqq.setImg2();
/*****************************实现整体下移功能*****************************************/
function allDown(){heroY+=45;$("#hero").css("margin-top",heroY+'px');var allStairs=$(".stair");for(var i=0;i<allStairs.length;i++){var top=parseInt(allStairs.eq(i).css("margin-top"));allStairs.eq(i).css("margin-top",top+45+'px');}var allStairsOb=$(".stairOb");for(var i=0;i<allStairsOb.length;i++){var top=parseInt(allStairsOb.eq(i).css("margin-top"));allStairsOb.eq(i).css("margin-top",top+45+'px');}
}
/***************************台阶的添加与删除********************************************/
async function deleteStair(){var allStairs=$(".stair");var dom=allStairs.eq(0);var top=parseInt(dom.css("margin-top"));for(var i=0;i<9;i++){dom.css({'opacity':1-i*0.1,'margin-top': top+i*5+'px'});await sleep(10);}dom.attr("display","none");dom.remove();var allStairsOb=$(".stairOb");var domOb=allStairsOb.eq(0);var topOb=parseInt(domOb.css("margin-top"));if(topOb>540){for(var i=0;i<9;i++){domOb.css({'opacity':1-i*0.1,'margin-top': top+i*3+'px'});await sleep(10);}domOb.attr("display","none");domOb.remove();}
}async function addStair(){directionFlag=parseInt(Math.random()*2+1);if(directionFlag==1){nowX-=45;ppp=new Stair(nowX,nowY-90);var allStairs=$(".stair");var dom=allStairs.eq(allStairs.length-1);var top=parseInt(dom.css("margin-top"));for(var i=1;i<10;i++){dom.css({'opacity':i*0.1+0.1,'margin-top': top+i*10+'px'});await sleep(10);}addStairOb(1,nowX,nowY);}else{nowX+=45;ppp=new Stair(nowX,nowY-90);var allStairs=$(".stair");var dom=allStairs.eq(allStairs.length-1);var top=parseInt(dom.css("margin-top"));for(var i=1;i<10;i++){console.log(i);dom.css({'opacity':i*0.1+0.1,'margin-top': top+i*10+'px'});await sleep(10);}addStairOb(2,nowX,nowY);}
}
function addStairOb(flag,x,y){var isflag=parseInt(Math.random()*2+1);if(isflag==1){var styleflag=parseInt(Math.random()*5+1);if(flag==1) qqq=new StairOb(x-80,y-35);else qqq=new StairOb(x+80,y-35);if(styleflag==1) qqq.setImg1();else if(styleflag==2) qqq.setImg2();else if(styleflag==3) qqq.setImg3();else if(styleflag==4) qqq.setImg4();else qqq.setImg5();}
}
/*********************封装两侧的背景**************************************/
var bgHeight=0,bgFlag=0;
function background(){bgHeight+=2;bgFlag++;$("#con_left").css({'background':'url("css/img/leaf_left.png") 0px '+bgHeight+'px'+' repeat-y',"background-size": "100px 1200px"});$("#con_right").css({'background':'url("css/img/leaf_right.png") repeat-y  0px '+bgHeight+'px',"background-size": "100px 1200px"});if(bgHeight>=1200) bgHeight=0;//防止bgHeight过大var t=setTimeout('background()',10);if(bgFlag>=50){clearTimeout(t);bgFlag=0;}
}
/**********************************判断人物死亡****************************/
function check(){var allStairs=$(".stair");var dom=allStairs.eq(0);var top=parseInt(dom.css("margin-top"));var left=parseInt(dom.css("margin-left"));var hx=heroX+40,hy=heroY+80;if(!(hx<=left+75&&hx>=left&&hy<=top+60&&hy>=top)) alert("失败！");
}
</script>
</html>

style.css

*{margin: 0px;padding: 0px;/*无法选择图片*/-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;
}
#container{width: 100%;height: 730px;background: rgb(0, 22, 5);
}
#con_left{height: 100%;width: 10%;background: url("img/leaf_left.png") repeat-y;background-size: 100px 1200px;float: left;
}
#main{height: 100%;width: 79%;float: left;
}
#con_right{height: 100%;width: 100px;float: right;background: url("img/leaf_right.png") right repeat-y;background-size: 100px 1200px;
}
/**************************gameBox***********************/
#gameBox{height: 600px;width: 400px;margin: 50px 0 0 400px;
}
#hero{height: 100px;width: 50px;margin: 470px 0 0 175px;z-index: 10000;position: absolute;
}.stair{height: 60px;width: 75px;position: absolute;
}
.stairOb{position: absolute;width: 75px;height: 90px;z-index: 5000;
}

进行下一个游戏的开发！

飞机大战h5小游戏开发
是男人就下一百层”h5游戏全网最详细教学、全代码，js操作

2019-5-20留

指尖大冒险、跳一跳升级版html5游戏全代码相关推荐

飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码博主的话运行图片目录路径飞机大战.html style.css 进行下一个游戏的开发! 注意事项博主的话当时博主只会html,css和原生JavaScript,假 ...
createjs开发h5游戏: 指尖大冒险
之前看到一个指尖冒险游戏,觉得挺有意思,就想学习一下怎么实现,毕竟当产经提出类似的需求时,问我等开发可不可以实现的时候,不至于回答不知道. 本文的主要思路,参考的是凹凸实验室的这篇文章:H5游戏开发: ...
微信小程序—跳一跳，Android游戏助手(外挂)使用教程
作为一名有着丰富实战经验的Android开发人员,作为一个有着一定基础和实战的逆向新司机,第一次面对github上的这个项目自己也是懵的,即使看完了README,也还是不知道从何下手.在此之前玩游戏从 ...
连连看html游戏全代码js、jquery操作
连连看html游戏全代码js.jquery操作运行图片目录路径连连看水果方块版.html 连连看算法进行下一个游戏的开发! 注意事项我会把html文件.css文件提供下载地址,文件夹路径也展 ...
揭密微信《跳一跳》小游戏那些外挂
张小龙:这个游戏发布以后,其实它的效果有点超出我们的预期,我们自己开玩笑说,这个游戏突然变成了有史以来可能用户规模最大的一个游戏,因为它的DAU大概到了1点几亿,但同时出现了很多外挂,我没有想到这么小 ...
matlab模拟gpd,GPD WIN1流畅玩游戏之DOS游戏，阿猫阿狗大作战大宇16个DOS游戏全合集...
提取码: 2i5t ++++++++++++++++++++ 收集了大宇的16个DOS游戏,WIN10可以直接玩,具体的都忘记了,有轩辕剑什么的但是阿猫阿狗大作战这个游戏画风可是真喜欢!! 非常喜欢 ...
打怪游戏Java课程设计_java 课程设计大作业写的一个RPG游戏（代码+文档）
[实例简介] java 课程设计大作业写的一个RPG游戏(代码+文档) java 课程设计大作业写的一个RPG游戏(代码+文档) [实例截图] [核心代码] Rebellion-master ├─ ...
python五子棋游戏大作业_python-大作业之五子棋游戏(附代码)
<python-大作业之五子棋游戏(附代码)>由会员分享,可在线阅读,更多相关<python-大作业之五子棋游戏(附代码)(6页珍藏版)>请在金锄头文库上搜索. 1.Pytho ...
孢子:银河大冒险 for Mac模拟经营游戏
孢子(Spore) for Mac 中文版是一款macOS平台上的模拟经营类游戏,这款游戏模拟了生物演变的不同阶段,每一个阶段都真实反应生物的特性,非常的有趣,孢子(Spore) for Mac 中文 ...

指尖大冒险、跳一跳升级版html5游戏全代码

指尖大冒险、跳一跳升级版html游戏全代码

博主的话

文件目录

运行图片

指尖大冒险.html

style.css

进行下一个游戏的开发！

指尖大冒险、跳一跳升级版html5游戏全代码相关推荐

最新文章

热门文章