[创建游戏]让我们制作一个可以成为Cocos2D-JS的初学者的Cuntan游戏!

你好。 Shakezoomer. 是。

上次 开始使用游戏开发开始从现在开始!让我们用Cocos2D-JS展示Hello World我们在文章中使用Cocos2D-JS介绍了Hello World。

这一次,我实际上将使用Cocos2D-JS实际制作粤语游戏。

如果你从来没有做过一个游戏,直到现在,甚至是初学者,仍在学习JavaScript,让我们首先让一个移动一个!我认为可以说。

成品是 这里 它就像是。源代码 GitHub. 请根据需要提及它。

我们走吧。

index.html添加main.js.

在上一篇文章的末尾(或Cocos2D-JS已被DL和Zip也扩展),我认为以下文件配置如下。

Cocos文件

我最后一次编辑helloWorld.html,但这是index.html。

<!DOCTYPE html>
<html>
<head>
    <title>Go!Go!Mr.Snake!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <script type="text/javascript" src="cocos2d-js-v3.10-lite.js" charset="UTF-8"></script>
    <canvas id="gameCanvas" width="640" height="1136"></canvas>
    <script type="text/javascript" src="main.js"></script>
</body>

内容与helloworld.html几乎相同。改变点是

  • 我改变了标题(游戏名称)
  • 更改阅读Cocos2D-JS-V3.10-Lite.js的时序
  • 我试图读取一个名为main.js的文件
  • 改变了帆布尺寸

这是大约四个吗?

更改Cocos2D-JS-V3.10-Lite.js的加载时间是从iPhone访问时可能无法显示。

此外,还添加了名为main.js的文件。最多,我最后一次将JavaScript代码直接写信给HelloWorld.html,但我澄清了将它分成另一个JS文件。

关于画布的大小,这次准备的图像是iPhone 5 640的屏幕尺寸×因为它的大小为1136,它是它的形式。

资源文件的准备

在制作游戏时,您需要一个图像或声源。让我把它们放在人的目录下面。

资源

本文中使用的资源文件是 GitHub. 你可以从中dl。

此外,从Cocos2d准备这些文件,打开main.js并添加以下代码:

var res = {
  img_bg : "Resources/bg.png",
  img_coin : "Resources/pluskun.png",
  img_enemy : "Resources/rectman.png",
  img_snake : "Resources/snake.png",
  se_hitwall : "Resources/hitWall.mp3",
  se_getPoint : "Resources/getPoint.mp3",
  se_dead : "Resources/dead.mp3",
  se_changeDir : "Resources/changeDirection.mp3"
}

您现在可以在表单`res.img_bg`中调用背景图像的路径。通过这种方式,当图像的文件名稍后更改,您稍后将能够解决此问题。

背景和主角看法

首先,让我们展示背景和主角的背面。
 蛇

将以下代码添加到main.js的末尾。

window.onload = function(){
    cc.game.onStart = function(){
        //load resources
        var preload_res = [
          res.img_bg,
          res.img_coin,
          res.img_enemy,
          res.img_snake,
          res.se_hitwall,
          res.se_getPoint,
          res.se_dead,
          res.se_changeDir
        ]
        cc.LoaderScene.preload(preload_res, function () {
            var MyScene = cc.Scene.extend({
                _snake:null,
                _enemies: [],
                _coins: [],
                _dx: 10,
                _score: 0,
                _scoreLabel: null,
                onEnter:function () {
                    this._super();
                    var size = cc.director.getWinSize();
                    // 背景の作成
                    var bg = cc.Sprite.create(res.img_bg);
                    bg.setPosition(size.width/2, size.height/2);
                    this.addChild(bg);
                    // ヘビの作成
                    var sprite = cc.Sprite.create(res.img_snake);
                    sprite.setPosition(size.width / 2, size.height / 2);
                    sprite.setFlippedX(true);
                    this.addChild(sprite, 0);
                    this._snake = sprite; // this._snakeにヘビのSpriteを保持する
                }

            });
            cc.director.runScene(new MyScene());
        }, this);
    };
    cc.game.run("gameCanvas");
};

大多数是与以前的helloworld的代码相同。

