游戏主界面，同时也是主程序，包括sprite的生成加入以及游戏状态的控制。

下面同样贴下源码再讲解;

  1. /**
  2.  * Power by  html5中文网(html5china.com)
  3.  * author: jackyWHJ
  4.  */
  5. var STATE_PLAYING = 0;
  6. var STATE_GAMEOVER = 1;
  7.  
  8. var g_sharedGameLayer;
  9.  
  10. var GameLayer = cc.Layer.extend({
  11.     _time:0,
  12.     _timeLabel:null,
  13.     _timeString:"",
  14.  
  15.     screenRect:null,
  16.     _state:STATE_PLAYING,
  17.     _explosions:null,
  18.     _texOpaqueBatch:null,
  19.     _blocks:[],
  20.     _heroFrameCache:null,
  21.     init:function () {
  22.         var bRet = false;
  23.         if (this._super()) {
  24.             cc.SpriteFrameCache.getInstance().addSpriteFrames(s_textureOpaquePack_plist);
  25.             this._heroFrameCache = cc.SpriteFrameCache.getInstance();
  26.             this._heroFrameCache.addSpriteFrames(s_textureNormalImage_plist);
  27.             cc.SpriteFrameCache.getInstance().addSpriteFrames(s_textureLoveImage_plist);
  28.             // reset global values
  29.             LLK.map = [];//元素表,Block数组
  30.             this._state = STATE_PLAYING;
  31.  
  32.             // OpaqueBatch
  33.             var texOpaque = cc.TextureCache.getInstance().addImage(s_textureOpaquePack);
  34.             this._texOpaqueBatch = cc.SpriteBatchNode.createWithTexture(texOpaque);
  35.             this._texOpaqueBatch.setBlendFunc(gl.SRC_ALPHA, gl.ONE);
  36.             this.addChild(this._texOpaqueBatch);
  37.  
  38.             var winSize = cc.Director.getInstance().getWinSize();
  39. //            this._wayManager = new WayManager(this);
  40.             this.screenRect = cc.rect(0, 0, winSize.width, winSize.height + 10);
  41.  
  42.             // explosion batch node
  43.             cc.SpriteFrameCache.getInstance().addSpriteFrames(s_explosion_plist);
  44.             var explosionTexture = cc.TextureCache.getInstance().addImage(s_explosion);
  45.             this._explosions = cc.SpriteBatchNode.createWithTexture(explosionTexture);
  46.             this._explosions.setBlendFunc(gl.SRC_ALPHA, gl.ONE);
  47.             this.addChild(this._explosions);
  48.             Explosion.sharedExplosion();
  49.  
  50.             this.initBackground();
  51.             this.initBlock();
  52.             // accept touch now!
  53.  
  54.             this._timeLabel = cc.LabelTTF.create("00:00","Arial Bold",16);
  55.             this._timeLabel.setPosition(180,520);
  56.             this._timeLabel.setColor(cc.c3b(255,255,255));
  57.             this.addChild(this._timeLabel,10);
  58.  
  59.             if( 'keyboard' in sys.capabilities )
  60.                 this.setKeyboardEnabled(true);
  61.  
  62.             if( 'mouse' in sys.capabilities )
  63.                 this.setMouseEnabled(true);
  64.  
  65.             if( 'touches' in sys.capabilities )
  66.                 this.setTouchEnabled(true);
  67.             if (LLK.SOUND) {
  68. //                cc.log(cc.AudioEngine.getInstance().isMusicPlaying());
  69.                 cc.AudioEngine.getInstance().playMusic(s_bgMusic_mp3,true);
  70.             }
  71.             // schedule
  72.             this.scheduleUpdate();
  73.             this.schedule(this.scoreCounter, 1);
  74.             bRet = true;
  75.  
  76.             g_sharedGameLayer = this;
  77.         }
  78.         return bRet;
  79.     },
  80.  
  81.     initBlock:function(){
  82.         var mapIndex = 0,i = 0,j = 0;
  83.         var imgLen =  LLK.CONTAINER.NORMALIMAGES.length;
  84.         if(LLK.MODE){
  85.             imgLen =  LLK.CONTAINER.NORMALIMAGES.length;
  86.             for ( i = 0; i < LLK.LEVEL.x*LLK.LEVEL.y; i+=2) {
  87.                 this._blocks[i] = this._blocks[i + 1] = LLK.CONTAINER.NORMALIMAGES[Math.floor(Math.random() * imgLen)];
  88.             }
  89.         }
  90.         else{
  91.             imgLen =  LLK.CONTAINER.MENGIMAGES.length;
  92.             for ( i = 0; i < LLK.LEVEL.x*LLK.LEVEL.y; i+=2) {
  93.                 this._blocks[i] = this._blocks[i + 1] = LLK.CONTAINER.MENGIMAGES[Math.floor(Math.random() * imgLen)];
  94.             }
  95.         }
  96.         var imgName = "";
  97.         for ( j=0; j < LLK.LEVEL.y; j++) {
  98.             for ( i=0; i < LLK.LEVEL.x; i++) {
  99.                 imgName = this.randomArray(this._blocks);
  100.                 var temp = new Block(imgName);
  101.                 temp.pointX = i;
  102.                 temp.pointY = j;
  103.                 temp.name = imgName;
  104.                 temp.id = mapIndex;
  105.                 LLK.map[temp.id] = temp;
  106.                 temp.setAnchorPoint(cc.p(0, 0));
  107.                 temp.setPosition(i*60, j*60+30);
  108.                 this.addChild(temp);
  109.                 mapIndex ++;
  110.             }
  111.         }
  112.         LLK.COUNT = mapIndex;
  113.     },
  114.     randomArray:function (arr){
  115.         var index = Math.floor(Math.random()*arr.length);
  116.         return arr.splice(index,1)[0];
  117.     },
  118.  
  119.     scoreCounter:function () {
  120.         if( this._state == STATE_PLAYING ) {
  121.             this._time++;
  122.  
  123.             var minute = 0 | (this._time / 60);
  124.             var second = this._time % 60;
  125.             minute = minute > 9 ? minute : "0" + minute;
  126.             second = second > 9 ? second : "0" + second;
  127.             this._timeString = minute + ":" + second;
  128.             this._timeLabel.setString(this._timeString);
  129. //            this._levelManager.loadLevelResource(this._time);
  130.         }
  131.     },
  132.  
  133.     initBackground:function () {
  134.         // bg
  135.         var bgImage = s_b03;
  136.         if(Math.random() > 0.5){
  137.             bgImage = s_b04;
  138.         }
  139.         this._backSky = cc.Sprite.create(bgImage);
  140.         this._backSky.setAnchorPoint(cc.p(0, 0));
  141.         this._backSkyHeight = this._backSky.getContentSize().height;
  142.         this.addChild(this._backSky, -10);
  143.     },
  144.     onGameOver:function () {
  145.         this._state = STATE_GAMEOVER;
  146.         var scene = cc.Scene.create();
  147.         scene.addChild(GameOver.create());
  148.         cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));
  149.     }
  150. });
  151.  
  152. GameLayer.create = function () {
  153.     var sg = new GameLayer();
  154.     if (sg && sg.init()) {
  155.         return sg;
  156.     }
  157.     return null;
  158. };
  159.  
  160. GameLayer.scene = function () {
  161.     var scene = cc.Scene.create();
  162.     var layer = GameLayer.create();
  163.     scene.addChild(layer, 1);
  164.     return scene;
  165. };
  166.  
  167. GameLayer.prototype.addExplosions = function (explosion) {
  168.     this._explosions.addChild(explosion);
  169. };
  170. GameLayer.prototype.addSpark = function (spark) {
  171.     this._texOpaqueBatch.addChild(spark);
  172. };
