模拟Quintus引擎框架编码

最新推荐文章于 2024-03-17 09:48:24 发布
最新推荐文章于 2024-03-17 09:48:24 发布
阅读量665 收藏
点赞数
分类专栏： JavaScript + JQuery 文章标签： 架构 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16559905/article/details/51444687
版权

最近看了Quintus引擎，感觉他的JS 架构做的不错，所以就自己模拟了一套。

其实，效果的话，没有效果，比较枯燥，但是他的JS de 格式写的着实不错，继承，重写一一用到，接下来看代码：

示例1：

创建index.html文件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>模拟Quintus引擎  de  JS</title>
        <style>
            body {
                padding: 0;
                margin: 0
            }
        </style>
    </head>

    <body>
        这里是模拟JS
    </body>
    <script src="../../build/jquery.min.js"></script>
    <script src="../../build/underscore-min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/main-showBy.js"></script>
    <script>
        var By = mainBy().include("ShowBy");
        By.input.csdn("bai");

    </script>

</html>

PS：main.js、main-showBy.js的文件分别是我自己创建的。

不懂underscore-min.js的请移步：这里写链接内容

main.js文件

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
(function() {
    var initializing = false,
        fnTest = /xyz/.test(function() {
            xyz;
        }) ? /\b_super\b/ : /.*/;
    // The base Class implementation (does nothing)
    this.Class = function() {};

    // Create a new Class that inherits from this class
    Class.extend = function(prop) {
        var _super = this.prototype;

        // Instantiate a base class (but only create the instance,
        // don't run the init constructor)
        initializing = true;
        var prototype = new this();
        initializing = false;

        // Copy the properties over onto the new prototype
        for (var name in prop) {
            // Check if we're overwriting an existing function
            prototype[name] = typeof prop[name] == "function" &&
                typeof _super[name] == "function" &&
                fnTest.test(prop[name]) ?
                (function(name, fn) {
                    return function() {
                        var tmp = this._super;

                        // Add a new ._super() method that is the same method
                        // but on the super-class
                        this._super = _super[name];

                        // The method only need to be bound temporarily, so we
                        // remove it when we're done executing
                        var ret = fn.apply(this, arguments);
                        this._super = tmp;

                        return ret;
                    };
                })(name, prop[name]) :
                prop[name];
        }

        // The dummy class constructor
        function Class() {
            // All construction is actually done in the init method
            if (!initializing && this.init)
                this.init.apply(this, arguments);
        }

        // Populate our constructed prototype object
        Class.prototype = prototype;

        // Enforce the constructor to be what we expect
        Class.prototype.constructor = Class;
        // And make this class extendable
        Class.extend = arguments.callee;

        return Class;
    };
})();

var mainBy = function(opts) {
    var By = {};

    if (opts) {
        _(By.options).extend(opts);
    }

    By._aaa = function() {
        console.log("AAA");
    }

    By._bbb = function() {
        console.log("BBB");
    }

    By._ccc = function() {
        console.log("CCC");
    }

    By.extend = function(obj) {
        alert(obj);
        _(By).extend(obj);
        return By;
    };

    // Syntax for including other modules into By
    By.include = function(mod) {
        _.each(By._normalizeArg(mod), function(m) {
            m = mainBy[m] || m;
            m(By);
        });
        return By;
    };

    By._normalizeArg = function(arg) {
        if (_.isString(arg)) {
            arg = arg.replace(/\s+/g, '').split(",");
        }
        if (!_.isArray(arg)) {
            arg = [arg];
        }
        return arg;
    };

    By.Evented = Class.extend({
        bind: function(event, target, callback) {
            // Handle the case where there is no target provided
            if (!callback) {
                callback = target;
                target = null;
            }
            // Handle case for callback that is a string
            if (_.isString(callback)) {
                callback = target[callback];
            }

            this.listeners = this.listeners || {};
            this.listeners[event] = this.listeners[event] || [];
            this.listeners[event].push([target || this, callback]);
            if (target) {
                if (!target.binds) {
                    target.binds = [];
                }
                target.binds.push([this, event, callback]);
            }
        },

        trigger: function(event, data) {
            if (this.listeners && this.listeners[event]) {
                for (var i = 0, len = this.listeners[event].length; i < len; i++) {
                    var listener = this.listeners[event][i];
                    listener[1].call(listener[0], data);
                }
            }
        },

        unbind: function(event, target, callback) {
            if (!target) {
                if (this.listeners[event]) {
                    delete this.listeners[event];
                }
            } else {
                var l = this.listeners && this.listeners[event];
                if (l) {
                    for (var i = l.length - 1; i >= 0; i--) {
                        if (l[i][0] == target) {
                            if (!callback || callback == l[i][1]) {
                                this.listeners[event].splice(i, 1);
                            }
                        }
                    }
                }
            }
        },

        debind: function() {
            if (this.binds) {
                for (var i = 0, len = this.binds.length; i < len; i++) {
                    var boundEvent = this.binds[i],
                        source = boundEvent[0],
                        event = boundEvent[1];
                    source.unbind(event, this);
                }
            }
        }

    });

    return By;

}

