博主的话
这是最后一个纯原生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; }
进行下一个游戏的开发！
2019-5-20留