　　首先，我们同样是把该界面所需的纹理集添加进来
  1. cc.SpriteFrameCache.getInstance().addSpriteFrames(s_textureOpaquePack_plist);
  2. this._heroFrameCache = cc.SpriteFrameCache.getInstance();
  3. this._heroFrameCache.addSpriteFrames(s_textureNormalImage_plist);
  4. cc.SpriteFrameCache.getInstance().addSpriteFrames(s_textureLoveImage_plist);

　　这里因为我们这个游戏存在这2个模式，所以有2个纹理集，之后的程序中会根据当前选择的模式对应使用纹理集。

　　之后添加爆炸效果的纹理集，创建cc.SpriteBatchNode然后把它加入Layer。
  1.  　　　　　　// explosion batch node
  2.             cc.SpriteFrameCache.getInstance().addSpriteFrames(s_explosion_plist);
  3.             var explosionTexture = cc.TextureCache.getInstance().addImage(s_explosion);
  4.             this._explosions = cc.SpriteBatchNode.createWithTexture(explosionTexture);
  5.             this._explosions.setBlendFunc(gl.SRC_ALPHA, gl.ONE);
  6.             this.addChild(this._explosions);
  7.             Explosion.sharedExplosion();
　　接下来便是初始化背景和Block，背景的我们在教程1有介绍这里就不再多说，说说initBlock方法吧
  1. 　　initBlock:function(){
  2.         var mapIndex = 0,i = 0,j = 0;
  3.         var imgLen =  LLK.CONTAINER.NORMALIMAGES.length;
  4.         if(LLK.MODE){
  5.             imgLen =  LLK.CONTAINER.NORMALIMAGES.length;
  6.             for ( i = 0; i < LLK.LEVEL.x*LLK.LEVEL.y; i+=2) {
  7.                 this._blocks[i] = this._blocks[i + 1] = LLK.CONTAINER.NORMALIMAGES[Math.floor(Math.random() * imgLen)];
  8.             }
  9.         }
  10.         else{
  11.             imgLen =  LLK.CONTAINER.MENGIMAGES.length;
  12.             for ( i = 0; i < LLK.LEVEL.x*LLK.LEVEL.y; i+=2) {
  13.                 this._blocks[i] = this._blocks[i + 1] = LLK.CONTAINER.MENGIMAGES[Math.floor(Math.random() * imgLen)];
  14.             }
  15.         }
  16.         var imgName = "";
  17.         for ( j=0; j < LLK.LEVEL.y; j++) {
  18.             for ( i=0; i < LLK.LEVEL.x; i++) {
  19.                 imgName = this.randomArray(this._blocks);
  20.                 var temp = new Block(imgName);
  21.                 temp.pointX = i;
  22.                 temp.pointY = j;
  23.                 temp.id = mapIndex;
  24.                 LLK.map[temp.id] = temp;
  25.                 temp.setAnchorPoint(cc.p(0, 0));
  26.                 temp.setPosition(i*60, j*60+30);
  27.                 this.addChild(temp);
  28.                 mapIndex ++;
  29.             }
  30.         }
  31.         LLK.COUNT = mapIndex;
  32.     },