main-showBy.js文件

mainBy.ShowBy = function(By) {

    By.InputSystem = By.Evented.extend({
        init:function(){
            console.log("进入ShowBy的初始化方法");
        },
        csdn: function(name) {
            console.log("进入ShowBy的By.InputSystem方法---" + name);
        },
        bindKey: function(key, name) {
            By.input.keys[KEY_NAMES[key] || key] = name;
        }

    });

    By.input = new By.InputSystem();
    console.log("bai123__" + By);

    By.addClassBai = function(){
        console.log("进入ShowBy的addClassBai方法");
    }

    return By;
}

示例2：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>模拟JS</title>
        <style>
            body {
                padding: 0;
                margin: 0
            }
        </style>
    </head>

    <body>
        这里是模拟JS
    </body>
    <script src="../../build/jquery.min.js"></script>
    <script src="../../build/underscore-min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/main-showBy.js"></script>
    <script src="js/main-Sprite.js"></script>
    <script>
        var By = mainBy().include("ShowBy,Sprite");
        By.input.csdn("baiyu");


        By.Paddle = By.Sprite.extend({
            init: function() {
                console.log("进入Q.Paddle 的初始化方法");
            },
            setUp:function(){
                console.log("进入Q.Paddle 的setUp()方法");
            }
        });


        By.init();
    </script>

</html>

引入三个文件

<script src="js/main.js"></script>
<script src="js/main-showBy.js"></script>
<script src="js/main-Sprite.js"></script>

（1）main.js文件

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
(function() {
    var initializing = false,
        fnTest = /xyz/.test(function() {
            xyz;
        }) ? /\b_super\b/ : /.*/;
    // The base Class implementation (does nothing)
    this.Class = function() {};

    // Create a new Class that inherits from this class
    Class.extend = function(prop) {
        var _super = this.prototype;

        // Instantiate a base class (but only create the instance,
        // don't run the init constructor)
        initializing = true;
        var prototype = new this();
        initializing = false;

        // Copy the properties over onto the new prototype
        for (var name in prop) {
            // Check if we're overwriting an existing function
            prototype[name] = typeof prop[name] == "function" &&
                typeof _super[name] == "function" &&
                fnTest.test(prop[name]) ?
                (function(name, fn) {
                    return function() {
                        var tmp = this._super;

                        // Add a new ._super() method that is the same method
                        // but on the super-class
                        this._super = _super[name];

                        // The method only need to be bound temporarily, so we
                        // remove it when we're done executing
                        var ret = fn.apply(this, arguments);
                        this._super = tmp;

                        return ret;
                    };
                })(name, prop[name]) :
                prop[name];
        }

        // The dummy class constructor
        function Class() {
            // All construction is actually done in the init method
            if (!initializing && this.init)
                this.init.apply(this, arguments);
        }

        // Populate our constructed prototype object
        Class.prototype = prototype;

        // Enforce the constructor to be what we expect
        Class.prototype.constructor = Class;
        // And make this class extendable
        Class.extend = arguments.callee;

        return Class;
    };
})();

