html js 做的小游戏,用js做一个小游戏平台 (一)
记得上班写代码时,我们技术总监总说是要先“设计”,那就先“设计”吧。
ps:我是新手大家多多见谅。
.网页游戏区域。就是说需要知道游戏在网页上的区域,如下:
在网页中插入一个div,设定宽高和id,
然后再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的键盘单击
}
}
最后,到了这一步,貌似就“设计”完了?暂且不管这是不是设计,姑且说是一种边敲代码边设计的设计吧。不过貌似真的就可行了。当然它现在是不能运行的。我们先把总体代码贴出来看一下:
整体代码
/***
* 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的键盘单击
}
}
//----------------------------------------------------
}
就先这样吧,明天再让它运行一下,顺便设计一下第一个游戏:贪吃蛇。
用同事的一句话喊一下口号:不做权限设计,做全国最好的贪吃蛇,汗一个...
html js 做的小游戏,用js做一个小游戏平台 (一)相关推荐
- 小程序教程1:初识小程序,快速搭建一个小程序项目
前言: 打算整理一个小程序系列的资料.如何快速搭建一个小程序项目,以及一个小程序项目应该有哪些内容. 相关资料: 微信公众平台微信公众平台,给个人.企业和组织提供业务服务与用户管理能力的全新服务平台. ...
- 小程序多少钱?一个小程序多少钱?
对于需要开发小程序的企业来说,价格是最重要的.现在各大搜索引擎都有很多公司团队推荐小程序开发.那么小程序多少钱?一个小程序多少钱?让我们简单分析两种开发类型. 小程序多少钱?一个小程序多少钱? 一.中 ...
- 怎么创建小程序?如何创建一个小程序呢?
怎么创建小程序?如何创建一个小程序呢?关于怎么创建小程序,是对于一些初次接触小程序或者是想拥有小程序的企业商家来说首先想要搞清楚的问题,其实创建小程序的方法很简单,下面就给大家简单介绍一下怎么创建小程 ...
- 用python做一个简单的游戏,用python写一个小游戏
大家好,本文将围绕如何用python做一个简单的小游戏展开说明,python编写的入门简单小游戏是一个很多人都想弄明白的事情,想搞清楚用python做一个简单的游戏需要先了解以下几个事情. 1.Pyt ...
- 表白小游戏教程:制作一个小游戏送给喜欢的TA(不会编程也能学会哦)
大家好哇~ 欢迎翻开波波和阿菌的长篇故事~ 不过捏,今天我们不讲故事,今天将由阿菌和大家分享一个小教程:教大家制作一个小游戏,可以用来送给喜欢的人.无须任何计算机专业基础,只要能操作电脑,并在初一的数 ...
- python编程小游戏-使用Python写一个小游戏
引言 最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规的项目开发流程,手把手教大家写个python小游戏,来感受下 ...
- 微信小程序开发打开另一个小程序的实现方法
微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json {..." ...
- 游戏服务器多少钱一个月 游戏服务器配置怎么选择
随着互联网的日益普及,网上游戏(包括单机游戏.网页游戏.网络游戏)便成为当下一种比较流行的娱乐消遣活动 游戏作为一种新兴的行业并不断的盛行,网络公司只需在初期运行阶段投入一批资金购置高性能的游戏服务器 ...
- 当前小程序 跳转 另一个小程序支付(跳转到当前小程序的某个页面)
需求:当前小程序 跳转到集团小程序来支付,集团支付唤起微信支付,点击完成 时,跳转到商品详情,因商品详情是从前一个页面需要传值的. 前提提示:用的uniapp 框架 , 商品详情需要传值 **我用的方 ...
- uniapp 一个小程序跳转另一个小程序跳转过来的
跳转的小程序: 在本小程序pages.json里声明要跳转到的小程序的appid 在pages.json写上 要跳转的小程序的id "navigateToMiniProgramAppIdL ...
最新文章
- 数据结构与算法(3-1)栈(顺序栈、两栈共享空间、链栈、栈的计算器)
- Hibernate Annotation 学习
- 文本文件变身电子表格
- BIOS MCSDK 2.0 User Guide 示例学习
- 微服务限流Sentinel讲解(二)
- 其它项目中引用AirSIm模块报错NullReferenceException: Object reference not set to an instance of an object
- java stop和int,JAVA并发任务中止的isinterrupted,interupted()
- Emmet 文档下载,所有快捷键总结
- 循环 计算数值的整数次幂
- 小区广播背景音乐系统IP网络广播解决方案
- Angular 字符串替换
- 计算机磁盘修复工具,CHKDSK磁盘修复工具使用教程
- LLVM LLD COFF格式分析
- office2003安装包下载,专业版完整版官方原版!
- 台式计算机怎么查看网卡号,怎么查看台式机电脑有没有无线网卡?
- 迪文屏DMT12800K070_A2WTC踩坑实录(二)
- 分享-IE游览器升级工具
- 区块链与联邦学习综述
- ASO优化:关键词排名下降的原因及策略解析
- 利用EXCEL自动生成20以内加减法