作为一个点,

1.我们使用前面准备的res.img_bg等待阅读图像
2.将Sprite的Sprite作为MyScene的实例变量`_业务

它是一个地方。关于`_snake`,这个蛇的精灵将来将在未来多次使用,因此它以这种方式被视为实例变量。

如果在此状态中从浏览器访问index.html,我认为蛇将显示在后台的中间。
show_snake.

移动蛇

所以让我们把这个蛇旋在左边和右边。

使用任何游戏引擎,可以以每秒60帧的速度移动,例如60 fps。此外,Cocos2D-JS允许您通过调用`stentrationupdate()`调用每个update`函数。所以让我们在这个“更新”功能中移动蛇。

var MyScene = cc.Scene.extend({
    _snake:null,
    _dx: 10,  // 1. 追加
    onEnter:function () {
        // 省略
        this._snake = sprite;
        this.scheduleUpdate(); // 2. updateを呼び出すようにする  
    },
    // 3. update関数
    update:function(dt){
      // これが毎フレーム呼び出される
      var snakeX = this._snake.getPositionX();
      var newX = snakeX + this._dx;  // 4. 新しいX座標を計算
      this._snake.setPositionX(newX);
      var size = cc.director.getWinSize();
      // 5. 画面の外に行ってしまわないようにする
      if (newX > size.width || newX < 0) {
          cc.audioEngine.playEffect(res.se_hitwall);
          this.changeSnakeDirection();
      }
    },
    // 6. ヘビの向きを変える関数
    changeSnakeDirection: function(){
      this._dx = -this._dx;
      // 7. ヘビの画像を反転させる
      if (this._dx > 0) {
        this._snake.setFlippedX(true);
      }else{
        this._snake.setFlippedX(false);
      }
      cc.audioEngine.playEffect(res.se_changeDir);
    }
});

嗯,我们将按顺序解释上述代码。
首先,1合1设置为10.`_dx`。这将是太空蛇移动的数量。
在2中,设置为每帧被调用@ scheduleupdate();“。

它是要调用的更新函数的正文。

在更新功能中,首先,获得蛇的当前X坐标,向其添加“_DX”,并将其设置为新的Snake x坐标。 (4份)

顺便说一下,在Cocos2d-js中,左下角是(x,y)=(0,0),并且x和y的值将随着它进入右上角而增加。

这是一个调用更新的情况,蛇的x坐标将右边进入10,但它会在屏幕之外立即出现。因此,在5中,如果蛇的新坐标超过屏幕的宽度,或者如果它变得小于0,则它调用一个名为“变化的阵容”变换阵容的功能。此功能在下面立即实现。

顺便说一下,`cc.audioengine.playeffect(res.se_hitwall);`是一个声音声音的函数,声音在屏幕结束时发出声音。

6实现改变“变化缠绕”蛇的函数的内容。 `this._dx = -this._dx;`反转'_dx`的标志。当`_dx`是+10时,-10是在-10处更改为+10。现在,每次都叫`变化缠结的方式时,推进蛇的方式将水平更换。同时,通过在7处反转蛇的图像,正面向蛇进行的方向。

我会将其添加到Main.js和Open Index.html,我认为蛇会向左和右侧左右移动!

move_snake.

申请敌人和硬币

首先,让我们在几秒钟内举行一次敌人。这是一个敌人。

终端

它看起来很暴力。

首先,在添加数组`_enemies`和scene_coins of myscene实例变量后,

