JavaScript强化教程 -- cocosjs场景切换

场景切换

在main.js,将StartScene作为我们初始化运行的场景,代码如下:

    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new PlayScene());
    }, this);
在StartScene的开始菜单按钮的响应函数中加入场景切换代码。点击开始按钮切换场景进入到我们的PlayScene。代码如下:

    var startItem = new cc.MenuItemImage(
            res.Start_N_png,
            res.Start_S_png,
            function () {
                cc.log("Menu is clicked!");
                cc.director.replaceScene( cc.TransitionPageTurn(1, new PlayScene(), false) );
            }, this);
cc.director用来获取导演单例实体,cc.TransitionPageTurn创建了一个翻页效果的场景切换动画,当然你也可以不使用转场动画。直接传入new SecondScene()。

Cocos2d-JS中场景之间通过TransitionScene系列类来实现过渡跳转的效果。TransitionScene继承于Scene,该系列类主要是与场景切换特效相关的一些使用类。如TransitionFadeDown、TransitionPageTurn、TransitionJumpZoom等等。

注意:转场动画需要小心浏览器的兼容性。比如翻页效果就在浏览器上不支持

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— cocosjs场景切换

时间: 2024-10-14 09:42:34

JavaScript强化教程 -- cocosjs场景切换的相关文章

JavaScript强化教程——cocosjs屏幕适配方案

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 ——cocosjs屏幕适配方案 首 先说点题外话,对于任何大型项目来说,coding的规范重要,在cocos2dx-jsbinding这个框架中,javascript是一个绝对核心 的脚本语言,99%的游戏逻辑都由js完成.脚本的编写量绝对大于大多数的web项目,掌握javascript的扎实的基础至关重要. 入 正题,今天讨论的是如何使用jsb来处理移动平台的多分辨率适配问题.就目前的移动平台来讲,分辨

JavaScript强化教程——Native.js示例汇总

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- Native.js示例汇总 Native.js虽然强大和开放,但很多web开发者因为不熟悉原生API而难以独立完成. 这篇帖子的目的就是汇总各种写好的NJS代码,方便web开发者. 众人拾柴火焰高,有能力的开发者多多提交NJS代码,大家都会给你点赞的, Android平台 在桌面创建和删除App快捷方式 见Hello H5+里Native.js部分演示及源码. 或在这里搜索"快捷方式",h

JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代码: cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL); setDesignResolutionSize函数的前两个参数是你想要在你的代码中使用的游戏分辨率,第三个参数就是你选择的适配方案.引擎中内置了5种

JavaScript强化教程 - 六步实现贪食蛇

本文为H5EDU机构官方的HTML5培训教程,主要介绍贪食蛇JavaScript强化教程 1.首先创建div 并且给div加样式 <div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div> 给 <style...> 地图(div和表格).所有的块(蛇头,食物身体加样式) 2.创建地图     document.write(&q

JavaScript强化教程——Bootstrap 包的内容

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootstrap 基本结构 部分详细讲解. CSS:Bootstrap 自带以下特性:全局的 CSS 设置.定义基本的 HTML 元素样式.可扩展的 class,以及一个先进的网格系统.这将在 Bootstrap CSS 部分详细讲解. 组件:Bootstrap 包含了十几个可重用

JavaScript强化教程——AngularJS 指令

本文为 H5EDU 机构官方 HTML5培训 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 完整的指令内容可以参阅 An

JavaScript强化教程-cookie对象

Cookie对象: 是一种以文件(Cookie文件)的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据).Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取. 存储 cookie <script>     function saveCookie(cname,cvalue,exdays){         var d = new Date();         d.setTim

JavaScript强化教程——jQuery选择器

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p&

JavaScript强化教程——Bootstrap

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- Bootstrap Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布