HTML5游戏实战：美女弹弹弹

最新推荐文章于 2024-08-30 06:00:00 发布
最新推荐文章于 2024-08-30 06:00:00 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： 游戏制作记录 文章标签： HTML5 七巧板 游戏制作记录 游戏引擎 tangide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhkhhh333/article/details/46980673
版权

上周用www.tangide.com完成了了一个新游戏 大家都来玩儿玩儿吧大笑

我绝对没收M族一毛钱, 只是正好拿他们做例子罢了



0: 在线运行: 

http://www.i5r.com.cn/apprun-upyunosgames1%7C591436940011324.html


1: 制作思路

之前在制作横屏过关类型游戏的时候都使用 创建好呢长的虚拟场景,然后不停的生成障碍物和金币的方法去实现.

那时发现这种大场景+多元素动态生成对手机性能有较高的要求. 如果短时间内触发多个事件渣点的手机容易出现卡顿现象.


这次做的<美女弹弹弹>就是带捡金币机制的<忍者弹弹弹>,打算一改这种方法 规避可能卡顿的问题.

这游戏的界面中的主角是小人,

她需要跳跃到的作为落脚点的柱子,

摔下去会淹死的多图层海水

需要无缝拼接并随着小人跳动已一定速率移动的背景图.

碰到可以加分的商品(这里用的是手机)

得分板

游戏界面上需要考虑的就只有这些. 那么该如何不自动生成新柱子 不自动生成新手机 不设置巨大的虚拟场景宽度来规避卡顿呢?


我的方法是.

1: "镜头"位置不变,

2: "小人"位置不变,

3: 玩家按下屏幕时 通过移动"柱子","手机"和"背景"让小人看起来是在往→前进.

4: 当"场景"或"柱子"消失在屏幕左侧时,将他们移动到最后一个"场景"或"柱子"后面.

这样就能保证柱子不停的出现但是不需要做删除和新增柱子的操作了. 所有元素在游戏第一次加载时就已经准备好了不用中途添加.



2: "小人","柱子"和需要展示的"商品"的初始化

小人的本体其实是弹簧! 没错, 我是用的是一个有质量的刚体座位弹簧,小人只是随着他移动的图片

win.springMove = function() {
    //spring.x = man.x+24;
    man.x = spring.x-24;
    man.y = spring.y-man.h+2;
};

游戏开始前只有一根柱子和一个商品, 游戏开始后对它们进行复制, 一共得到8个柱子 8个商品

海浪2,和海浪3的层数提高 让他们显示在柱子的上层 这样更有层次感, 其中海浪2也是小人淹死的触发器.

win.tubeInit = function() {
    console.log("dd_tubeInit");
    var baseTube = win.find(TUBE+0);
    baseTube.setPosition(50,win.h-(800-492));
    spring.setPosition(baseTube.x+5,baseTube.y-spring.h);
    man.y = (spring.y-man.h+2);
    
    for (var i=1; i<=7 ;i++) {
        if (!win.find(TUBE+i)) {
            win.dupChild(TUBE+"0").setName(TUBE+i);
        }
        win.find(TUBE+i+"/标号").setText(i);
        var x = win.getTubeX(i);
        var y = win.getTubeY(i);
        win.find(TUBE+i).setPosition(x,y);
    }
    win.find("海浪2").setZIndex(30);
    win.find("海浪3").setZIndex(32);
};

win.goodInit = function() {
    for (var i=1;i<=7;i++) {
        var tube = win.find(TUBE+i);
        if (!win.find("商品"+i)) {
            win.dupChild("商品0").setName("商品"+i);
            win.find("商品"+i+"/text").setText(i);
        }
        win.find("商品"+i).setEnable(true);
        win.find("商品"+i).setVisible(true);
        win.find("商品"+i).opacity = 1;
        win.find("商品"+i).setPosition(tube.x,tube.y-win.find("商品"+i).h);
    }
};


3: 小人跳动,柱子移动

按下屏幕的时间越久小人跳的越远 最多积蓄1秒钟的力量.

实现这点 我需要知道鼠标按下了多久.这里我使用了计时器的getElapsedTime()方法. 当然也有其他简单,和同样可靠的方法.

win.pointDown = function() {
    timer.stop();
    timer.start();
    if (manPlaying || amLanding) {
        return;
    }
    if (spring.h < springOH) {
        console.log("弹簧高度不对! 现在只有: "+spring.h);
    }
};