var MyScene = cc.Scene.extend({
    _snake:null,
    _enemies: [],
    _coins: [],
    // ..以下略
```
次に`changeSnakeDirection`のすぐ下に、以下のコードを追加しましょう。
```
spawnEnemy: function(){
  var size = cc.director.getWinSize();
  // 敵Spriteの生成
  var enemy = cc.Sprite.create(res.img_enemy);
  var x = Math.floor( Math.random() * size.width ) ;
  var y = 0;
  enemy.setPosition(x , y);  // 敵の出現時の座標
  this.addChild(enemy, 0);
  this._enemies.push(enemy); // _enemiesという配列に追加して保持しておく
  var randDuration = Math.random() * 2;
  var baseDuration = 2;
  var duration = baseDuration + randDuration; // 2~4の間の数字を生成
  var move = new cc.MoveBy(duration, cc.p(0, size.height)); // MoveByというアクションを生成
  var remove = new cc.RemoveSelf(true); // 自身を削除するアクションを生成
  var action = new cc.Sequence([move, remove]); // 各アクションを順番に実行するアクションを生成
  enemy.runAction(action); // 敵にアクションを実行させる
},

生成敌人精灵,`math.random()`使用`math.random()`随机随机地随机敌人的外观坐标。
此外,生成的敌人精灵会增加并持有“_ENEMIES”的数组,允许您稍后使用敌人和蛇碰撞判断。

好吧,要移动这个敌人,你可以在“更新”功能中只有一点地移动坐标,这被称为其他蛇,但这次另一个实施让我们看起来。

Cocos2D-JS有能力将动画和行动实施为Canhans。例如,

var move = new cc.MoveBy(duration, cc.p(0, size.height));

在这里,我们生成了ope`的动作。这是您想要按照“持续时间”秒(X,Y)“秒”中的“CC.P(x,y)`指定的金额”的动作。

这次,将随机秒数设置在2秒至4秒之间,它从屏幕的底部移动到顶部,因此它设置屏幕垂直大小,如`CC.P(0,size.height)`。是。

在这里捕获一点动作。

此操作的动作是“通过CC.P(X,Y)从当前位置”移动坐标的动作“,但是与类似于”MoveTo“的类似物品。

在“moveto`的情况下,它被称为”移动到CC.P(x,y)中指定的坐标“。这两个是相似的,但请注意,这与动作的内容不同。

例如,如果您已经执行了`pevoby(1,cc.p(10,10))`(x,y)=(0,0)`位置,“x三秒在动作”中移动y方向“在y方向上移动三次,它位于3秒后的`(x,y)=(30,30)`的位置。

另一方面,如果执行`moveTo(1,cc.p(10,10))`三次,则移动到自动作以来(x,y)=(10,10)的坐标为止,自动作“”进行三次,第一(0,0)至(10,10)移动1秒,但是已经(10,10)已经处于(10,10)移动动作的位置没做什么。

生成移动操作后,您已创建一个名为“cc.removeself`”的操作,创建一个删除自身的操作,并按顺序创建它们的序列。
这样就完成了“在屏幕顶部屏幕之后几秒钟,并删除自己”的动作。

最后,敌人的精灵是在敌人的秀精灵与“敌人”中进行。
这完成了生成敌人的“Spawnemy”功能。让它在一秒钟内再次调用一次。

onEnter:function () {
    // 省略
    this._snake = sprite;
    this.scheduleUpdate();
    this.schedule(this.spawnEnemy, 1); // 追加
},

使用“时间表”在oneenter中,每秒叫做`spawnenemy`。
完成此操作时,它将如下:

show_enemy.

很多敌人出来了!

同样,使它产生硬币。

添加以下代码下面`spawnenemy`。

spawnCoin: function(){
  var size = cc.director.getWinSize();
  var coin = cc.Sprite.create(res.img_coin);
  var x = Math.floor( Math.random() * size.width ) ;
  var y = 0;
  coin.setPosition(x , y);
  this.addChild(coin, 0);
  this._coins.push(coin)
  var randDuration = Math.random() * 4;
  var duration = 5 + randDuration;
  var move = new cc.MoveBy(duration, cc.p(0, size.height));
  var remove = new cc.RemoveSelf(true);
  var action = new cc.Sequence([move, remove])
  coin.runAction(action);
},

硬币试图减缓运动。此外,让我们尝试在1.5秒内逐个退出一个速度。

onEnter:function () {
    // 省略
    this._snake = sprite;
    this.scheduleUpdate();
    this.schedule(this.spawnEnemy, 1);
    this.schedule(this.spawnCoin, 1.5); // 追加
},

这是正确的。现在,敌人和硬币定期出现在屏幕上,它已成为一场比赛。

碰撞判断

如果这就是这样,即使是敌人,蛇也不会去敌人,即使你得到硬币,也没有任何事情发生。

因为这不是无聊,让让我们碰撞判决。
有各种碰撞判断的方法,但这一次简单地确定了两个精灵是否重叠。

在Cocos2d-js中,您可以使用`cc.rectintersectsrect`来确定两个方格是否重叠。

在“更新”末尾添加以下代码

update:function(dt){
  // .. 省略

  // 衝突判定
  var snakeRect = this._snake.getBoundingBox();
  // 敵と衝突しているか
  for(var i = 0; i < this._enemies.length; i++){
    if (cc.rectIntersectsRect(snakeRect, this._enemies[i].getBoundingBox())) {
      // ゲームオーバー
    }
  }
  // コインと衝突しているか
  var i = this._coins.length;
  while(i--){
    if (cc.rectIntersectsRect(snakeRect, this._coins[i].getBoundingBox())) {
      this._coins[i].removeFromParent();
      this._coins.splice(i,1);
      this._score++;
      cc.audioEngine.playEffect(res.se_getPoint);
      // スコア獲得
    }
  }
},

首先,`var snakerect = this._snake.getboundingbox();“获得蛇精灵的矩形。敌人的阵列`_ENEMIES`在循环上打开并检查每个敌人是否与蛇碰撞。如果你碰撞,这是一个游戏。

接下来我正在检查与硬币的碰撞,但我正在以不同的方式检查敌人的碰撞。

如果你与敌人冲突,那将在当场比赛,游戏将停止,但没有问题,但如果你与硬币碰撞,你就不会从数组`_coins`脱离那个硬币,如果您不会从数组中删除硬币,我将碰撞判断并多次获得相同的硬币。

它不会详细描述它将通过JavaScript解释,但在这里,如果您将数组中的所有硬币视为敌人,则可以在循环期间从数组中删除硬币。因此,在上面的方式中,可以从循环中的数组中删除。

现在,如果你与敌人碰撞,那将是游戏,如果你与硬币碰撞,你就可以获得硬币。它同时成为一场比赛!

完全的···?

好吧,据此

  • 如果点击屏幕,则蛇的移动方向会发生变化
  • 在游戏中退出游戏
  • 1增加了硬币时的分数
  • 显示得分

如果您实现等,它将作为游戏完成。

应粗略地利用以前的知识来实现​​这些实施。此外,它没有详细解释, GitHub. 正如您所拥有的完整系统代码,我认为您将能够参考该游戏完成游戏。

完全的 这里 你可以玩。当然,您可以从智能手机中播放。

好吧,这个游戏是完整的,但怎么样?你有没有听说过“我想做更多的事情”?

  • 运动是否太单调了?让我们在敌人的运动中进行变化。如果你使用`cc.rotateby`,你可以旋转敌人,如果你把一系列动作传递给cc.spawh`,你可以同时执行多个动作,所以“在左右移动到左右的屏幕”可以垂直移动。
  • 很难阅读代码吗?让我们重构代码。由GitHub的代码也是一个改进的空间。
  • 你发现了一个虫子吗?我必须解决....顺便说一下,当蛇到屏幕结束时,蛇不会在屏幕外面返回的错误已经找到....
  • 想赚钱吗?如果您尝试将广告放在游戏屏幕下或用AppStore或Google Play将其分发为应用程序,则使用Cocos2D-X,它也能够进行手动重量。
  • 蛇和敌人是可爱的吗?让我们用更酷的图片更换它。您也可以为Parapara Manga提供动画几张照片。

它仍然是一个简单的游戏,但有很多东西仍然可以得到改善。
我很高兴你能够通过更多的有趣的事情来发展这个游戏,并研究了这篇文章。

在最后

使用Cocos2D-JS的游戏开发,它是怎么回事?

这个蛇游戏是一个非常简单且简单的,但即使是一个没有富有的图形和长篇故事的简单游戏也可能是一个大的奇怪道路。

如果您刷新了您在这篇文章中学到的技术,您也可以在世界上开发一个击中世界的游戏。

给这篇文章的人

主要为智能手机开发游戏。我也喜欢轨道或服务。我最喜欢的口袋妖怪是yadon。@ShakeZoomer.