用js做一个小游戏平台 (一)


Posted in Javascript onDecember 29, 2009

记得上班写代码时,我们技术总监总说是要先“设计”,那就先“设计”吧。
ps:我是新手大家多多见谅。

.网页游戏区域。就是说需要知道游戏在网页上的区域,如下:
在网页中插入一个div,设定宽高和id,
<div id="GameFrame" style="width:400;height:400"></div>
然后再js中得到该对象,
var _GameFrame = document.getElementById("GameFrame");

.键盘参数对象:在游戏中会经常获取键盘的值,设定一个键值对应的对象:
var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37, KeyUp: 38, KeyRight: 39, KeyDown: 40, KeyESC: 27 };

.标签控制对象:用于控制、产生html标签,辅助生成对应样式的"控件":

var _HtmlControl = 
{ 
//清空网页游戏区域 
_ClearArea: function() { 
}, 
//创建一个div 
newDiv: function() { 
var div = document.createElement("div"); 
return div; 
}, 
//创建一个指定宽高的按钮样式标签 
newButton: function(w, h) { 
var div = this.newDiv(); 
div.style.width = w + "px"; 
div.style.height = h + "px"; 
div.select = function() { 
//被选中时的变化 
}; 
div.unselect = function() { 
//没选中时的样子 
}; 
return div; 
} 
//继续... 
};

.动画类:用于播放一些游戏跳转动画:

var Animation = function(endFn) { 
//播放动画 
this._play = function() { 

//具体怎么放没有想好。 
}; 
//播放结束事件 
this._palyEnd = endFn || function() { 
alert("动画播放结束"); 
}; 
};

.游戏类:要有一个游戏名,
a.控制:1.逻辑控制、2.键盘控制
b.主界面:1.标题、2.游戏区域、3.状态显示区、4.控制区
c.动画:1.开场动画、2.过关动画、3.通关动画
d:事件:1.开始、2.结束。

代码大致如下:
代码

var Game = function(name, logicalFn, keyFn) { 
//游戏名 
this._name = name || "未命名"; 
this._LControl = logicalFn || function() { 
//简单游戏逻辑控制 
}; 
this._KControl = keyFn || function(event) { 
//简单键盘逻辑 
}; 
//开场动画 
this._AnmLoad = new Animation(null); 
//过关动画 
this._AnmNext = new Animation(null); 
//通关动画 
this._AnmEnd = new Animation(null); 
};

.游戏列表:就是游戏类的对象列表。

.游戏选择器:可以是一个游戏类对象。
var _GameChoose = new Game("选择器", null, null);
.页面控制:用于注册页面事件,接受用户响应,并传递给游戏选择器;
代码

var _PageControl = { 
//8.a:线程控制 
_ThreadControl: function() { 
_GameChoose._LControl(); 
}, 
//8.b:键盘控制 
_KeyControl: function(event) { 
_GameChoose._KControl(event); 
}, 
//8.cc.事件注册 
_StartRegedit: function() { 
//把this._ThreadControl添加到循环线程 
//把this._KeyControl注册到document的键盘单击 
} 
}

最后,到了这一步,貌似就“设计”完了?暂且不管这是不是设计,姑且说是一种边敲代码边设计的设计吧。不过貌似真的就可行了。当然它现在是不能运行的。我们先把总体代码贴出来看一下:
整体代码

