You are my little alpaca game ios source code, you are my little alpaca

You are my little alpaca game ios source code, you are my little alpaca

<Ignore_js_op> <Ignore_js_op> <Ignore_js_op> <Ignore_js_op> source code download: http://code.662p.com/view/8582.html You may have noticed that neurocat is replaced with a cute little alpaca :) Online Game address: http://app9.download.anzhuoshang... ge & isappinstalled = 0 Game Analysis The three interfaces are basically the whole content of the game: 1. the main interface on the left shows the game name and the main character, which gives the players a general impression of the overall style of the game. 2. In the middle of the game interface, click a space to prevent the orange hexagonal bricks from blocking the alpaca. 3. The right side is the game's success or failure interface. The main logic of the entire game is completed on the game interface. The method is as follows: 1. At the beginning of game initialization, little alpaca is always standing in the middle of the map, and random bricks are produced in other areas of the map. 2. Players click a blank area and place a brick to enclose the alpaca. 3. One step for AI to find the path. 4. Loop 2 and 3 until the alpaca is enclosed in a circle (game succeeded), or the alpaca reaches the map boundary (game failed) The idea of the entire game is clear, and then we begin to enter the encoding stage. Development environment and new project This tutorial is developed based on the latest Download v3.0RC1. Download the engine and decompress it to a directory on the disk. Open the console and enter the following command to create a project. $ D cocos2d-js-v3.0-rc1/tools/cocos2d-console/bin $./Cocos new-l js -- no-native $ Cd MyJSGame/ $ ../Cocos run-p web Environment building is not the focus of this article, more detailed information can be referred to: "Building Cocos2d-JS Development Environment" Main Interface implementation The game entry code is in main. js. Open it in the editor and modify it to the following code. Cc. game. onStart = function (){ // 1. Cc. view. adjustViewPort (true ); // 2. If (cc. sys. isMobile) Cc. view. setDesignResolutionSize (320,500, cc. ResolutionPolicy. FIXED_WIDTH ); Else cc. view. setDesignResolutionSize (320,480, cc. ResolutionPolicy. SHOW_ALL ); Cc. view. resizeWithBrowserSize (true ); // 3. Cc. LoaderScene. preload (resources, function (){ // 4. GameScene = new GameScene (); Cc. director. runScene (gameScene ); }, This ); }; Cc. game. run (); The key points are as follows: 1. Set the browser meta to adapt to the screen. The engine sets the meta viewport value based on the screen size to achieve better screen adaptation. 2. enable different resolution adaptation policies for mobile browsers and PC browsers. 3. Pre-load image sound and other resources. Cc. LoaderScene. preload will generate an "loading x %" interface. After the resource loading is complete, call the anonymous function passed in by the second parameter. For html-based games, the page is placed on the server side for the browser to download. For a smooth user experience, cc. LoaderScene. preload allows the browser to cache the resources of the remote server locally. The resource to be preloaded is defined in the src/Resources. js file. 4. Start the first scenario of the game. The main interface is implemented by two layers: 1. GameLayer layer: the main logic layer of the game. When the map matrix is not initialized, only the background map is displayed. 2. StartUI layer: displays logo images and start game buttons. The initialization code of GameScene is as follows: Var GameScene = cc. Scene. extend ({ OnEnter: function (){ This. _ super (); Var bg = new cc. Sprite (res. bg ); Bg. attr ({ Anchor X: 0.5, AnchorY: 0.5, X: cc. winSize. width/2, Y: cc. winSize. height/2 }); This. addChild (bg ); Layers. game = new GameLayer (); This. addChild (layers. game ); Layers. startUI = new StartUI (); This. addChild (layers. startUI ); Layers. winUI = new ResultUI (true ); Layers. loseUI = new ResultUI (false ); Layers. writable UI = new writable UI (); } }); The cc. Scene. extend method provided by the engine enables js to implement the inheritance features of advanced object-oriented languages. The onEnter method is the callback of the message to be displayed after the scenario Initialization is completed. In onEnter, this. _ super (); must be called to ensure that Scene is correctly initialized. There is only one scene in the design of the entire game, and switching between interfaces is implemented by the layer. This may not be an optimal design, but it also provides another idea. To use layer for switching, the global variable layers stores an instance at each layer. GameLayer is detailed in the next chapter. The implementation of StartUI is as follows: Var StartUI = cc. Layer. extend ({ Ctor: function (){ This. _ super (); Var start = new cc. Sprite (res. start ); Start. x = cc. winSize. width/2; Start. y = cc. winSize. height/2 + 20; This. addChild (start ); }, OnEnter: function (){ This. _ super (); Cc. eventManager. addListener ({ Event: cc. EventListener. TOUCH_ALL_AT_ONCE, OnTouchesEnded: function (touches, event ){ Var touch = touches [0]; Var pos = touch. getLocation (); If (pos. y <cc. winSize. height/3 ){ Layers. game. initGame (); Layers. startUI. removeFromParent (); } } }, This ); } }); The function of cc. Layer. extend is the same as that of cc. Scene. extend. It is only an extended Scene and an extended Layer. Ctor is the constructor in the Cocos2d-JS and must call this. _ super (); In ctor to ensure proper initialization. In onEnter, we bind event listening to The StartUI layer and determine the coordinates of the touch point to trigger scene switching. Careful readers may ask, why not use the Menu control? The current Cocos2d-JS version has been modularized and you can choose to load only the modules used in the game, reducing the final package size. In order not to add the Menu module, the simplest touch point coordinate judgment is used here to achieve common things. Game interface implementation Orange block Initialization The game map area is composed of 9*9 hexagonal squares. First, use InActive images to initialize the side matrix. The related code is as follows: Var ox = x = y = 0, odd = false, block, tex = this. batch. texture; For (var r = 0; r <ROW; r ++ ){ Y = BLOCK_YREGION * r; Ox = odd * OFFSET_ODD; For (var c = 0; c <COL; c ++ ){ X = ox + BLOCK_XREGION * c; Block = new cc. Sprite (tex, BLOCK2_RECT ); Block. attr ({ AnchorX: 0, AnchorY: 0, X: x, Y: y, Width: BLOCK_W, Height: BLOCK_H }); This. batch. addChild (block ); } Odd =! Odd; } Every cycle of odd changes, and the upper and lower dislocation of the layout has been achieved. Attr is a new method of the Node base class, allowing you to easily set multiple attributes at a time. The initGame function initializes the Orange square. Let's take a look at the implementation of initGame: InitGame: function (){ If (this. inited) return; This. player_c = this. player_r = 4; This. step = 0; // 1. For (var I = 0, l = this. active_nodes.length; I <l; I ++ ){ This. active_nodes.removeFromParent (); } This. active_nodes = []; For (var r = 0; r <ROW; r ++ ){ For (var c = 0; c <COL; c ++ ){ This. active_blocks [r] [c] = false; } } // 2. This. randomBlocks (); // 3. This. player. attr ({ Anchor X: 0.5, AnchorY: 0, X: OFFSET_X + BLOCK_XREGION * this. player_c + BLOCK_W/2, Y: OFFSET_Y + BLOCK_YREGION * this. player_r-5 }); This. player. stopAllActions (); This. player. runAction (this. moving_action ); This. inited = true; },

Http://ios.662p.com/thread-2125-1-1.html