单Js 的重力游戏开发
最近在用看cocos的时候萌生的想法，单纯js实现重力原理。然后就做了一个这样的小游戏。姑且命名为《超级玛丽》！
因为之前有人要我做超级玛丽。哈哈哈哈哈哈！这也算完成任务了吧。
先说一下原理吧。原理就是嗖~嗖~嗖~。
好了正经的说下：
是否处于跳跃中
self.isJump = false;
是否在地板上
self.canJump = false;
挑起的时间，时间越久上升速度越慢
self.JumpTimes = 0;
下降的时间，时间越久下降速度越块
self.downTimes = 0;
游戏运行时间周期（0~10）。判断地板块位置
self.times = 0;
//重力加速度大小 范围1~10，越大下降越快。挑起小
self.d2 = 2;
// 预设 地板块。可通过自定义函数设置
self.floorArry = [100, 0, 50, 100, 170, 0, 100, 50, 50, 0, 100, 200, 150, 0, 75];
跳： window.d2.jump
开始游戏：self.srartGame
结束游戏：self.endGame
设置地板快生成函数： self.setFloorFunc
开发者函数体 window.d2Init
示例代码：
<!DOCTYPE html>
<html> <head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>SupperML</title>
<style type="text/css">
body {
margin-right: auto;
margin-left: auto;
padding-left: auto;
padding-right: auto;
width: 500px;
height: 300px;
z-index: 1;
} .floor {
width: 10px;
height: 10px;
float: left;
margin: 0;
z-index: 4;
background-color: darkgreen;
} .WFloor {
width: 10px;
height: 10px;
float: left;
margin: 0;
z-index: 4;
} #game_area {
margin-left: auto;
margin-right: auto;
position: absolute;
width: 500px;
height: 300px;
z-index: 3;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function() {
var self = {};
//is jump;
self.isJump = false;
//gameObj on the floor;
self.canJump = false;
//jump time <14
self.JumpTimes = 0;
//down times
self.downTimes = 0;
//down times
self.times = 0;
//重力加速度
self.d2 = 2;
//width 10px*10, array length 6, 0:no floor show:5
self.floorArry = [100, 0, 50, 100, 170, 0, 100, 50, 50, 0, 100, 200, 150, 0, 75];
//strat game
var _Srart = function() {
_SetFloorElem();
},
//重力模拟
_D2Weight = function() {
var gameObj = document.getElementById('game_obj');
var floorObj1 = document.getElementById('2xy5');
var floorObj2 = document.getElementById('2xy6');
if (!self.isJump) {
if ((Math.abs((parseInt(gameObj.style.marginTop) + parseInt(gameObj.style.height)) - parseInt(floorObj1.style.marginTop)) < 10 + (2 * self.d2))) {
self.canJump = true;
self.downTimes = 0;
gameObj.style.marginTop = parseInt(floorObj1.style.marginTop) - parseInt(gameObj.style.height) + "px";
} else {
self.canJump = false;
self.downTimes++;
gameObj.style.marginTop = parseInt(gameObj.style.marginTop) + self.downTimes * self.d2 + 'px';
if (parseInt(gameObj.style.marginTop) > 500) {
self.endGame();
}
}
} else {
if (20 < self.JumpTimes * self.d2) {
self.JumpTimes = 0;
self.isJump = false;
self.downTimes = 0;
return;
}
if (Math.abs(parseInt(floorObj1.style.marginTop) + 10 - parseInt(gameObj.style.marginTop)) < 5) {
self.JumpTimes = 0;
self.isJump = false;
self.canJump = false;
} else {
self.JumpTimes++;
self.canJump = false;
gameObj.style.marginTop = parseInt(gameObj.style.marginTop) - 20 + self.JumpTimes * self.d2 + 'px';
}
}
},
//设置地板元素
_SetFloorElem = function() {
self.times += 1;
if (self.times == 10) {
self.times = 0;
}
var index = 0;
for (var i2 = 0; i2 < 5; i2++) {
for (var j2 = 0; j2 < 10; j2++) {
var oLi = document.getElementById(i2 + "xy" + j2);
if (self.times + j2 < 10) {
index = i2;
} else {
index = i2 + 1;
}
if (self.floorArry[index]) {
oLi.style.display = "floor";
oLi.style.marginTop = self.floorArry[index] + "px";
} else {
oLi.style.className = "WFloor";
oLi.style.marginTop = 5000 + "px";
}
}
}
},
//初始化游戏元素
_InitGame = function() {
var oFrag = document.createDocumentFragment();
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 10; j++) {
var oLi = document.createElement("div");
oLi.id = i + "xy" + j;
oLi.className = 'floor';
//oLi.style.marginLeft = i * 100 + j*10 + "px";
oFrag.appendChild(oLi);
}
}
document.getElementById("game_area").appendChild(oFrag);
document.onkeyup = function(event) {
var e = event || window.event;
var keyCode = e.keyCode || e.which;
switch (keyCode) {
case 32:
self.jump();
break;
default:
break;
}
}
setInterval(_setFloor, 1000);
},
//设置地板位置
_setFloor = function() {
var top = self.func ? self.func() : 200;
if (top != 0 && ((self.floorArry[19] - self.floorArry) > 200 / self.d2)) {
top = self.floorArry[19] - 200 / self.d2;
}
self.floorArry.splice(0, 1);
self.floorArry.push(top);
};
var gameRole = document.getElementsByClassName('gameObj');
//跳
self.jump = function() {
if (self.canJump) {
self.isJump = true;
self.JumpTimes = 0;
}
}
//开始游戏
self.srartGame = function() {
if (self.timer) {
return;
}
_InitGame();
self.sTime = new Date();
self.timer = setInterval(_Srart, 100);
self.D2Weight = setInterval(_D2Weight, 100); }
//游戏结束
self.endGame = function() {
alert((Date.now() - self.sTime.getTime()) / 1000 + 's');
self.sTime
clearInterval(self.timer);
clearInterval(self.D2Weight);
location.reload();
}
//设置地板数据生成函数
self.setFloorFunc = function(func) {
self.func = func;
}
document.getElementById('jump').onclick = self.jump;
document.getElementById('start').onclick = self.srartGame;
window.d2 = self;
window.d2Init && window.d2Init();
};
</script>
</head> <body>
<div id="game_area">
<div id="game_obj" style="margin-left: 250px; margin-top:10px; position: absolute; z-index: 1; width: 17px; height: 20px; background-color: blueviolet;">69</div>
<button id="start" style="margin-left: 50px; margin-top:200px; position: absolute; z-index: 1;">Start</button>
<button id="jump" style="margin-left: 400px; margin-top:200px; position: absolute; z-index: 1;">Jump</button>
</div>
</body>
<script type="text/javascript">
window.d2Init = function() {
window.d2.setFloorFunc(
function() {
return window.d2.floorArry[0];
}
) }
</script> </html>
一个鸡蛋去茶馆喝茶，结果它变成了茶叶蛋；
一个鸡蛋跑去松花江游泳，结果它变成了松花蛋；
一有个鸡蛋跑到了山东，结果变成了鲁（卤）蛋；
一个鸡蛋无家可归，结果它变成了野鸡蛋；
一个鸡蛋在路上不小心摔了一跤，倒在地上，结果变成了导弹；
一个鸡蛋跑到人家院子里去了，结果变成了原子弹；
一个鸡蛋跑到青藏高原，结果变成了氢弹；
一个鸡蛋生病了，结果变成了坏蛋；
一个鸡蛋嫁人了，结果变成了混蛋；
一个鸡蛋跑到河里游泳，结果变成了核弹；
一个鸡蛋跑到花丛中去了，结果变成了花旦；
一个鸡蛋骑着一匹马，拿着一把刀，原来他是刀马旦；
一个鸡蛋是母的，长的很丑，结果就变成了恐龙蛋；
一个鸡蛋是公的，他老婆在外面和别的鸡蛋通*，结果他变成了王八蛋；
一个鸡蛋……
哈....哈哈.....哈哈哈........哈哈哈哈.....
单Js 的重力游戏开发的更多相关文章
- 学习笔记：Stage.js（又叫Cut.js）——2D canvas 开发库，游戏方面的
http://piqnt.com/stage.js/ http://www.bootcdn.cn/stage.js/ Stage.js(可能又叫Cut.js)是一个2D HTML5 JavaScrip ...
- HTML5游戏开发引擎Pixi.js新手入门讲解
在线演示 本地下载 这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...
- nodejs五子棋online游戏开发视频教程，客户端cocos creator js
开发的游戏是五子棋online,网络版的,服务端部分和客户端部分都在这个教程里面,可以看一下目录! 服务器nodejs游戏开发教程 使用Nodejs开发网络服务器 游戏服务端 ,cocos creat ...
- 算法、数据结构、与设计模式等在游戏开发中的运用 （一）：单例设计（Singleton Design)
算法.数据结构.与设计模式等在游戏开发中的运用 (一):单例设计(Singleton Design) 作者: Compasslg 李涵威 1. 什么是单例设计(Singleton Design) 在学 ...
- 8、Cocos2dx 3.0三，找一个小游戏开发3.0存储器管理的版本号
重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27693365 复杂的内存管理 移动设备上的硬件资源十 ...
- HTML5游戏开发系列教程8(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...
- Erlang游戏开发-协议
Erlang游戏开发-协议 选择什么协议? 协议包含通讯协议和数据格式. 通讯协议 通讯协议目前常用的是:HTTP 和TCP .其有各自的特点根据游戏的特点而进行选择. HTTP HTTP比较成熟,使 ...
- 作为前端的你，CC游戏开发可以上车
1. 初来乍到 打开 Cocos Creator 点击新建空白项目,在默认布局的左下区域,一个黄黄assets文件夹映入眼帘.作为前端的你对这个文件是不是再熟悉不过了.是的,和你想象的一样,开发游戏中 ...
- Aery的UE4 C++游戏开发之旅（1）基础对象模型
目录 UObject Actor种类 AActor APawn(可操控单位) AController(控制器) AGameMode(游戏模式) AHUD(HUD) ... Component种类 UA ...
随机推荐
- ES3：ElasticSearch 索引
ElasticSearch是文档型数据库,索引(Index)定义了文档的逻辑存储和字段类型,每个索引可以包含多个文档类型,文档类型是文档的集合,文档以索引定义的逻辑存储模型,比如,指定分片和副本的数量 ...
- Linux实战教学笔记25:自动化运维工具之ansible (一)
第二十五节 ansible之文件的批量分发 标签(空格分隔): Linux实战教学笔记-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品,允许转 ...
- OpenStack/devstack with Neutron on Ubuntu 14 (2)
在前面的文章中,已经完成了devstack的安装.下面,我会介绍如何使用neutron 首先创建两个neutron net, vmnet1 和vmnet2 stack@ubuntu:~/devstac ...
- Android OS体系结构详解
Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统.中间件.用户界面和应用软件组成,号称是首个为移动终端打造的真正开放和完整的移动软件. 架构详解 下 ...
- JavaScript-变量的作用域面试题
块级作用域 - 在其他的语言中,任何一对花括号中的语句都属于一个块,在这之中定义的所有变量在代码块外是不可见的 - JavaScript中没有块级作用域 //这里只有函数中定义的变 ...
- 2.WP8.1开发_在顶部显示标题和进度
有时候加载页面的时候,需要在信号那一栏显示进度,或者把信号栏改成标题 1.确保显示状态栏.默认显示.如果不显示,可以在应用程序启动后手动用代码显示,代码如下: //取得状态栏 StatusBar ba ...
- python 附加作业01
题目1: 画方块 输入样例: 10 a 输出样例: 代码: N=eval(input()) c=input() for i in range(N): for j in range(N): print( ...
- 在线上服务器上无管理员权限下升级NodeJS版本
前言 最近发现一个线上机器的问题,是因为node版本过低导致的,线上机器的node版本还是0.x版,遂打算升级node版本. 但是发现常规的npm包的n模块无法使用,提示没有权限创建文件夹,导致nod ...
- iOS 将对象的属性和属性值拆分成key、value，通过字符串key来获取该属性的值
这篇博客光看标题或许就会产生疑问,某个对象,只要它存在某个属性,且值不是空的,不就能直接用点方法获取吗,为什么要拆分成key和value多此一举呢?下面,我用一个例子告诉大家,既然这方法是存在的,那就 ...
- 数据结构(三) 用java实现七种排序算法。
很多时候,听别人在讨论快速排序,选择排序,冒泡排序等,都觉得很牛逼,心想,卧槽,排序也分那么多种,就觉得别人很牛逼呀,其实不然,当我们自己去了解学习后发现,并没有想象中那么难,今天就一起总结一下各种排 ...