"You are my little alpaca" game iOS source

<ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op> Source Download: http://code.662p.com/view/8582.html You may have noticed that the cat was replaced with a cute alpaca:) Online game address: Http://app9.download.anzhuoshang ... ge&isappinstalled=0 Game analysis The three interface is basically the entire content of the game: 1. On the left is the main screen, showing the game name and the protagonist, so that the player's overall picture of the game wind has a general impression. 2. The middle is the game interface, click the space to prevent orange hexagonal bricks to contain the baby alpaca. 3. On the right is the game success or failure interface. The main logic of the entire game is done in the game interface. Here's how it's played: 1. Beginning of game initialization, Alpaca is always standing in the middle of the map, randomly producing some random bricks in other areas of the map. 2. The player clicks on an empty area and places a brick to contain the alpaca. 3. Alpaca AI pathfinding Move one step. 4. Cycle 2 and 3 until the alpaca is trapped inside a circle (game success), or the alpaca reaches the map border (game failed) The whole idea of the game was clear, and then we started to go into the coding phase. Development environment and New project This tutorial is developed based on the current latest download V3.0RC1. Download the engine and unzip it to a directory on the disk. Open the console and enter the following command to create a new project. $CD Cocos2d-js-v3.0-rc1/tools/cocos2d-console/bin $./cocos new-l JS--no-native $CD myjsgame/ $.. /cocos run-p Web Environmental construction is not the focus of this article, more detailed information can be consulted: "Building COCOS2D-JS development environment" Main interface Implementation The entry code for the game is opened in Main.js with the editor and modified 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 resolved as follows: 1. Set the browser meta to fit the screen, the engine will set the meta viewport value according to the screen size, will achieve a better screen adaptation effect. 2. Enable different resolution adaptation policies for mobile browsers and PC browsers. 3. Pre-load resources such as picture sounds. Cc. Loaderscene.preload will generate a "load of X" interface, waiting for the resource to end, call the second parameter passed in the anonymous function. For HTML-based games, the page is placed on the server side for the browser to download, in order to achieve a smooth user experience, CC. Loaderscene.preload lets the browser first cache the remote server's resources locally. The resource that needs to be preloaded is defined in the Src/resources.js file. 4. Start the first scene of the game. The main interface is implemented by two layers: The 1.GameLayer layer, the game's main logic layer, displays only the background map when the map matrix is not initialized. 2.StartUI layer, display logo image and start Game button. The initialization code for Gamescene is as follows: var gamescene = cc. Scene.extend ({ Onenter:function () { this. _super (); var bg = new CC. Sprite (res.bg); Bg.attr ({ anchorx: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.shareui = new Shareui (); } }); CC provided by the engine. The Scene.extend method allows JS to implement advanced object-oriented language inheritance characteristics. The OnEnter method is that the scene initialization completes the message callback that is about to be displayed, and This._super () must be called in the OnEnter to ensure that the scene is properly initialized. The whole game is designed with only one scene, and the switch between interfaces is implemented by layer, which may not be an optimal design, but it also provides another way of thinking. In order to use layer to achieve the switch, the global variable layers stores an instance of each layer. Gamelayer we explain in detail in the next section. 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); } }); Cc. The Layer.extend function, like Cc.Scene.extend, is just an extended Scene, an extended layer. ctor is a constructor in Cocos2d-js, and This._super () must be called in ctor to ensure proper initialization. In OnEnter, we are binding event listeners for the STARTUI layer to determine the location coordinates of the touch points to trigger scene switching. The attentive reader may want to ask, why not use the menu control? The current version of COCOS2D-JS is modular, and you can choose to load only the modules used in the game, reducing the final package size. In order not to join the menu module, the simplest touch point coordinates are used to achieve common use. Implementation of the game interface Initialization of the orange block The game map area is made up of 9*9 hexagon blocks, first initializing the side matrix with the inactive image. The relevant 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; } Each cycle odd change, has realized the upper and lower dislocation arrangement. Attr is a new method of node base class that can easily set multiple properties at once. The initialization of the Orange block is done by the Initgame function. First 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 ({ anchorx: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; },

Detailed description?: http://ios.662p.com/thread-2125-1-1.html

"You are my little alpaca" game iOS source