精华内容
下载资源
问答
  • cocos2d-JS

    2019-04-13 07:53:00
    参考官网:https://www.cocos.com/docs/js/1-about-cocos2d-js/1-1-a-brief-history/zh.html 跨全平台(PC端,手机端),游戏引擎,开源易学易用有文档,...Cocos2d-JS是Cocos2d-x的JavaScript版本,融合了Cocos...

    参考官网:https://www.cocos.com/docs/js/1-about-cocos2d-js/1-1-a-brief-history/zh.html

    跨全平台(PC端,手机端),游戏引擎,开源易学易用有文档,非常容易上手。

    可在浏览器中完成游戏的开发和调试,然后发布到网页, 移动 还有主机平台

    Cocos2d-JS是Cocos2d-x的JavaScript版本,融合了Cocos2d-HTML5和Cocos2d-x JavaScript Bindings(JSB)。

    Cocos2d-html5是Cocos2d-JS的一个重要模块,是一个面向Web的游戏引擎,并完全兼容HTML5规范,所以基于Cocos2d-JS开发的游戏天然可运行在所有支持HTML5规范的浏览器。

    Cocos2d-JS和其他的Cocos2d分支相比,其跨平台的能力是最强的,使用难度也是最低的。主要用于h5游戏开发。

    转载于:https://www.cnblogs.com/mySummer/p/10699691.html

    展开全文
  • cocos 2d - js

    2020-04-28 15:47:03
    cocos2d - js 知识整理目录结构index.htmlmain.js代码project.json文件启动流程导演节点节点常用基本属性节点坐标场景图层Layer精灵Sprite自定义精灵组合精灵定义FarmScene .jsFarm.jsHouse.js动画精灵定义person....

    目录结构

    在这里插入图片描述

    main.js设置启动的场景
    project.json配置写好的js文件

    index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Cocos2d-html5</title>
        <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="full-screen" content="yes"/>
        <meta name="screen-orientation" content="portrait"/>
        <meta name="x5-fullscreen" content="true"/>
        <meta name="360-fullscreen" content="true"/>
        <style>
            body, canvas, div {
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                -khtml-user-select: none;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }
        </style>
    </head>
    <body style="padding:0; margin: 0;">
        <canvas id="gameCanvas" width="720" height="1280"></canvas>
        <script src="frameworks/cocos2d-html5/CCBoot.js"></script>
        <script src="main.js"></script>
    </body>
    </html>
    

    main.js代码

    cc.game.onStart = function(){
        cc.view.adjustViewPort(true);
        //屏幕尺寸定义函数:setDesignResolutionSize
        cc.view.setDesignResolutionSize(640, 1136, cc.ResolutionPolicy.SHOW_ALL);
        cc.view.resizeWithBrowserSize(true);
    
        cc.LoaderScene.preload(g_resources, function () {
        	cc.director.runScene(new MenuScene());
        }, this);
    };
    cc.game.run();
    

    函数:cc.view.setDesignResolutionSize 的参数
    在这里插入图片描述

    project.json文件

    jsList中配置写好的文件

    {
      "project_type": "javascript",
      "debugMode": 0,
      "showFPS": true,
      "frameRate": 60,
      "id": "gameCanvas",
      "renderMode": 0,
      "engineDir": "frameworks/cocos2d-html5",
      "modules": [ "cocos2d","ccpool" ],
    
      "jsList": [
        "src/resource.js",
        "src/sushi/PlayScene.js",
      ]
    }
    

    启动流程

    在这里插入图片描述

    导演

    负责游戏的初始化与过程统筹,cc.director是个单例对象

    1.设置帧频
    cc.director.setAnimationInterval(1/60) 
    
    2.获取屏幕的大小
    var size=cc.director.getWinSize()
    size.width(size.height)
    
    3.替换方式场景启动
    cc.director.runScene(new Resolution())
    
    4.栈方式场景启动
    cc.director.pushScene(new Resolution())
    cc.director.popScene();
    
    5.动画场景
    Var animScene=new cc.TransitionSlideInT(1, scene);
    cc.director.pushScene(animScene)
    
    

    节点

    在这里插入图片描述

    节点常用基本属性

    位置属性
    	node.x=100
    	node.y=100
    	node.setPosition(100,100)
    	node.getPosition()
    	node.setPositionX(100)
    	node.getPositionY()
    
    大小属性:适用:Layer,不适应:sprite
    	node.width
    	node.height
    
    锚点与层级
    	node.setAnchorPoint(0.5,0.5)
    	node.getAnchorPoint()
    	node.setLocalZOrder(100)
    	node.getLocalZOrder()
    
    
    旋转属性
    	node.setRotationX(angle)
    	node.getRotationX()
    缩放属性
    	node.setScale(radio)
    	node.getScale()
    
    倾斜与不透明
    	node.setSkewX(skew)
    	node.getSkewX()
    	node.setOpacity(opacity)
    
    属性配置
    	node.attr({
    		x:100,
    		y:100,
    		scale:1.5
    	})
    
    节点操作
    	node.addChild(child,localorder,tag)
    	node.removeChild(child)
    	node.removeFromParent()
    
    调度器
    	node.scheduleUpdate()
    	node.update=function(dt){}
    	node.schedule(callback,interval,repeat,delay,key)
    	node.scheduleOnce(callback,interval,key)
    

    调度器演示

    var ScheduleScene = cc.Scene.extend({
    
        ctor: function () {
            this._super();
            cc.spriteFrameCache.addSpriteFrames(res.personPlist);
            //第一种方法
            //this.scheduleUpdate(); //每帧都激活
            //第二种方法,时间秒为单位
            //node.schedule(callback, interval, repeat, delay, key)
            this.schedule(this.addSprite, 1, 10, 1);
            //第三种方法
            //node.scheduleOnce(callback,interval,key)
            //this.scheduleOnce(this.addSprite, 1);
        },
        update: function () {
            this.addSprite();
        },
        addSprite: function () {
            console.log("测试");
            var sprite1 = new cc.Sprite("#0001.png");
            var size = cc.director.getWinSize();
            sprite1.x = this.randomNum(300, 1000);
            sprite1.y = this.randomNum(300, 1000);
            this.addChild(sprite1);
        },
        randomNum: function (minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                    break;
                default:
                    return 0;
                    break;
            }
        }
    })
    

    节点坐标

    在这里插入图片描述

    Var toWorldPos=nodeParent.convertToWorldSpace(node.getPosition())
    Var toNodePos=node_A.convetToNodeSpace(node_B)
    node.getBoundingBox()
    返回 cc.rect(x,y,width,height)
    

    场景

    在这里插入图片描述

    场景的过渡方式演示

    var TestPeroidScene1 = cc.Scene.extend({
        ctor: function () {
            this._super();
            console.log("第一个场景:ctor");
            var buttonLayer = new TestButtonLayer(); //加入按钮控制层
            this.addChild(buttonLayer);
        },
        onEnter: function () {
            this._super();
            console.log("第一个场景:onEnter");
        },
        onExit: function () {
            this._super();
            console.log("第一个场景:onExit");
        },
        onEnterTransitionDidFinish: function () {
            this._super();
            console.log("第一个场景:onEnterTransitionDidFinish");
        },
        onExitTransitionDidStart: function () {
            this._super();
            console.log("第一个场景:onExitTransitionDidStart");
        },
    });
    
    var TestButtonLayer = cc.Layer.extend({
        ctor: function () {
            this._super();
            var menuitem1 = new cc.MenuItemFont("替换跳到第二场景", this.goSecond);
            var menuitem2 = new cc.MenuItemFont("栈方式切换第二场景", this.goSecondStack);
            var menuitem3 = new cc.MenuItemFont("替换跳过度切换第二场景", this.goSecondTransitionk);
            var menu = new cc.Menu(menuitem1, menuitem2, menuitem3);
            menu.alignItemsVerticallyWithPadding(20);
            menu.x = 400;
            menu.y = 500;
            this.addChild(menu);
        },
        onEnter: function () {
            this._super();
        },
        goSecond: function () {
            cc.director.runScene(new TestPeroidScene2());
        },
        goSecondStack: function () {
            cc.director.pushScene(new TestPeroidScene2());
        },
        goSecondTransitionk: function () {
            var animateScene = new cc.TransitionSlideInT(1, new TestPeroidScene2());
            cc.director.runScene(animateScene);
        }
    })
    
    var TestPeroidScene2 = cc.Scene.extend({
        ctor: function () {
            this._super();
            console.log("第二个场景:ctor");
            var menuitem1 = new cc.MenuItemFont("替换返回第一场景", this.goFirst);
            var menuitem2 = new cc.MenuItemFont("栈方式返回第一场景", this.goFirstStack);
            var menuitem3 = new cc.MenuItemFont("替换过度返回第一场景", this.goFirstTransitionk);
            var menu = new cc.Menu(menuitem1, menuitem2, menuitem3);
            menu.alignItemsVerticallyWithPadding(20);
            menu.x = 400;
            menu.y = 500;
            this.addChild(menu);
        },
        onEnter: function () {
            this._super();
            console.log("第二个场景:onEnter");
        },
        onExit: function () {
            this._super();
            console.log("第二个场景:onExit");
        },
        onEnterTransitionDidFinish: function () {
            this._super();
            console.log("第二个场景:onEnterTransitionDidFinish");
        },
        onExitTransitionDidStart: function () {
            this._super();
            console.log("第二个场景:onExitTransitionDidStart");
        },
        goFirst: function () {
            cc.director.runScene(new TestPeroidScene1());
        },
        goFirstStack: function () {
            cc.director.popScene();
        },
        goFirstTransitionk: function () {
            var animateScene = new cc.TransitionSlideInT(1, new TestPeroidScene1());
            cc.director.runScene(animateScene);
        }
    });
    

    在这里插入图片描述

    图层Layer

    Layer 相当于 网页的”DIV”元素,是一个容器的概念

    var layer=new cc.Layer();
    var layer= cc.LayerColor(cc.color(0,0,0,138),width,height)
    

    layer锚点设置

    var TestLayerScene = cc.Scene.extend({
        ctor: function () {
            this._super();
            var layer = new cc.LayerColor(cc.color(255, 0, 0.128), 300, 300);
            //默认锚点 0,0
            layer.setAnchorPoint(0.5, 0.5);
            //图层默认情况锚点效果是忽略
            layer.ignoreAnchor = false;
            var size = cc.director.getWinSize();
            layer.x = size.width/2;
            layer.y = size.height/2;
            this.addChild(layer);
        }
    });
    

    精灵Sprite

    精灵定义
    	方法一:
    	var sprite=new cc.Sprite(“res/1.png”);
    	
    	方法二:
    	resouce.js中配置图片预导入
    	var res = {    
    	    bg: "/res/background.png",
    	};
    	var sprite=new cc.Sprite(res.bg);
    	
    	方法三:
    	cc.spriteFrameCache.addSpriteFrames(res.personPlist);
    	var sprite3 = new cc.Sprite("#0001.png");
    坐标:
    	sprite.x
    	sprite.y
    缩放:
    	sprite. setScale(0.5)
    旋转:
    	sprite. setRotationX(90

    自定义精灵

    var Farm = cc.Sprite.extend({
        ctor: function (level) {
            switch (level) {
                case 1:
                    this._super("res/house/house_1.png");
                    break;
                case 2:
                    this._super("res/house/house_2.png");
                    break;
                case 3:
                    this._super("res/house/house_3.png");
                    break;
                default:
                    this._super("res/house/house_1.png");
                    break;
            }
       },   });
    

    组合精灵定义

    在这里插入图片描述

    FarmScene .js

    var FarmScene = cc.Scene.extend({
        farm: null,
        ctor: function () {
            this._super();
            var size = cc.director.getWinSize();
            this.farm = new Farm();
            this.farm.x = size.width / 2;
            this.farm.y = size.height / 2;
            this.addChild(this.farm);
            this.addMenu();
        },
        addMenu: function () {
            //按钮代码
            var menuItem1 = new cc.MenuItemFont("15", this.changBlood1, this);
            var menuItem2 = new cc.MenuItemFont("50", this.changBlood2, this);
            var menuItem3 = new cc.MenuItemFont("100", this.changBlood3, this);
            var menu = new cc.Menu(menuItem1, menuItem2, menuItem3);
            menu.x = 300;
            menu.y = 300;
            menu.alignItemsVerticallyWithPadding(20);
            this.addChild(menu);
        },
        changBlood1: function () {
            //事件的激活,this环境
            this.farm.changeBlood(15);
        },
        changBlood2: function () {
    
            this.farm.changeBlood(50);
        },
        changBlood3: function () {
            this.farm.changeBlood(100);
        },
    });
    

    Farm.js

    var Farm = cc.Layer.extend({
    
        blood: null,
        house: null,
        ctor: function () {
            this._super();
    
            this.house = new House(1);
            this.addChild(this.house);
    
            this.blood = new cc.LayerColor(cc.color(0, 255, 0, 120), 100, 10);
            this.blood.y = this.house.height / 2 + 20;
            this.blood.x = -this.blood.width / 2;
            this.addChild(this.blood);
        },
        changeBlood: function (width) {
            this.blood.width = width;
        }
    });
    

    House.js

    var House = cc.Sprite.extend({
        ctor: function (level) {
            switch (level) {
                case 1:
                    this._super(res.house1);
                    break;
                case 2:
                    this._super("res/house/house_2.png");
                    break;
                case 3:
                    this._super("res/house/house_3.png");
                    break;
                default:
                    this._super("res/house/house_1.png");
                    break;
            }
    
        },
        changeLevel: function (level) {
            
             this.setTexture("res/house/house_"+level+".png");
        }
    })
    

    动画精灵定义

    在这里插入图片描述

    person.js

    var Person = cc.Sprite.extend({
        _animation: null,
        ctor: function () {
            this._super();
            //帧动画的实现方法
            cc.spriteFrameCache.addSpriteFrames(res.personPlist);
    
            // 动画配置,帧与时间
            this._animation = new cc.Animation();
            var name = '';
            for (var i = 1; i < 8; i++) {
                name = "000" + i + ".png";
                this._animation.addSpriteFrame(cc.spriteFrameCache.getSpriteFrame(name));
            };
            this._animation.setDelayPerUnit(1 / 20);
            //生成 action
            var action = cc.animate(this._animation).repeatForever();
            this.runAction(action);
        },
        changeSpeed: function (speed) {
            //以前的动画停止
            this.stopAllActions();
            this._animation.setDelayPerUnit(speed);
            var action = cc.animate(this._animation).repeatForever();
            this.runAction(action);
        }
    });
    

    PersonScene.js

    var PersonScene = cc.Scene.extend({
        person: null,
        ctor: function () {
            this._super();
            var size = cc.director.getWinSize();
            this.person = new Person();
            this.person.x = size.width / 2;
            this.person.y = size.height / 2;
            this.addChild(this.person);
            this.addMenu();
        },
        addMenu: function () {
            //按钮代码
            var menuItem1 = new cc.MenuItemFont("1/10", this.changSpeed1, this);
            var menuItem2 = new cc.MenuItemFont("1/20", this.changSpeed2, this);
            var menuItem3 = new cc.MenuItemFont("1/60", this.changSpeed3, this);
            var menu = new cc.Menu(menuItem1, menuItem2, menuItem3);
            menu.x = 300;
            menu.y = 300;
            menu.alignItemsVerticallyWithPadding(20);
            this.addChild(menu);
        },
        changSpeed1: function () {
            //事件的激活,this环境
            this.person.changeSpeed(1 / 10);
        },
        changSpeed2: function () {
            this.person.changeSpeed(1 / 20);
        },
        changSpeed3: function () {
            this.person.changeSpeed(1 / 60);
        },
    });
    

    标签Label

    var sprite=new cc.LabelTTF(“hello”,”arial”,24)
    

    菜单Menu

    
    var menu=new cc.Menu(menuitem1,menuitem2)
    menu.alignItemsVerticallyWithPadding(20);
    menu.alignItemsHorizontallyWithPadding(20);
    
    var menuItem1 = new cc.MenuItemFont(“test", this.test03);
    
    展开全文
  • cocos2d-js

    2016-11-01 11:05:58
    cocos2d-js是cocos2d-x的JavaScript版本,真正跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone8,Mac,Windows等平台。利用cocos2d-js开发HTML5游戏/动画,我们可以...

    了解
    cocos2d-js是cocos2d-x的JavaScript版本,真正跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone8,Mac,Windows等平台。

    利用cocos2d-js开发HTML5游戏/动画,我们可以通过SDK也可以直接使用js类库:

    l SDK下载:http://cn.cocos2d-x.org/download/

    l js类库:http://www.cocos2d-x.org/filecenter/jsbuilder/

    SDK的开发步骤:

    1、 安装python

    2、 解压SDK,运行setup.py

    3、 运行cmd,新建cocos2d-js项目:cocos new –l js project_name

    4、 使用webStorm等IDE打开项目目录,新建的项目已经有现成HelloWorld例子

    5、 了解一下main.js的说明(关于project.json),然后打开resource.js和app.js阅读代码

    6、 在app.js中正式开始自己的代码编写。当然,这里可以增加新的js文件,需要修改project.json。

    展开全文
  • Cocos2d-x实战 JS卷 Cocos2d-JS开发 PDF 电子书完整版本
  • cocos2d-js-min.9c507.js

    2020-05-28 13:39:29
    cocos2d-js-min.9c507.js
  • 资源名称:Cocos2d-x实战:JS卷——Cocos2d-JS开发内容简介:本书是介绍Cocos2d-x游戏编程和开发技术书籍,介绍了使用Cocos2d-JS中核心类、瓦片地图、物理引擎、音乐音效、数据持久化、网络通信、性能优化、多平台...
  • Cocos2d-js3.3 虚拟摇杆的实现-附件资源
  • 网页游戏开发之cocos2d-js教程cocos2d-html5教程合集_棒.zip cocos2d-js官方文档 cocos2d-js 入门 cocos2d-html5 http网络请求 小白学游戏编程 常用函数 教程 项目总结
  • cocos2d-js-v3.13-lite

    2017-06-12 10:21:18
    cocos2d-js-v3.13-lite ,是H5游戏的开发引擎
  • 学习cocos2d-js游戏开发,虽然cocos已经没落了, 但用这玩意儿开发个小游戏还是很6的.
  • Cocos2d-JS---demo

    2014-09-19 16:49:43
    Cocos2d-JS---demo 放在服务器上就可以直接预览了,本地打开是黑屏,Cocos2d-JS的方法及效果的演示
  • Cocos2d-js开发

    2017-07-07 09:51:56
    Cocos2d-js开发之旅 从html到手机游戏
  • TankBattle坦克大战cocos2d-js开发源码,仅供学习交流使用。内含打包好的apk,cocos2d-js开发全套源码,单机版。
  • 《Cocos2d-x实战 JS卷 Cocos2d-JS开发》完整源码
  • Cocos2d-JS开发之旅

    2018-09-04 11:46:31
    本书讲解cocos2d-js 和 h5游戏开发,如何开发跨平台的cocos2d游戏,对开发微信小游戏有很深刻的指导意义,本书内容由浅入深,讲解cocos2d-js的开发技术,是一本不可多得的好书!
  • Cocos2d-js日历

    2017-06-08 15:16:06
    JavaScript、cocos2d-js、日历,需要自己整理,不能直接使用~~~
  • 游戏开发-Cocos2d-JS快速入门+空战游戏实战
  • cocos2d-js 开发之旅 配套源代码
  • cocos2d-js基本知识整理

    2018-10-08 17:00:53
    cocos2d-js的基本知识的整理 , 基本代码的整理(加注释)
  • Cocos2d-JS-v3.0-API

    2015-03-01 10:37:24
    离线版Cocos2d-JS-v3.0 API,方便查阅
  • Cocos2d-js项目教程.pdf;一个入门系列的教程,如何安装配置环境等
  • Cocos2d-JS游戏开发

    2018-09-04 11:51:54
    该书作者是《保卫萝卜》核心开发人员,该书手把手教会大家如何使用Cocos2d-js开发一款《保卫萝卜》手游,cocos2d创始人 王哲 亲自为本书作序!是一部非常优秀的开发书籍!
  • Cocos2d-JS开发之旅 从HTML 5到原生手机游戏 PDF 带书签目录 完整版 以及Cocos2d-js项目教程 pdf文档
  • Cocos2d-x实战++JS卷++Cocos2d-JS开发+PDF电子书下载+带书签目录+完整
  • 《Cocos2d-x实战 JS卷 Cocos2d-js开发》随书源码 ch1-ch12 上卷 因为超过csdn上传限制分为2个压缩文件
  • Cocos2d-JS 快速入门——视频(下部分),实际项目,Cocos2d-JS 快速入门_[项目实战]重构moonwarriors[2_4]设置、关于界面.mp4等
  • Cocos2d-JS 快速入门——代码,入门级别的小游戏demo.可参考使用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,552
精华内容 1,420
关键字:

Cocos2d-JS