win.pointUp = function() {
    if (manPlaying || amLanding) {
        return;
    }
    manPlaying = 1;
    timer.pause();
    var timeGap = timer.getElapsedTime();
    
    if (timeGap > 1000) {
        timeGap = 1000;
        
    }else if (timeGap < 0) {
        timeGap = 0;
    }
    if (timeGap <= 115 && timeGap>=100) {
        timeGap = 99;//防止连按时失误
    }
    //console.log("dd_pointUp : timeGap = "+timeGap);
    win.manJump(timeGap);
    win.tubeMove(timeGap,function() {
        win.tubeXCheck();
    });
};
知道了按下时常我就可以将他转化为小人上跳的速度和柱子需要移动的距离了. 

我还计算了小人跳起来的滞空时间 以参考柱子可以用来移动的时间

win.tubeMove = function(power,onDone) {
    power = Math.ceil(power/100);// 1~10
    var distance = (MAXDISTANCE - MINDISTANCE)/10 * (power-1) + MINDISTANCE;
    var during = ((MAXTIME-MINTIME)/10 * (power-1)) + 300 ;
     
    win.bgMove(distance, during,function(){
        win.bgXCheck();
    });     
    for (var i=0;i<=7;i++) {
        var tube = win.find(TUBE+i);
        var moveLeft = {  
            duration:during,  
            xStart:tube.x,  
            xEnd:tube.x-distance,  
            //interpolator:"deceleration"
            interpolator: "l"
        };
    
        tube.animate(moveLeft,function onDone(_obj) {});
        if (win.find("商品"+i).isVisible()) {
            var good = win.find("商品"+i);
            var goodLeft = {
                duration:during,  
                xStart:good.x,  
                xEnd:good.x-distance,  
                //interpolator:"deceleration"
                interpolator: "l"
            };
            good.animate(goodLeft,function onDone(_obj) {});
        }
        if (i == 7) {
            setTimeout(function() {onDone();}, during+200);
        }
    }
};

win.bgMove = function(distance, during, onDone) {
    for (var i=2; i>=0; i--) {
        var bg = win.find(bgPic[i]);
        var bgLeft = {  
                duration:during,  
                xStart:bg.x,  
                xEnd:bg.x-(distance/3),  
                interpolator: "l"
        };
        bg.animate(bgLeft,function onDone(i) {});
        if (i === 0) {
            setTimeout(function() {onDone();}, during+100);
        }
    }
};


win.addTime = function() {//弹簧压缩效果
    if (manPlaying || amLanding) {
        return;
    }
    if (spring.h <= (1/10)*springOH) {
        console.log("dd_addTime : spring.h is Too low :"+spring.h);
        return;
    }
    spring.resize(spring.w,spring.h-1);
    man.y = spring.y-man.h+2;
};

这个样子 在我按下屏幕后小人会蹲下蓄力,松开后跳起, 柱子和背景图会左移


起跳的的姿势就完成了.




落地姿势同样主要,有弹簧会弹的效果


win.hitTheGround = function(standing) {
    if (amLanding == 1 
        || manPlaying === 0 
        || firstGame == 1
        /*|| getAPhone === 0*/) {//抢到手机才能继续跳
        return;
    }
    //spring.setDensity(0);
    if(spring.y <= win.find(TUBE+standing).y-spring.h) {//用台子接住弹簧以免在reSize时滑落.
        iPlatf.setPosition(spring.x,spring.y+spring.h);
    }
    me.playSoundEffect("跳下落地声.mp3", function onDone() {console.log("跳下落地声.mp3 play finished");});
    getAPhone = 0;
    console.log("hitTheGround : "+standing);
    win.find("计时器2").pause();//计算出飞行所花费时长
    var flyTime = win.find("计时器2").getElapsedTime();
    win.myLanding();
    //console.log("flyTime = "+flyTime);
};

win.myLanding = function() {
    if (amLanding) {
        console.log("dd_myLanding  is landing !!! ERROR");
        return;
    }
    amLanding = 1;
    //console.log("dd_myLanding  start to land");
    var time = 0;
    var springY = spring.y;
    //spring.setDensity(0);//防止reSize时站不稳摔下去
    
    function landing() {
        if (!win.children) {
            clearInterval(Interval);
            return;
        }
        if (time < (1-BOUNCE)*springOH) {
            spring.resize(spring.w, spring.h-2);
            
        }else if (time > springOH) {
            //spring.setPosition(spring.x,springY);
            spring.resize(spring.w, springOH);
            man.y = spring.y-man.h+2;
            
            setTimeout(function() {
                amLanding = 0;
                manPlaying = 0;
            }, 50);
            clearInterval(Interval);
            
        }else if (time >= (1-BOUNCE)*springOH) {
            spring.resize(spring.w, spring.h+1);
            
        }
        man.y = spring.y-man.h+2;
        time++;
    }
    var Interval = setInterval(landing,10);
};<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">myLanding实现了落地后弹簧了收缩效果. 调整这个效果花了很多时间<img alt="偷笑" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/titter.gif" /></span>