　　在该方法中，我们根据当前选择的模式随机生成this._blocks数组，记住这里的block是成对出现的。之后我们根据我们的界面的XY层数从我们的this._blocks数组中随机取出元素，取出的元素作为参数初始化Block然后把它添加到Layer中，在生成Block的时候我们要注意给Block的坐标pointX 、pointY赋值，并且使用我们的map数组缓存Block数组，供之后的Block移动查找移动位置的Block使用，最后，我们不要忘记给我们的Block计数附上值。

　　之后在构造方法里我们做了这样一件事，把时间显示label添加到Layer
  1. this._timeLabel = cc.LabelTTF.create("00:00","Arial Bold",16);
  2. this._timeLabel.setPosition(180,520);
  3. this._timeLabel.setColor(cc.c3b(255,255,255));
  4. this.addChild(this._timeLabel,10);
　　接下来就是我们的时间统计了this.schedule(this.scoreCounter, 1);这里每隔一秒调用一下scoreCounter方法，我们来看看这个方法
  1. 　　scoreCounter:function () {
  2.         if( this._state == STATE_PLAYING ) {
  3.             this._time++;
  4.  
  5.             var minute = 0 | (this._time / 60);
  6.             var second = this._time % 60;
  7.             minute = minute > 9 ? minute : "0" + minute;
  8.             second = second > 9 ? second : "0" + second;
  9.             this._timeString = minute + ":" + second;
  10.             this._timeLabel.setString(this._timeString);
  11. //            this._levelManager.loadLevelResource(this._time);
  12.         }
  13.     },

　　当游戏还在运行状态，时间计数每次加1然后转化成相应的时间显示形式之后修改时间显示label的内容。

　　之后，我们还有一个游戏结束的调用方法
  1. 　　onGameOver:function () {
  2.         this._state = STATE_GAMEOVER;
  3.         var scene = cc.Scene.create();
  4.         scene.addChild(GameOver.create());
  5.         cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));
  6.     }

它做的是修改游戏的状态并且切换游戏场景。

下面是几个主要功能的教程

用cocos2d-html5做的消除类游戏《英雄爱消除》——概述

用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单

用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现

用cocos2d-html5做的消除类游戏《英雄爱消除》(3)——游戏主界面

用cocos2d-html5做的消除类游戏《英雄爱消除》(4)——游戏结束

ps:概述中有完整的源码链接