var mainBy = function(opts) {
    var By = {};

    if (opts) {
        _(By.options).extend(opts);
    }

    By._aaa = function() {
        console.log("AAA");
    }

    By._bbb = function() {
        console.log("BBB");
    }

    By._ccc = function() {
        console.log("CCC");
    }

    By.extend = function(obj) {
        console.log("进入父类的extend继承方法");
        _(By).extend(obj);
        return By;
    };

    // Syntax for including other modules into By
    By.include = function(mod) {
        _.each(By._normalizeArg(mod), function(m) {
            m = mainBy[m] || m;
            m(By);
        });
        return By;
    };

    By._normalizeArg = function(arg) {
        if (_.isString(arg)) {
            arg = arg.replace(/\s+/g, '').split(",");
        }
        if (!_.isArray(arg)) {
            arg = [arg];
        }
        return arg;
    };

    By.Evented = Class.extend({
        bind: function(event, target, callback) {
            // Handle the case where there is no target provided
            if (!callback) {
                callback = target;
                target = null;
            }
            // Handle case for callback that is a string
            if (_.isString(callback)) {
                callback = target[callback];
            }

            this.listeners = this.listeners || {};
            this.listeners[event] = this.listeners[event] || [];
            this.listeners[event].push([target || this, callback]);
            if (target) {
                if (!target.binds) {
                    target.binds = [];
                }
                target.binds.push([this, event, callback]);
            }
        },

        trigger: function(event, data) {
            if (this.listeners && this.listeners[event]) {
                for (var i = 0, len = this.listeners[event].length; i < len; i++) {
                    var listener = this.listeners[event][i];
                    listener[1].call(listener[0], data);
                }
            }
        },

        unbind: function(event, target, callback) {
            if (!target) {
                if (this.listeners[event]) {
                    delete this.listeners[event];
                }
            } else {
                var l = this.listeners && this.listeners[event];
                if (l) {
                    for (var i = l.length - 1; i >= 0; i--) {
                        if (l[i][0] == target) {
                            if (!callback || callback == l[i][1]) {
                                this.listeners[event].splice(i, 1);
                            }
                        }
                    }
                }
            }
        },

        debind: function() {
            if (this.binds) {
                for (var i = 0, len = this.binds.length; i < len; i++) {
                    var boundEvent = this.binds[i],
                        source = boundEvent[0],
                        event = boundEvent[1];
                    source.unbind(event, this);
                }
            }
        }

    });

    return By;

}

（2）main-showBy.js文件

mainBy.ShowBy = function(By) {

    By.InputSystem = By.Evented.extend({
        init:function(){
            console.log("进入ShowBy的初始化方法");
        },
        csdn: function(name) {
            console.log("进入ShowBy的By.InputSystem方法---" + name);
        },
        bindKey: function(key, name) {
            By.input.keys[KEY_NAMES[key] || key] = name;
        }

    });

    By.input = new By.InputSystem();
    console.log("baiyu123__" + By);

    By.addClassBai = function(){
        console.log("进入ShowBy的addClassBai方法");
    }

    return By;
}

（3）main-Sprite.js文件