4: 柱子,背景从屏幕左边消失后需要做的操作

win.tubeXCheck = function() {
    //console.log("dd_tubeXCheck");
    for (var i=0;i<=7;i++) {
        var tube = win.find(TUBE+i);
        if (tube.x <= -(tube.w/2)) {
            win.goToRear(i);
        }
    }
};

win.bgXCheck = function() {
    for (var i=0; i<3; i++) {
        var bg = win.find(bgPic[i]);
        
        if (bg.x+480 <= 0 || isNaN(bg.x)) {
            
            if (i === 0 ){
                bg.setPosition(win.find(bgPic[2]).x + 480, 0);
            }else {
                bg.setPosition(win.find(bgPic[i-1]).x + 480, 0); 
            }
        }
    }
};

win.goToRear = function(i) {
    var x = win.getTubeX(i);
    var y = win.getTubeY(i);
    //console.log("dd_goToRear : i = "+i+" "+x+" "+y);
    //console.log("dd_goToRear : old xy = "+win.find(TUBE+i).x+"  "+win.find(TUBE+i).y);
    win.find(TUBE+i).setPosition(x,y);
    win.find("商品"+i).setPosition(win.find(TUBE+i).x, win.find(TUBE+i).y-win.find("商品"+i).h-2);
    win.find("商品"+i).setVisible(true);
    win.find("商品"+i).opacity = 1;
    win.find("商品"+i).setEnable(true);
};
循环完成!  这样就可以无限跳跃了



5: 捡"商品"加分

win.addScore = function() {
    me.playSoundEffect("成功跨格跳跃.mp3", function onDone() {console.log("成功跨格跳跃.mp3 play finished");});
    getAPhone = 1;
    score++
    win.find("得分板/分数").setText(score);
    if (!window.highScore || window.highScore < score) {
        window.highScore = score;
    }
};



6: 游戏结束 高分结算 

win.gameOver = function() {
    me.playSoundEffect("落水.mp3", function onDone() {console.log("落水.mp3 play finished");});
    //console.log("dd_gameOver : score="+score);
    var initData = {score:score,highScore:highScore};
    this.openWindow("结束界面", 
	    function (retData) {console.log("window closed.");}, true, initData);
};



更多游戏制作案例和教程可以到tangram的官网查看视频教程http://www.tangram7q.com/ 大笑



