After creating the good one project, the overall schema directory looks like this:
1.index file
The 第7-11 line code is the meta-information that sets the Web page, and meta information is the basic information of the Web page that makes the Index.html Web page very well displayed on the mobile device. The 24th line of code puts a canvas tag, the canvas tag is provided by HTML5, with JavaScript you can draw graphics 2D graphics on the canvas, cocos2d-js the game scenes that run on the web are rendered by canvas, The rendering of Cocos2d-js's native running game scene is rendered via OpenGL. 2.main.js file Main.js is responsible for launching the game scene, regardless of whether the Web browser is running or running locally, it starts the game scene with this file, the Main.js code is as follows
The 50th line of code above is the launch game, Cc.game is a game launcher object. The code 第57-61 line is the Set Game View property, where line 3rd is the game view size, which involves screen adaptation issues. Cc. Resolutionpolicy.show_all is a screen adaptation strategy. The 63rd line of code is the resource required to load the game scene, where the g_resources parameter is an array of loaded resources, which is the src/ The 64th line of code defined in the Resource.js file is running the helloworldscene scene, Cc.director is the Director object, and running the helloworldscene scene will enter the scene. The 67th line of code is Cc.game.run () is running the game startup object. 3.project.json File project configuration information The Project.json file code is as follows:
The Project.json file is represented by a JSON string, focusing on the labeled statement, where the 5th line of code sets whether to display the frame rate debug information, and the frame rate debug is displayed in the lower left corner of the text message. The 6th line of code sets the frame rate to 60. That is, the screen 1/60s refreshed once, the 11th line of code is loading the game engine module, COCOS2D-JS engine has many modules, the module is defined in jsdemo/frameworks/cocso2d-html5/ Moduleconfig.json in the Explorer to see the file, these modules are loaded when the scene starts, so be sure to import as needed, otherwise the waste of resources. For example, adding a Chipmunk physics engine module, the code line 11th can be modified as follows: "Modules": ["cocos2d", "Chipmunk"] 第13-15 line is the JavaScript file that declares the need to load, The files here are written primarily by the user, and each time you add a JavaScript file to the project, you need to add a declaration here. 4.resource.js file Resource.js file in the SRC folder, the files in that folder are maintained by the user, and the variables corresponding to the resource are defined in the Resource.js file. The Resource.js file code is as follows:
Line 1th defines the JSON variable res, which defines an alias for each resource file, accesses the resource in the program, does not write to the resource name, but accesses it through a configurable alias, which makes it convenient to change after the environment changes. The 7th line of code is to define the resource file collection variable g_resources, whose content is to add the resource file in the RES variable to the G_resource by line 9th of the code. Resources placed in the g_resources variable are loaded when the scene is started, run under a Web browser, and a 404 error is reported if the loaded resource is not found. 5.app.js file App.js file in Src, the files in that folder are maintained by the user. The App.js code is as follows
The 2nd line of code, defines a wizard property 3rd line of code, constructs the method 6th line of code, initializes the parent class 12th code, Get screen size declare two classes in the App.js file Helloworldlayer see the first line of code and helloworldscene see code line 70th, and then instantiate Helloworldlayer code 73rd line by Helloworldscene, Helloworl Dscene is a scene, Hellowordlayer is a layer, and the scene consists of several layers. The 15th line is to create a picture menu item object that will callback the function method when clicked. The 26th line of code is the location of the menu item object, where Closeitem.attr ({...}) A statement can have multiple properties, similar to the 52nd line of code, expressed in JSON format, x attribute represents x coordinate, y attribute represents y coordinate, Anchorx represents X axis Anchor point, Anchory represents Y axis anchor point. The 71st line of code is to declare the OnEnter method, he is to enter the Helloworldscene scene callback, OnEnter method is to override the parent class method, must be called through This._super () The parent class OnEnter method,
JS Project file Structure
