用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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
点图片上一页下一页翻页效果
Jul 09 Javascript
javascript iframe内的函数调用实现方法
Jul 19 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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框架Laravel的小技巧两则
2015/02/10 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python操作SQLite简明教程
2014/07/10 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
北承题目(C++)
2012/05/16 面试题
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python