<script type="text/javascript"language="javascript"> 
/*** 
* 1.网页游戏区域: 
* 2.键盘参数类 
* 3.标签类:用于控制、产生html标签 
* 4.动画类:播放动画,播放结束事件 
* 5.游戏类:游戏名 
* a.控制:1.逻辑控制、2.键盘控制 
* b.主界面:1.标题、2.游戏区域、3.状态显示区、4.控制区 
* c.动画:1.开场动画、2.过关动画、3.通关动画 
* d:事件:1.开始、2.结束 
* 6.游戏列表 
* 7.游戏选择器 
* 8.页面控制:a.线程控制、b.键盘控制、c.事件注册 
***/ window.onload = function() { 
//---------------------------------------------------- 
//1.网页游戏区域: 
var _GameFrame = document.getElementById("GameFrame"); 
//---------------------------------------------------- 
//2.键盘参数类:可以根据需要把键值添加进来 
var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37, KeyUp: 38, KeyRight: 39, KeyDown: 40, KeyESC: 27 }; 
//---------------------------------------------------- 
//3.标签类:用于控制、产生html标签 
var _HtmlControl = 
{ 
//清空网页游戏区域 
_ClearArea: function() { 
}, 
//创建一个div 
newDiv: function() { 
var div = document.createElement("div"); 
return div; 
}, 
//创建一个指定宽高的按钮样式标签 
newButton: function(w, h) { 
var div = this.newDiv(); 
div.style.width = w + "px"; 
div.style.height = h + "px"; 
div.select = function() { 
//被选中时的变化 
}; 
div.unselect = function() { 
//没选中时的样子 
}; 
return div; 
} 
//继续... 
}; 
//---------------------------------------------------- 
//4.动画类:播放动画,播放结束事件 
var Animation = function(endFn) { 
//播放动画 
this._play = function() { 
}; 
//播放结束事件 
this._palyEnd = endFn || function() { 
alert("动画播放结束"); 
}; 
}; 
//---------------------------------------------------- 
//5.游戏类: 
var Game = function(name, logicalFn, keyFn, startFn, endFn) { 
//游戏名 
this._name = name || "未命名"; 
//5.a.1:逻辑控制 
this._LControl = logicalFn || function() { 
//简单游戏逻辑控制 
}; 
//5.a.2:键盘控制 
this._KControl = keyFn || function(event) { 
//简单键盘逻辑 
}; 
//5.b.1:标题区域 
this._FrameTitle; 
//5.b.2:游戏区域 
this._FrameMain; 
//5.b.3:状态显示区 
this._FrameState; 
//5.b.4:控制区 
this._FrameControl; 
//5.c.1:开场动画 
this._AnmLoad = new Animation(null); 
//5.c.2:过关动画 
this._AnmNext = new Animation(null); 
//5.c.3:通关动画 
this._AnmEnd = new Animation(null); 
//5.d.1:开始 
this._Start = startFn || function() { 
alert("游戏开始"); 
}; 
//5.d.2:结束 
this._End = endFn || function() { 
alert("游戏结束"); 
}; 
}; 
//---------------------------------------------------- 
//创建游戏 
var game1 = new Game("贪吃蛇", null, null); 
var game2 = new Game("俄罗斯方块", null, null); 
var game3 = new Game("推箱子", null, null); 
var game4 = new Game("赛车", null, null); 
var game5 = new Game("坦克大战", null, null); 
//---------------------------------------------------- 
//6.游戏列表 
var _GameList = [game1, game2, game3, game4, game5]; 
//---------------------------------------------------- 
//7.游戏选择器 
var _GameChoose = new Game("选择器", null, null); 
//---------------------------------------------------- 
//8.页面控制: 
var _PageControl = { 
//8.a:线程控制 
_ThreadControl: function() { 
_GameChoose._LControl(); 
}, 
//8.b:键盘控制 
_KeyControl: function(event) { 
_GameChoose._KControl(event); 
}, 
//8.cc.事件注册 
_StartRegedit: function() { 
//把this._ThreadControl添加到循环线程 
//把this._KeyControl注册到document的键盘单击 
} 
} 
//---------------------------------------------------- 
} 
</script> 
<div id="GameFrame" style="width:400;height:400"> 
</div>

就先这样吧,明天再让它运行一下,顺便设计一下第一个游戏:贪吃蛇。
用同事的一句话喊一下口号:不做权限设计,做全国最好的贪吃蛇,汗一个...
Javascript 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
深入理解angular2启动项目步骤
Jul 15 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
js 学习笔记(三)
Dec 29 #Javascript
js DOM模型操作
Dec 28 #Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 #Javascript
javascript iframe编程相关代码
Dec 28 #Javascript
通过javascript设置css属性的代码
Dec 28 #Javascript
JavaScript的public、private和privileged模式
Dec 28 #Javascript
Javascript 面向对象特性
Dec 28 #Javascript
You might like
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python splitlines使用技巧
2008/09/06 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
应用数学专业求职信
2014/03/14 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
党员创先争优活动总结
2014/05/04 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
建筑安全责任书范本
2014/07/24 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js