mainBy.Sprite = function(By) {

    By.SpriteSheet = Class.extend({

        init: function() {
            console.log("进入Sprite的 By.SpriteSheet 初始化方法");
        },
        draw: function() {
            console.log("进入Sprite的draw()方法");
        }
    });

    By.Sprite = By.extend({
        init: function() {
            console.log("进入Sprite的  By.Sprite 初始化方法");
        }

    });
    //切勿混乱，一个是大写，一个是小写
    By.sprite = function(name,scenceObj){
        console.log("这里是mainBy.Sprite的带有参数的方法！" + name);
    }

    return By;

}
Rkatsiteli
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5游戏引擎Quintus.zip
07-16
Quintus 是一个易学，使用有趣的 JavaScript HTML5 游戏引擎，支持移动和桌面开发。包含一个模块化的引擎可轻松开发游戏，并在同一个页面上运行多个实例。 标签：Quintus
HTML5移动游戏开发高级编程 9：自建Quintus引擎（1）
Just for fun的专栏
02-18 831
9.1 引言      现在的JavaScript非常适于当成一种交互式游戏开发语言使用 9.2 创建可重用HTML5引擎的框架      该引擎将被命名成Quintus。      设计基本的引擎API： 需要在同一页面上运行多个引擎实例，该需求确保引擎作为独立单元出现，不会干扰自身或页面的其他组成部分。在可能的情况下，引擎应提供合理的选项默认值，以此免去搭建运行环境所需的大量
js游戏引擎探索指南之Quintus
幺鸡报晓的博客
06-22 2300
Quintus是一款易于上手、轻量级、开源的HTML5 JavaScript游戏引擎，包含一个模块化的引擎可轻松开发游戏，并在同一个页面上运行多个实例，支持桌面及移动平台浏览器。Quintus引用面向对象的思想来进行HTML5游戏开发，同时依赖于jQuery来提供事件处理机制和元素选取操作。 官网：http://www.html5quintus.com
quintus-level-editor:Quintus.js 游戏引擎的平台级别编辑器
07-05
quintus 级编辑器 Quintus.js 游戏引擎的平台级别编辑器。
Quintus小游戏制作之Beta(一)
Simba_Scorpio的专栏
07-27 1204
Quintus是专门为制作网页游戏而存在的简易JavaScript库（注意是简易引擎），这里介绍我用Quintus库写的一款小游戏Beta，代码不过300行。 有关Quintus的介绍不多说，想学习用法的可以到Quintus官方网站，话说当初看到官网的界面是非常的喜欢呢。 咳咳，那么咱们就入正题了。 设计游戏的主线思路：引入游戏需要的模块 —> 加载外部文件 —> 添加精灵
quintus-game:测试 quintus 框架
06-01
Quintus框架的亮点之一是它的模块化设计，允许开发者按需选择和组合不同的组件，如2D渲染、精灵动画、碰撞检测、物理引擎等。这些组件都是为了简化游戏开发流程，提高效率。在&quot;quintus-game-master&quot;这个压缩包中，很...
HTML5GameTutorial:Quintus HTML5 游戏引擎 9 合 1 游戏教程
06-26
当我在上发布一个简单的 80 线平台游戏时，我意识到人们可能会使用该示例作为带有 Quintus 引擎的平台游戏的入门。 我没有意识到的是，人们只会使用该示例并使用引擎构建平台游戏。 本教程试图通过展示用于构建 9 ...
html5Game:Angular 和 Quintus 的 HTML5 游戏
06-03
游戏代码是从 quintus 网页下载的，并修改为使用 angular.js，对于这个项目我使用 angular.js 因为我需要做一些 API 请求，比如 GET 和POST，使用 GET 我拉出级别数组，使用 POST 我存储分数。 首先创建 HTML 文件...
Quintus游戏引擎 - 开发2D游戏的利器
最新发布
gitblog_00008的博客
03-17 349
Quintus游戏引擎 - 开发2D游戏的利器 QuintusHTML5 Game Engine项目地址:https://gitcode.com/gh_mirrors/qu/Quintus 是一个基于HTML5和JavaScript的游戏开发框架，旨在简化2D游戏的开发过程，并支持跨平台发布。 什么是Quintus游戏引擎 Quintus游戏引擎是一个轻量级、易于上手的游戏开发工具。它提供了一系...
quintus学习笔记
幺鸡报晓的博客
06-23 781
quintus开发环境搭建，其实javascript真的就是一个记事本足矣，但用一些强大的IDE很便捷。
2D 物理引擎Phun_beta_4_22_win32
10-23
Phun,一个 &ldquo;2D physics sandbox&rdquo;,是 Ume? 大学一个硕士生的毕业作品。可以用鼠标画任意形状的物体,或者链条、弹簧之类进去,也可以拖拉,这些物体就会根据力学原理运动起来。很好玩,可用它来做很多有趣的场景。当然也可用它做物理教育工具...
十二、Debind 10 bind9
000*的博客
02-24 1351
按照题目要求，有如下几点，但是我还对其进行了一定的拓展，添加了一定的 理论部分，比如，DNS 的简介和相关的一系列的概念等： 1.安装 bind9； 2.配置为 DNS 根域服务器； 3.其他未知域名解析，统一解析为该本机 IP； 4.创建正向区域”chinaskills.cn; ①.类型为 Slave； ②.主服务器为“AppSrv”。 5.为 chinaskills.cn 提供域名解析； 6.为 www.chinaskills.cn、download.chinaskills.cn 和.
HTML5移动游戏开发高级编程 11：自建Quintus引擎（3）
Just for fun的专栏
02-19 472
11.1 引言     精灵是引擎用来在屏幕上显示图形和元素的主要可视游戏对象（GameObject），精灵使用一些基本资产或精灵表（SpriteSheet）把自身绘制到游戏中；场景（Scene）则提供了一种方式把诸如关卡一类的游戏的某个离散部分包装成一个既好用又可重用的包；最后，作为游戏状态的主要容器，舞台（Stage）负责跟踪GameObject列表，以及确保它们在每帧中的更新和绘制。 1
HTML5移动游戏开发高级编程 10：自建Quintus引擎（2）
Just for fun的专栏
02-18 326
10.1 引言     本章将继续，使用类在屏幕上绘制控件、接受用户的输入以及加载资产 10.2 访问游戏容器元素     就游戏而言，要在屏幕上渲染任何东西，它必须有一个可供其在上面进行绘制的对象。对于画布游戏来说，该对象就是Canvas元素；而对于其他类型的游戏来说，它或是一个普通的或是一个SVG元素。    10.3 捕捉用户输入      创建输入子系统：键盘、鼠标、触摸输入、游
主流HTML5游戏框架的分析和对比（Construct2、ImpactJS、CreateJS、Cocos2d-html5……）
热门推荐
心砚THU的专栏
09-27 2万+
本文主要选取了Construct2、ImactJS、LimeJS、GameMaker、CreateJS、lycheeJS、Crafty、three.js、melonJS、Turbulenz、Quintus、Cocos2d-html5等进行了简要介绍和对比，主要是根据网上的资料整理而成。
Simple JavaScript Inheritance 源码分析
yyf994的博客
10-19 1655
John Resig 写了一篇关于 JavaScript 里 类似其它语言的 "继承", 灵感来自于  base2 and PrototypeJS.  他为文章起名为"Simple JavaScript Inheritance" . 他使用的一些很巧妙的技术来实现 类似于java 的 extend方法. 其实  Simple JavaScript Inheritance 的源
cocos2d-js中关于继承的细节
叶巷的博客
03-20 585
var A = Class.extend({ arr : [1, 2], }); var a1 = new A(); var a2 = new A(); a1.arr.push(3); console.log("arr = " + a1.arr); //arr = 1,2,3 console.log("arr = " + a2.arr); //arr = 1,2,3
Phun：一个巨牛B的物理引擎
matrix67的专栏
03-06 1484
    一个很牛B的沙盒程序，可以模拟各种物理现象。适合用于物理教学。很喜欢那个把东西变成水的效果:)YouTube链接：http://www.youtube.com/watch?v=0H5g9VS0ENM下载：http://www.acc.umu.se/~emilk/downloads.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rkatsiteli

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值