php做一个五子棋图片,【图片】手把手开始制作HTML5在线五子棋对弈游戏【编程吧】_百度贴吧...

本文主要是介绍php做一个五子棋图片,【图片】手把手开始制作HTML5在线五子棋对弈游戏【编程吧】_百度贴吧...,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

本次课题:制作HTML5在线五子棋对弈游戏。

预计开发周期:还没想好看心情,先预计7天完成。

备注:最近做学校课题有关数据挖掘的,有时候搞得没得头绪,做个小游戏和大家分享一下,并将小程序开源到Github,欢迎下载。

接上期。传送门:

>ID: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类,随后我们打开浏览器查阅下执行效果。

ad9866ed665f411db693b56e3a05d188.png

给一下完整的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也做同样的处理。

保存后我们运行下效果:

fbd70641211c26fff67201d11f1454e6.png

还算满意,给下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在线五子棋对弈游戏【编程吧】_百度贴吧...的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/400806

相关文章

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

Python脚本实现图片文件批量命名

《Python脚本实现图片文件批量命名》这篇文章主要为大家详细介绍了一个用python第三方库pillow写的批量处理图片命名的脚本,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言源码批量处理图片尺寸脚本源码GUI界面源码打包成.exe可执行文件前言本文介绍一个用python第三方库pi

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)

《Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)》本文介绍了如何使用Python和Selenium结合ddddocr库实现图片验证码的识别和点击功能,感兴趣的朋友一起看... 目录1.获取图片2.目标识别3.背景坐标识别3.1 ddddocr3.2 打码平台4.坐标点击5.图

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm