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

记得上班写代码时,我们技术总监总说是要先“设计”,那就先“设计”吧。
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>

就先这样吧,明天再让它运行一下,顺便设计一下第一个游戏:贪吃蛇。
用同事的一句话喊一下口号:不做权限设计,做全国最好的贪吃蛇,汗一个...

(0)

相关推荐

  • js实现大转盘抽奖游戏实例

    本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • 纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS五子棋(各浏览器兼容) 效果图:  代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/

  • js猜数字小游戏的简单实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • JavaScript 打地鼠游戏代码说明

    演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑):  说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码 代码如下: <style> #panel{height:300px;width:300px;background:#cc

  • node.js适合游戏后台开发吗?

    网站服务器和游戏服务器是怎么样联系到一起的? 1. 游戏分很多种,咱们先来看看MMORPG. 再怎么简单的RPG服务器都免不了处理多人交互的情形,上百人在同一个场景里面,每个客户端都需要收到其他所有人的操作信息. 其次,用户的操作是非常频繁的,一般的服务器倾向于持有长连接.而且这些链接的是频繁交互的,没有明显的持久的分区策略,所以限制了服务器的横向扩展,同一个场景往往只能放在一个物理机上面运行. 再次,端游通常是不敢把逻辑运算放客户端的,用户分分钟给你破解掉,改改金币,刷两件装备再常见不过了.所

  • javascript实现消灭星星小游戏简单版

    来看看实现的效果图 游戏规则:双击颜色一样的星星,双击相同的部分就消失了 实例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" content="target-densitydpi=320,width=640,user-scalable=no" /> <noscript><meta http-equiv="refresh"

  • javascript 制作坦克大战游戏初步 图片与代码

    学了一阵子的javascript,该做点东西,虽然东西还是东拼西凑,见笑.方向键控制坦克移动,回车键发射炸弹.其他的功能敌方坦克那些还没写. javascript坦克游戏初步|阿会楠练习作品 body{ background:black; } #tanke{ position:absolute; left:500px; top:200px; } var i = 0; var bombLeftArray = new Array(100);//存放炸弹信息x var bombTopArray = n

  • js方块躲避游戏代码

    鼠标拖动红色方块,就可以开始,不要让蓝色方块碰到你控制的红色方块 www.jb51.net我们 Escapa!红方块躲避游戏 isNS4 = (document.layers) ? true : false; isIE4 = (document.all && !document.getElementById) ? true : false; isIE5 = (document.all && document.getElementById) ? true : false; i

  • JS写的贪吃蛇游戏(个人练习)

    JS贪吃蛇游戏,个人练习之用,放在这备份一下,   复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t

  • JS 拼图游戏 面向对象,注释完整。

    在线演示 http://img.jb51.net/online/pintu/pintu.htm 复制代码 代码如下: <html> <head> <title>JS拼图游戏</title> <style>     body{         font-size:9pt;     } table{ border-collapse: collapse; } input{     width:20px; } </style> </he

随机推荐