先看一下实际的成果:

PC玩法:点击打开链接

手机下方扫描二维码玩

开始讲解之前,打个广告,欢迎html5游戏开发爱好者扫描下方二维码或者搜群号223466431,加入开发者QQ群,我们免费提供最快速的开发工具,我们的所有html5游戏都开源。

整个游戏的开发,基于在线H5游戏开发工具TangIDE,相关开发文档点击这里,开发视频正在制作中…如果您致力于开发H5轻应用,请点这里

1. 准备工作

浏览器打开TangIDE链接,右上角有登陆按钮,选择QQ登陆。 
浏览器推荐谷歌浏览器或者猎豹浏览器。

2. 创建第一个场景

这个场景比较简单没有什么好讲的。

3. 创建第二个场景

游戏场景布局比较中要:

人物我是选则四边形刚体:通过添加大小是人刚好角的中间这样比较合理,用其它刚体会引入形状带入的各种缺陷
还有一个就好调节楼梯对应的刚体的上下边距是使人可以在楼梯中间跑动和怪物可以在楼梯中间来回移动:
得分和结束加载我设置成了:不随场景滚动,这里因为有虚拟高度所以需要调节他们y轴的坐标。下图是得分的坐标,加载调到中间就可以了。
还有就是人物动画了,可以参考我以前讲的几个博客。

4. 创建第三个场景

5. 创建第四个场景

4,5场景都比较简单就不做讲解了。

6. 编写代码(游戏部分的主要逻辑)