用cocos2d-html5做的消除类游戏《英雄爱消除》(3)——游戏主界面的更多相关文章

  1. 用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单

    系统主菜单如下图所示: 首先,介绍下这个主菜单,它包含了一个动画logo以及一个按钮选项,动画logo每隔1秒钟切换一张图片,点击相应的按钮选项会切换不同的游戏场景. 下面看下这个界面的源码: /** ...

  2. 用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现

    Block可以说是这个游戏的核心类,它除了包含自身的一些属性和方法外还添加了对触摸事件的响应. 我们先来看下源码吧 /** * Power by html5中文网(html5china.com) * ...

  3. 用cocos2d-html5做的消除类游戏《英雄爱消除》——概述

    在bbs.html5china.com论坛学习了MV和老马的小熊蘑菇后我也自己模仿他们做了这样子一个游戏,权当技术交流学习,现在附上游戏截图和源码. 游戏截图: 1.系统菜单界面: 2.游戏界面 3. ...

  4. 用cocos2d-html5做的消除类游戏《英雄爱消除》(4)——游戏结束

    游戏结束界面: 在前面几个教程中,这个界面的创作所需要的知识点基本我们都讲过了,这里就说下用户数据的缓存吧,也是先来看下源码 /** * Power by html5中文网(html5china.co ...

  5. 消除类游戏(js版)

    最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码总共456行,未经过严格测试 ...

  6. ccf题库中2015年12月2号消除类游戏

    题目如下: 问题描述 消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游戏棋盘上进行,棋盘的每一行每一列的方格上放着一个有颜色的棋子,当一行或一列上有连续三个或更多的相同颜色的棋子时,这 ...

  7. CCF2015122消除类游戏（C语言版）

    问题描述 消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游戏棋盘上进行,棋盘的每一行每一列的方格上放着一个有颜色的棋子,当一行或一列上有连续三个或更多的相同颜色的棋子时,这些棋子都被消 ...

  8. ccf消除类游戏

    问题描述 消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游戏棋盘上进行,棋盘的每一行每一列的方格上放着一个有颜色的棋子,当一行或一列上有连续三个或更多的相同颜色的棋子时,这些棋子都被消 ...

  9. CCF CSP 201512-2 消除类游戏

    CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201512-2 消除类游戏 问题描述 消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行 ...

随机推荐

  1. STL学习笔记（关联式容器）

    Set和Multisets set和multiset会根据特定的排序准则,自动将元素排序.两者不同在于multisets允许元素重复而set不允许. 1.set和multiset的操作函数 生成.复制 ...

  2. AlamoFireDemo

    // // ViewController.swift // AlamFireDemo // // import UIKit import Alamofire class ViewController: ...

  3. [Hibernate开发之路]（2）Hibernate问题

    (1)数据库驱动问题 log4j:WARN No appenders could be found for logger (org.hibernate.cfg.Environment). log4j: ...

  4. 转：Exception loading sessions from persistent storage

    直用tomcat一段时间都正常无事,最近一次启动tomcat就发生以下异常: 严重: IOException while loading persisted sessions: java.io.EOF ...

  5. source sh运行脚本的差别

    主要有两种方式运行shell脚本 1)source test.bsh 2)sh test.bsh 1)souce运行脚本文件会在父程序中运行.各项动作都会在原本的bash内生效.运行过程不另开进程.脚 ...

  6. SD--怎样增强是同一类出库单使用不同号码段

    在现实的业务中,一个公司有多个销售组织,它们使用同一个出库类型,业务往往希望它们创建的出库单的号码採用不同号码范围.但在sap里出库单号码范围是在出库单类型里设置,也就是使用同样的出库单类型,也就使用 ...

  7. iOS Masonry 查看更多 收起

    Masonry 查看更多 收起效果实现,带动画 demo下载地址: https://github.com/qqcc1388/MasonryDemo

  8. lnmp 环境require(): open_basedir restriction in effect 错误

    最近配置开发用的lnmp环境,环境配置完成后,爆500错误,查看nginx错误日志 open_basedir 将 PHP 所能打开的文件限制在指定的目录树,包括文件本身 错误日志显示,访问脚本不在 o ...

  9. 【转】使用Python学习selenium测试工具

    出处:https://my.oschina.net/u/1433482/blog/633231?fromerr=vaxqh9bn

  10. 使用Eclipse自带的Maven插件创建Web项目时报错：

    问题描述: 使用Eclipse自带的Maven插件创建Web项目时报错: Could not resolve archetype org.apache.maven.archetypes:maven-a ...