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

最新推荐文章于 2023-12-03 11:00:22 发布
最新推荐文章于 2023-12-03 11:00:22 发布
阅读量2.7k 收藏 12
点赞数 3
分类专栏： # H5小游戏 文章标签： 指尖大冒险 跳一跳升级版 html小游戏 js
原创博客归本人所有，禁止任何人、组织、公司转载或采集！
本文链接：https://blog.csdn.net/qq_43592352/article/details/90383837
版权

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

博主的话

	这是最后一个纯原生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留

征途黯然.
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
40个H5小游戏实例完整源码
10-18
Html5游戏平台源码，40款h5小游戏和多款有趣的测试。在浏览器可以直接运行。包含包括答题问卷、积分赚取、抽奖、找你妹，跑酷、2048、小鸟飞飞、飞的更高、一个都不能死......等，对与要写H5小游戏或者微信公众号小游戏的朋友是一个很好的参考，大家可以下载来看看
Egert小游戏源码《指尖跳一跳》
11-15
《指尖跳一跳》是一款基于H5技术的轻量级小游戏，由Egert开发框架构建，适合二次开发和在微信游戏中发布。本游戏的核心玩法是通过点击屏幕控制一个小方块跳跃，目标是在不断延伸的平台上尽可能地前进，挑战玩家的...
60套H5小游戏源码大合集-Html5小游戏JavaScript源码
10-07
60套H5小游戏源码大合集-Html5小游戏JavaScript源码
【亲测】80个经典在线休闲H5小游戏源码合集，直接上传空间即可使用，可玩性还不错
jiyc2008的博客
11-23 8583
约有八十个左右的小休闲游戏，代码无加密，上传即可使用，可以拿来放自己网站上引流,提升用户体验和黏度;游戏的可玩性还是挺好的。
434个H5游戏源码
初码
04-05 1万+
各种类型HTML5游戏，界面和JS均可供项目参考 下面是下载地址
盘点25个Html游戏Game源码网页爱好者不容错过
adendean的博客
12-03 2548
盘点25个Html游戏Game源码网页爱好者不容错过
H5网页跳转至微信小程序
热门推荐
a_靖的博客
07-08 3万+
文档链接点击跳转 版本要求：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。 好消息，H5网页接入公众号的JSSDK以后可以跳转到小程序了。 开放标签使用步骤 微信开放标签使用步骤与微信JS-SDK类似，也需要绑定安全域名、引入JS文件等步骤。 步骤一：绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 步骤二：引入JS文件 在需要调用JS接口的页面引入如下JS文件：http://res.wx..
指尖大冒险1215343.zip
06-05
指尖大冒险1小游戏源码
coco2d源码指尖大冒险
最新发布
02-26
coco2d源码指尖大冒险本资源系百度网盘分享地址
---指尖大冒险.zip---
04-28
【标题】"指尖大冒险.zip"是一个包含游戏代码的压缩包，它可能包含了实现一个名为“指尖大冒险”的游戏的所有源代码、资源文件以及相关的开发文档。从原始发布链接...
h5圣诞跳一跳小游戏源码.rar
05-24
基于一款手机游戏，该游戏跟跳一跳的基本功能非常类似，纯js代码开发而成。
新版H5跳一跳3D在线小游戏无错完整版_h5_跳一跳_
09-29
新版H5跳一跳3D在线小游戏无错完整版新版H5跳一跳3D在线小游戏无错完整版
跳一跳 小游戏 源码
03-30
我下载了csdn网站上的三个源码，然后又下载了前端开发博客上提供的github微信源码 经过多方比较，索性全部上传分享，决不骗分。源码都是game.js，其他res目录下的图片和音效是游戏资源，如果没有任何开发知识，请勿下载。本来想发图片证明的，描述内容无法插入图片，见谅。在压缩文档里有图片截图。
HTML5+CSS3实现的驴子跳游戏网页游戏源码
09-25
HTML5驴子跳游戏源码，制作很漂亮的一款HTML5+CSS3网页游戏，编辑暂时没有玩过，还配有音乐，很酷很刺激，想研究HTML5技术的朋友，您可不要错过这款网页游戏哦，虽然是游戏，但却考验了作者很综合的HTML5编程水平
最新微信跳一跳小程源码
11-16
其他 数据库:无 微信跳一跳小程序前端源码,无后端仅供学习研究使用无演示,最新微信跳一跳小程源码,在开发工具上正常运行。
指尖上的艺术——如何运用代码发挥无限创意
03-04
生成的艺术，指尖上的艺术，通过键盘上韵律般的敲敲打打，一幅幅美轮美奂的艺术作品便跃然于屏，这样的画作，包含了无穷的创意，糅合了现代计算机科技与传统绘画艺术，于我看来，难道还有比这更令人陶醉的美事吗？...
微信小程序跳一跳html版复原（three.js+tween.js）
zhoujie1994的博客
12-13 4059
You_Jump_I_Jump 运行 需要安装Tomcat后以类似 http://localhost:8080/zjgame/zjgame.html的方式访问，否则本地图片无法加载。 注：本项目基于Three.js，是对微信小游戏跳一跳的html版改写，只供研究学习使用。 效果图 目前只写了盒子的生成部分和部分动画部份，附全家福一张，还没有写随机盒子生成等逻辑部分，只能跳一两下。剩下的随缘更…… ...
web前端之跳一跳网页版小游戏
FemaleHacker的博客
07-05 5185
跳一跳小游戏 效果图片 效果 刷新产生随机位置 跳一跳 game over 代码实现 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跳一跳</title> <link rel="stylesheet" href="css/main.css"> <script type="text
第十三次CCF CSP认证（2018年3月）真题跳一跳
徐奕的专栏
03-18 4997
跳一跳 问题描述 　　近来，跳一跳这款小游戏风靡全国，受到不少玩家的喜爱。 　　简化后的跳一跳规则如下：玩家每次从当前方块跳到下一个方块，如果没有跳到下一个方块上则游戏结束。 　　如果跳到了方块上，但没有跳到方块的中心则获得1分；跳到方块中心时，若上一次的得分为1分或这是本局游戏的第一次跳跃则此次得分为2分，否则此次得分比上一次得分多两分（即连续跳到方块中心时，总得分将+2，+4，+6，+...
css 跳跃动画,如何使用纯CSS实现方块跳跃的动画（附源码）
weixin_29476659的博客
08-03 709
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载https://github.com/comehope/front-end-daily-challenges代码解读定义 dom，容器中包含 2 个子元素，分别代表 1 个女生和一群男生(4个)，每个 span 元素代表 1 个人(1 个方块)...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

征途黯然.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值