窗口打开前事件:
var me = this;
var win = this.getWindow();
win.resetGame();
//显示对象
var person     = win.find("人");
var monster    = win.find("怪物");
var road       =  win.find("路");
var casement   = win.find("窗户");var SPACE_DEFINE = Math.floor(win.h/3);
var YOFFSET_DEFINE = 100000;
var GRAVITY= 25;
win.initVar = function(){win.setOffset(0,YOFFSET_DEFINE); win.arrayMonster = Array();win.arrayRoadAndCasement = Array(); win.arraySensor = Array();win.totalArrayLength = 1;win.high = initData;win.score = 0;win.find("得分底").setVisible(true);win.find("得分底/得分").setValue(win.score);win.pointUpFalg = true;win.pointDownFlag = false;win.jump = true;win.sensorContactFlag = true;win.directionRoad = road;
};
//人与路碰撞路的动画
function onBeginContactRoad(body, contact){var element = body.element;//比较控件的名字var self = this;if(element.name === "人"){win.directionRoad = this;if(person.x < this.x){if(self.roadContactFalg && !win.sensorContactFlag){self.roadContactFalg = false;win.sensorContactFlag = true;win.jump = true;self.setBgImage(1);setTimeout(function() {self.setBgImage(0);}, 100);}}}
}
//路和窗户的复制
win.dupRoadAndCasement = function(){var roadAndCasement ={roadDup:win.dupChild("路"),casementDup:[],sensor:win.dupChild("感应器")};var roadDupY = win.totalArrayLength * SPACE_DEFINE + 50;roadAndCasement.roadDup.setPosition( roadAndCasement.roadDup.x , YOFFSET_DEFINE - roadDupY);//窗户设置在不同的地方casementNumber = Math.floor(Math.random() * 2 )+2;var casementSpace = (win.w - casementNumber * casement.w)/(casementNumber + 1);for(var i = 0; i < casementNumber ; i++){roadAndCasement.casementDup[i] = win.dupChild("窗户");var casementDupX = casementSpace * ( i + 1 ) + i * casement.w;//设置窗户X方向的位置roadAndCasement.casementDup[i].setPosition( casementDupX , YOFFSET_DEFINE - roadDupY - roadAndCasement.casementDup[i].h * 7 / 5 );var casementPic = Math.floor(Math.random() * 2 );roadAndCasement.casementDup[i].setImageSrc(casementPic);}win.totalArrayLength++;win.arrayRoadAndCasement.push(roadAndCasement);var arrayLength = win.arrayRoadAndCasement.length-1;win.arrayRoadAndCasement[arrayLength].roadDup.roadContactFalg = true;win.arrayRoadAndCasement[arrayLength].roadDup.onBeginContact = onBeginContactRoad;return roadDupY;
};
//怪兽的移动
function MonsterOnMove(){var v = this.getV();//改变运动的方向if( this.x <= 0 ){this.setV( -v.x, v.y );}if( this.x+this.w >= win.w ){this.setV( -v.x, v.y );}if(v.x > 0){this.flipX = false;}else{this.flipX = true;}
}
//怪兽复制                /*怪物的种类   最大速度 */
win.dupMonsterr = function(monsterrPic,monsterrMaxV){if(monsterrPic < 0){return;}var roadDupY = win.dupRoadAndCasement();//路和窗户的复制,返回路y轴坐标if(monsterrMaxV < 0){monsterrMaxV = -monsterrMaxV;}//复制怪兽,设置怪兽对应的图片,怪兽的x方向运动的速度var monsterrDup = win.dupChild("怪物");var number = Math.floor(Math.random() * monsterrPic);var monsterrVX = Math.random() *  monsterrMaxV;//怪兽出现的不同位置,运动方向也不同if(Math.random() >= 0.5){monsterrDup.setPosition( win.w - monsterrDup.w , YOFFSET_DEFINE - (roadDupY + monsterrDup.h) );monsterrDup.setV(-monsterrVX-0.9 , 0 );}else{monsterrDup.setPosition( 0 ,  YOFFSET_DEFINE - (roadDupY + monsterrDup.h));monsterrDup.setV( monsterrVX+0.9 , 0);}//定义刚体的onMove事件monsterrDup.handleOnMoved = MonsterOnMove;win.arrayMonster.push(monsterrDup);return roadDupY;
};/***********************************感应器******************************************/
var end = win.find("结束感应器");
function onBeginContactSensor(body, contact){var element = body.element;//比较控件的名字var self = this;if(element.name === "人"){if(self.sensorContactFalg){self.sensorContactFalg = false;win.sensorContactFlag = self.sensorContactFalg;win.score++;win.find("得分底/得分").setValue(win.score);end.setPosition(0,end.y - SPACE_DEFINE);monster.setPosition(0,monster.y - SPACE_DEFINE); win.jump = false;win.dupSensor();if(person.y < win.directionRoad.y){if(win.directionRoad.roadContactFalg){win.directionRoad.roadContactFalg  = false;win.directionRoad.setBgImage(1);setTimeout(function() {win.directionRoad.setBgImage(0);}, 100);}}me.playSoundEffect("上一个.mp3", function onDone() {console.log("play finished");});}}
}
win.dupSensor = function(){var roadDupY = win.dupMonsterr(1,1);var sensor = win.dupChild("感应器");sensor.setPosition(0, YOFFSET_DEFINE - roadDupY - person.h/4);win.arraySensor.push(sensor);var length = win.arraySensor.length;win.arraySensor[length - 1].sensorContactFalg = true;win.arraySensor[length-1].onBeginContact = onBeginContactSensor;//删除多余的数组if(win.arraySensor.length > 5){var removeMonster = win.arrayMonster.shift();removeMonster.remove();var removeRoadAndCasement = win.arrayRoadAndCasement.shift();removeRoadAndCasement.roadDup.remove();var lengthArray = removeRoadAndCasement.casementDup.length;for(var i = lengthArray - 1; i >= 0 ;i--){removeRoadAndCasement.casementDup[i].remove();}var removeSensor = win.arraySensor.shift();removeSensor.remove();}
};
/********************************************************************/
win.initVar();
win.dupSensor();
win.dupSensor();
win.dupSensor();
win.contact = false;
var ground = win.find("得分底");
var index = win.arrayMonster[win.arrayMonster.length - 1].getZIndex();
win.personY = 0;
ground.setZIndex(index);
/*********************************人************************************************/
var STATE_LEFT_RUN = 0;
var STATE_LEFT_JUMP  = 1;
var STATE_RIGHT_RUN = 2;
var STATE_RIGHT_JUMP = 3;
win.gameState = STATE_RIGHT_RUN;
function stateToAction(state) {switch (state) {case STATE_LEFT_RUN:return "zuo";case STATE_RIGHT_RUN:return "you";case STATE_LEFT_JUMP:return "zuotiao";case STATE_RIGHT_JUMP:return "youtiao";}
}
function setAction() {win.find("人/人动画").play(stateToAction(win.gameState),1, function(){if(!win.children) {return;}setAction(); });
}
setAction();
/*************************************************/
person.onBusyJumpFlag = false;
person.timeJump = 0;
person.setV(2.5,0);
function personOnMove(){if(win.contact){//和怪物了发生碰撞return;}var v = this.getV();//改变运动的方向var newState = STATE_RIGHT_RUN;win.personJumpBusyVy = (Math.abs(win.personVy - v.y) > 0.01);console.log("win.personJumpBusyVy" + win.personJumpBusyVy);if(win.personJumpBusyVy){newState = STATE_RIGHT_JUMP;}else { //if(win.personJumpBusyVy){newState =  STATE_RIGHT_RUN;}if(win.pointDownFlag === true){person.setSensor(true);//newState = STATE_RIGHT_JUMP;var index = win.arrayMonster[win.arrayMonster.length - 1].getZIndex();person.setZIndex(index);ground.setZIndex(index);if(win.jump){v.y = -6;}}if(newState != win.gameState) {win.gameState = newState;setAction();}if(v.y >= 0){person.setSensor(false);}if( this.x <= 0 ){this.setV( -v.x, v.y );win.find("人/人动画").flipX = false;}if( this.x + this.w >= win.w ){this.setV( -v.x, v.y );win.find("人/人动画").flipX = true;}if(this.y === win.personY){win.jump = true;}win.personVy = v.y;win.personY = this.y;
}
person.handleOnMoved = personOnMove;

指针按下事件:

var me = this;
var win = this.getWindow();
if(beforeChild){return;
}
if(!win.personJumpBusyVy){win.pointDownFlag = true;if(!win.contact){me.playSoundEffect("跳跃.mp3", function onDone() {console.log("play finished");});}
}

指针松开事件:

var me = this;
var win = this.getWindow();
if(beforeChild){return;
}
win.pointDownFlag = false;

如果有疑问或者指教,欢迎加群223466431讨论或者发邮件,有些地方可能学的不是很好望谅解,谢谢!

HTML游戏实战之《跳楼梯》相关推荐

  1. Swift游戏实战-跑酷熊猫 12 与平台的碰撞

    原文:Swift游戏实战-跑酷熊猫 12 与平台的碰撞 这节主要实现熊猫和平台的碰撞,实现熊猫在平台上奔跑 要点 对平台进行物理属性设置 //设置物理体以及中心点 self.physicsBody = ...

  2. Swift游戏实战-跑酷熊猫 07 平台的移动

    原文:Swift游戏实战-跑酷熊猫 07 平台的移动 这节内容我们来实现平台是怎么产生移动动画的. 要点 1 利用数组存放平台 var platforms=[Platform]() 2 有新的平台产生 ...

  3. C语言:跳楼梯问题(斐波那契数列)(vs)(递归)

    一,问题: 小只因跳楼梯: 众所周知美国校队只因一次可以跳上1级台阶,也可以跳上2级.求该只因跳上一个n级的台阶总共有多少种跳法? 二,思路: /*从逆向想: x层的走法其实就是其前一层或前两层的走法 ...

  4. 【微信小游戏实战】零基础制作《欢乐停车场》一、游戏设计

    1.游戏立项 微信小游戏中有一款<欢乐停车场>的小游戏,大家可以搜索玩下.这是一款益智类的小游戏,游戏中有红.黄.绿.蓝.紫5辆豪车6个停车位,玩家通过可行走路线移动小车,最终让各颜色的小 ...

  5. scratch跳一跳游戏脚本_跳一跳游戏:经典跳一跳2微信小游戏,点开既玩

    沐沐带你发现好游戏! <跳一跳>小游戏好玩吗? <跳一跳>小程序怎么进入游戏? 文章下拉到底部, 点最后一个图片进入游戏 ---------- 只有你想不到, 没有我找不到的好 ...

  6. 【微信小游戏实战】零基础制作《欢乐停车场》二、关卡设计

    1.游戏立项 微信小游戏中有一款<欢乐停车场Plus>的小游戏,大家可以搜索玩下.这是一款益智类的小游戏,游戏中有红.黄.绿.蓝.紫5辆豪车6个停车位,玩家通过可行走路线移动小车,最终让各 ...

  7. Swift游戏实战-跑酷熊猫 01 创建工程导入素材

    原文:Swift游戏实战-跑酷熊猫 01 创建工程导入素材 在这节里,我们将建立一个游戏工程,并导入一些必要的素材,例如序列帧动画文件,声音素材文件.动画文件我们使用atlas形式.在打包发布或者模拟 ...

  8. python 写游戏好简单啊,我用键盘可以随意控制角色了【python 游戏实战 04】

    前言 本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新手在学习中的一般问题.此系列将会持续更新,包括别的语言以及实战都将使用对话的方式进行教学,基础编程语言教学适用于零基础小白,之后实战课 ...

  9. 这是我第一次使用代码创建出一个窗口【python 游戏实战 01】

    前言 本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新手在学习中的一般问题.此系列将会持续更新,包括别的语言以及实战都将使用对话的方式进行教学,基础编程语言教学适用于零基础小白,之后实战课 ...

  10. 《看聊天记录都学不会Python到游戏实战?太菜了吧》(8)我们开始做一个数字小游戏吧

    本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新手在学习中的一般问题.此系列将会持续更新,包括别的语言以及实战都将使用对话的方式进行教学,基础编程语言教学适用于零基础小白,之后实战课程也将 ...

最新文章

  1. IIS 7.5 + FastCGI + PHP + Drupal 7 + Oracle
  2. kml 解析 java_KML文件解析显示在地图
  3. Java核心技术卷I基础知识3.6.6 码点与代码单元
  4. 关于AttributeError:‘Flask‘ object has no attribute ‘ensure_sync‘的报错解决
  5. 手把手教你用jQuery实现手动自动轮播
  6. 完全用 gnu/linux 工作,怎样完全用 GNU/Linux 工作
  7. php pdo操作mysql_PHP操作数据库详细(PDO)
  8. AIX 文件操作和AIX 目录操作
  9. 非常全的VS Code快捷键
  10. (89)Verilog HDL系统函数和任务:$fwrite
  11. PyTorch 1.0 中文文档:torch.onnx
  12. 单机到集群的WEB架构演变
  13. Python-png转换成jpg
  14. Vcc(电源)和GND(地)之间接电容的作用
  15. 从古代遗传下来的设计值得一看!
  16. 5 秒克隆声音「GitHub 热点速览 v.21.34」
  17. 配饰 女生的第二件衣服
  18. 关于电话电子邮件诈骗的骨感
  19. linux 操作系统:setenv
  20. Java正则表达式提取字符的方法实例

热门文章

  1. NBA历史连胜记录和连胜记录及不可超越的记录
  2. 【Simulink教程案例12】基于BPSK+costas环载波同步的simulink建模与仿真分析
  3. ios开发初级篇(上)
  4. 23.Flink-高级特性-新特性-Streaming Flie Sink\介绍\代码演示\Flink-高级特性-新特性-FlinkSQL整合Hive\添加依赖和jar包和配置
  5. 大厂争先成立的 “开源办公室” 有啥门道?
  6. Fixflow引擎解析(三)(模型) - 创建EMF模型来读写XML文件
  7. Python—类私有化属性和方法
  8. Pycharm中安装GDAL库
  9. C语言在屏幕上输出玫瑰花图片
  10. 小程序HOOK 小程序code、小程序sessionid、小程序云函数、小程序支付二维码 支持抢购小程序模拟认证