diwy
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5黄游戏,HTML5游戏-看你有多色
weixin_39615808的博客
06-04 1万+
需引入easeljs-0.7.1.min.jshtml:倒计时:60s 分数:0Rect.js,在html中需要引入:function Rect(n,color){//个数createjs.Shape.call(this);//构造方法this.setRectType = function (type) {this._RectType = type;switch (type){case 1:thi...
html5游戏开发实战-----大家来找茬
dearm23的博客
07-06 4625
相信很多人都玩过大家来找茬,美女找茬之类的游戏,其实利用tangide我们也可以轻松开发出我们自己的找茬游戏.       tangide轻松实现了我们开发游戏简单,快捷的梦想,但是,不管是开发哪一类游戏,我们首先需要做的就是程序设计,我们拿到一个游戏的开发,不要一拿到手就马上啪啪啪的写代码​,写到中途又不知道怎么去实现其中的功能,或者遇到其他什么问题让自己中断,这样的代码相信bug出现的概
Python爬虫实战：利用代理IP批量下载哔哩哔哩美女视频
努力让自己发光，对的人才能迎着光而来
06-26 13万+
Python爬虫实战：利用代理IP批量下载哔哩哔哩美女视频
共226款Html5小游戏源码分享
蒙双眼看世界
08-22 1万+
【代码】共226款Html5小游戏源码分享。
[day2]python网络爬虫实战：爬取美女写真图片(增强版)
ChatGPTer
10-13 2955
今天我们继续爬取妹子图片，通过另一种方式来实现。
【百套源码】HTML5期末大作业 - 各类网页作业源码合集
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
06-16 8944
【百套源码】HTML5期末大作业 - 各类网页作业源码合集， HTML作业源码，源码下载，内含博主整理的附带源码的资源合集，包括个人介绍相关源码，企业官网相关源码（商城，服装，农业，公司官网，食品，居家，美容，理发，运动，健身，生鲜，保洁，应用，物流，快递，电子，宠物，教育，培训，家具，花店，婚纱，灯具，鲜花等），游戏相关源码，抽奖相关源码，生日求爱表白相关源码，个人博客空间相关源码等。博主持续更新，希望能给大家带来帮助和提供灵感。
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
HTML5视频直播及H5直播扫盲
纸上得来终觉浅，绝知此事要躬行
08-15 4万+
文章来源：http://geek.csdn.net/news/detail/95188 分享内容简介： 目前视频直播，尤其是移动端的视频直播已经火到不行了，基本上各大互联网公司都有了自己的直播产品，所以对于直播的一些基本知识和主要技术点也要有所了解，本次分享就向大家介绍一下其中的奥秘。 内容大体框架: 1. 怎样利用 HTML5 来播放直播视频 2. 怎样录制直播视频 3.
Android 实战美女拼图游戏 你能坚持到第几关
Hongyang
11-03 3万+
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/40595385，本文出自：【张鸿洋的博客】1、概述继2048之后，今天给大家带来一个拼图游戏，当然了不是很传统那个缺一块的拼图，那游戏我不会玩~~所有我们换个方式玩拼图，怎么玩呢，把图片且成很多份，点击交换拼成一张完整的；这样关卡也很容易设计，3*3；4*4；5*5；6*6；...
HTML期末大作业~个人图片资源网页设计共5个页面(HTML+CSS+JavaScript)
qq_365392777
08-09 1万+
HTML期末大作业~制作个人图片资源网页5个页面(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都...
HTML5简单美女拼图游戏
12-01
这款“HTML5简单美女拼图游戏”就是利用HTML5的强大功能，结合JavaScript编程语言，为用户提供了有趣的在线游戏体验。 游戏的核心机制是基于JavaScript实现的。JavaScript是一种解释型的、跨平台的脚本语言，常用于...
H5小游戏源码 美女拼图.zip
10-14
《H5小游戏源码：美女拼图》 在数字化娱乐领域，H5小游戏因其轻量化、易分享的特点，越来越受到用户的喜爱。本资源提供的是一个名为“美女拼图”的H5小游戏源码，适合开发者研究学习，或者作为基础进行二次开发。...
原生js html5简单的美女拼图游戏源码下载
11-24
- **拖放功能**：HTML5提供了拖放API，允许用户通过拖放操作来移动拼图块。 - **点击事件**：用户可以通过点击来选择和移动拼图块。 8. **动画效果**： - **CSS3动画**：可能使用CSS3的`transition`或`animation...
H5小游戏源码 美女秀秀么么哒.zip
10-14
在"美女秀秀么么哒"这款游戏中，HTML5的Canvas可能是用于绘制游戏画面，实现动态效果的关键。Canvas允许开发者通过JavaScript代码来绘制图形，创建出各种复杂的动画效果，使游戏更具吸引力。 源码中的JavaScript是...
谷歌的 GameNGen：无需游戏引擎，人工智能模拟 “毁灭战士“，开辟新天地
weixin_41446370的博客
08-30 3015
谷歌公司的研究人员创建了一个神经网络，可以在不使用传统游戏引擎的情况下生成经典射击游戏《毁灭战士》的实时游戏，从而实现了人工智能领域的一个重要里程碑。这个名为 GameNGen 的系统标志着人工智能向前迈出了重要一步，它能在单芯片上以每秒 20 帧的速度生成可玩的游戏，每一帧都由扩散模型预测。"研究人员在发表在预印本服务器上的论文中写道："我们展示了 GameNGen，这是第一个完全由神经模型驱动的游戏引擎，它能在长轨迹上与复杂环境进行高质量的实时交互。
Matlab界面GUI设计的车牌定位[Matlab界面GUI设计].zip
最新发布
09-10
linux常用命令大全
【独家首发】基于matlab沙猫群算法SCSO-GMDH风电数据回归预测【含Matlab源码 7530期】.zip
09-10
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化GMDH回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化GMDH回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化GMDH回归预测 4.4.3 灰狼算法GWO/狼群算法WPA优化GMDH回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化GMDH回归预测 4.4.5 萤火虫算法FA/差分算法DE优化GMDH回归预测 4.4.6 其他优化算法优化GMDH回归预测
【2024首发原创】蜣螂优化算法DBO-TCN-LSTM-Multihead-Attention负荷预测Matlab实现.rar
09-10
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
加速仪6050陀螺仪simulink.rar
09-10
加速仪6050陀螺仪simulink.rar
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值