php在线对弈,【图片】手把手开始制作HTML5在线五子棋对弈游戏【编程吧】_百度贴吧...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
本次课题:制作HTML5在线五子棋对弈游戏。
预计开发周期:还没想好看心情,先预计7天完成。
备注:最近做学校课题有关数据挖掘的,有时候搞得没得头绪,做个小游戏和大家分享一下,并将小程序开源到Github,欢迎下载。
接上期。传送门:
Version:100.00,
Src:newArray("GobangLogo.png" unselectable="on" pic_type="1"/>
"),
Class:function(){
//初始化函数
this.Constructor = function(){
}
this.Draw = function(ctx){
var Img = this.Src[0];
ctx.drawImage(Img,this.Left-Img.width/2,this.Top-Img.height/2,Img.width,Img.height);
return true;
}
this.Over = function(){
var Img = this.Src[0];
var x = this.Left > 0 ? this.Left : 0-this.Left;
var y = this.Top > 0 ? this.Top : 0-this.Top;
if(x <= Img.width/2 && y <= Img.height/2)
return true;
return false;
}
}
},
{
ID:"BeginGameButton",
Version:100.00,
Src:new Array("BeginGame.png"),
Class:function(){
//初始化函数
this.Constructor = function(){
}
this.Draw = function(ctx){
var Img = this.Src[0];
ctx.drawImage(Img,this.Left-Img.width/2,this.Top-Img.height/2,Img.width,Img.height);
return true;
}
this.Over = function(){
var Img = this.Src[0];
var x = this.Left > 0 ? this.Left : 0-this.Left;
var y = this.Top > 0 ? this.Top : 0-this.Top;
if(x <= Img.width/2 && y <= Img.height/2)
return true;
return false;
}
}
}
];
按照我之前的讲解,这些代码并不是很难理解,大致都是在做一件事,分别讲我们之前的两个图片,以中心为控制坐标点定义出来。
定义之后,我们打开我们之前所做的HTML文件,我在之前的HTML文件引用的两个script的下面有注释,另创建Game.js文件单独存放游戏部分代码,也就现在创建Game.js,并在该处引入到HTML文件,我们这里将HTML文件保存为Gobang.html。
//用于移植的控制代码
使用代码编辑器打开Game.js,为了开发标准化防止变量泄露,我们创建一个js的自执行函数,并对外暴露一个Gobang的游戏类名。在Game.js文件中写入:
var Gobang;
(function(){
Gobang = function(Container){
//Gobang游戏类的构造函数
}
Gobang.fn = Gobang.prototype = {
}
})();
在构造函数中提供1个参数,用于传递存放Canvas画布的容器句柄,IAnimation.js插件并不是需要我们显式提供元素,而是提供容器,自行填充Canvas,填充的大小会自动充满整个容器内部,这样做的一大好处是大大方便了项目移植。
这里注意我们在编辑Gobang的类时,所有的成员变量要定义成 this.xxx,所有的成员函数应定义成 this.xxx= function(){},成员函数的定义也可以在prototype中使用形如JSON的定义方式,但变量数据不能在该处定义。这里我们约定所有函数使用首字母大写命名,对私有成员的标注我们在命名前增加一个下划线区分。
接下来我们在Gobang构造器中初始化IAnimation,写入如下代码:
this._Animation = new IAnimation(Container); //Container是参数
我们回到Game.html页面中提供一个Div容器,并使用CSS控制其大小,然后在用于移植的控制代码段中实例化Gobang类,随后我们打开浏览器查阅下执行效果。
给一下完整的Gobang.html代码内容:
基于HTML5的在线小游戏制作 Power By Liuxinyumo.cn
div{
border: 1px solid red;
width: 750px;
height: 600px;
}
//用于移植的控制代码
var Container = document.getElementById("container");
var game = new Gobang(Container);
那么现在有了游戏视窗,我们将我们第一个场景,欢迎页面布置上。由于该景布置归属于游戏自身,因此我们打开Game.js在该文件中进行定义。
在使用自定义元素前我们需要先对外部资源进行选择性的异步加载,这里是一个扩充数组,将我们所有用到的自定义元素ID进行列举,告诉引擎哪些是本次作业需要加载的资源项。通用的写法为:
var t = this;
function CallBack(a,b){
if(a == b){
t._DownloadFinished();
}
}
this._Animation.DownloadIMGing = CallBack; this._Animation.DownloadIMG(["GobangLogo","BeginGameButton"]);
我们需要将该代码段单独放到一个 Init()的函数里,同时对Gobang创建一个_DownloadFinished()函数。
_DownloadFinished()函数一旦之行到意味着我们想要加载的外部资源已经准备就绪,因此我们就可以调用自定义资源库中的元素了,我们在初始化阶段实际上是可以将游戏界面、欢迎界面一并装在,游戏界面我们随后设计,因此在代码结构上留好位置。
接下来开始布局欢迎界面,单独定义创建函数_CreateWelcomeScene(),引擎中我们使用Page来区分场景,因此首先利用引擎创建一个WelcomePage,并保存到成员函数中,将该名称在构造器中声明,以便日后查找。使用this._Animation.CreatePage() 即可创建一个场景,返回值赋值给我们所定义的this._WelcomePage变量。接下来我们就可以利用该变量向场景中添加自定义的元素了。
利用this._WelcomePage.AddElement("GobangLogo");即可创建Logo元素,但元素默认Visible属性均是false,所以先对其进行位置布局,再将其设置为可视。同理,我们对BeginGame也做同样的处理。
保存后我们运行下效果:
还算满意,给下Game.js到目前为止的完整代码。
var Gobang;
(function(){
Gobang = function(Container){
//Gobang游戏类的构造函数
this._Animation = new IAnimation(Container);
//成员变量声明
this._WelcomePage = null;
this._Init();
}
Gobang.fn = Gobang.prototype = {
_Init:function(){
var t = this;
function CallBack(a,b){
if(a == b){
t._DownloadFinished();
}
}
this._Animation.DownloadIMGing = CallBack;
this._Animation.DownloadIMG(["GobangLogo","BeginGameButton"]);
},
_DownloadFinished:function(){
//此处外部资源已经全部加载完毕可以创建游戏场景。
this._CreateWelcomeScene();
//这里留有部分用于创建游戏界面
},
_CreateWelcomeScene:function(){
//创建游戏欢迎页面
this._WelcomePage = this._Animation.CreatePage();
//在场景中布局
var Logo = this._WelcomePage.AddElement("GobangLogo");
Logo.Left(this._Animation.Width/2);
Logo.Top(this._Animation.Height/2-100);
Logo.Visible(true);
var BeginGameButton = this._WelcomePage.AddElement("BeginGameButton");
BeginGameButton.Left(this._Animation.Width/2);
BeginGameButton.Top(this._Animation.Height/2+20);
BeginGameButton.Visible(true);
}
}
})();
篇幅也已经很长了,本篇先结束。
php在线对弈,【图片】手把手开始制作HTML5在线五子棋对弈游戏【编程吧】_百度贴吧...相关推荐
- h5在线制作html5,在线制作HTML5多媒体作品的技巧
HTML5多媒体作品以其对各种平台的兼容而见长,目前已获得了广泛的应用.如果我们需要制作自己的HTML5多媒体作品,一个方便之选就是利用现成的在线制作工具"百度H5". 首先访问& ...
- 在线 mp3铃声裁剪 铃声制作 html5+JavaScript 是西安
效果图 直接使用html5+JavaScript 没有涉及到服务端 效果链接 在线铃声制作器 mp3剪切-北岛铃声https://beidao.org/cutter 上代码 !function(t){ ...
- Html5图片翻页制作,HTML5超酷名片盒风格3D翻页图片画廊
在前面我们讲解了一个使用纯CSS制作3D百叶窗效果,今天我们要来制作一个类似名片盒的3D翻页图片画廊.在这个效果中,我们将使用一个HTML5 range输入框元素来控制图片画廊的前后翻页.这个rang ...
- 计算机病毒恶搞程序,【图片】我写的恶搞软件【病毒吧】_百度贴吧
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 class2.cs: using Microsoft.Win32; using System; using System.Windows.Forms; u ...
- linux 照片服务器 手机版下载不了,【图片】CSGO 服务器 Linux 端安装指南【csgo吧】_百度贴吧...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 #!/bin/bash startup="-game csgo -usercon -ip 10.133.204.91 +net_public_a ...
- java三国策略手游_【图片】推荐一款三国策略手游!【三国游戏吧】_百度贴吧...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 战争是这个游戏的主要内容,所以前期的发展显的尤为重要,那么如何快速而有效的在前期获得优势呢?下面我就为大家带来一些不错的经验,帮助小伙伴度过萌新时期. 游 ...
- 游戏王计算机人图片,人造人(《游戏王》卡牌角色)_百度百科
人造人 (<游戏王>卡牌角色) 语音 编辑 锁定 讨论 上传视频 游戏王卡组系列之一,以无效陷阱卡作为主要特点.[1] 在<游戏王>系列前期的动漫画中有多人使用过相关卡片,比较 ...
- linux终端冒险游戏,【图片】【抛砖引玉】colossal cave adventure(巨洞冒险)游戏经验分享介绍一下吧,早期文字冒险游戏大家玩过吗【linux游戏吧】_百度贴吧...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 > OK >好 > YOU'RE IN HALL OF MT KING >你在国王山大厅 THERE IS A SMALL WIC ...
- 惠普linux处理器漏洞,【图片】Linux 4.20内核修复了幽灵V2漏洞,但英特尔CPU会损失50%性能【linux游戏吧】_百度贴吧...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git/log/ Merge branch ...
最新文章
- linux下bash脚本常用的十个技巧:显示执行脚本花费的时间,在脚本退出时杀死后台运行的程序,在脚本退出时跳出循环,读取命令行参数来决定循环次数
- python三十九:logging模块
- Redis cluster日常管理【一】
- nRF51822之BootLoader
- mysql 已存在数据_MySQL跳过已存在的数据
- .NET项目发布网站具体步骤和注意事项
- html5 sidetoggle,javascript-使用React.js实现SlideToggle功能
- c语言编程微信公众号图片直播,如何以图片的形式在微信公众号文章中添加小程序...
- const 和readonly
- TypeScript BigInt
- 异构平台对比(GPU FPGA DSP)
- telnet不是内部命令
- 发票管理软件_企业为什么需要采购管理软件?
- nmake、makefile、cmake学习笔记
- VMware中Linux虚拟机root密码重置
- 辞旧迎新,新工作感悟!
- vue html parser,vue-eslint-parser
- Word文档太大怎样压缩变小?有没有简单的步骤讲解?
- 互融云贷款中介平台搭建,助力企业实现数字化智能办公
- GameFramework篇:前言
热门文章
- c语言录屏软件wps,如何打开WPS软件中的录屏功能
- 初中计算机所有知识,初中信息技术知识点大全
- Project2007操作手册(原创)
- 长时间数据流的信号滤波处理——基于MATLAB的FIR滤波器设计(1)
- 撤销和重做实现-第三部分(备忘录模式)
- 【运筹优化】GA遗传算法求解TSP问题(Java实现)
- 什么是Profibus-DP转光纤_Profibs DP总线光端机
- 45.Cookie、Session、ServletContext数据共享
- HTTP 协议的基本格式
- Laravel 5.0 框架查看执行过的SQL语句