css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="game"></div>
<script type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>  
</body>
</html>
            
          
!
            
              var game = new Phaser.Game(800, 600, Phaser.CANVAS, "game", {}); //画面サイズ800×600

var start = new Array(1); //ゲームモード数
var cpu = false;  //CPUモード
var turn = 0; //現在のターン。0が青おはじき、1が赤おはじき
var hitf = false; //おはじきが衝突した後か
var spf = false;  //現在移動中か
var end = false;  //ゲーム終了か
var n = 1;  //敵味方のおはじきの数を増やそうとして断念
var arrow = new Array(n); //矢印
var ball = new Array(n);  //おはじき
var cf = new Array(n); //おはじき掴み中か

/* ゲームシーン */
var Game = function() {};
Game.prototype = {
  preload: function() {
    game.load.image(
      "arrow",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/longarrow2.png"
    );
    game.load.image(
      "o0",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/biidama_blue%5B1%5D.png"
    );
    game.load.image(
      "o1",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/biidama_red%5B1%5D.png"
    );
    game.load.image(
      "mokume",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/moku.jpg"
    );
    game.load.image(
      "ground",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/platform.png"
    );
    game.load.image(
      "win",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/WIN%20.png");
    game.load.image(
      "hudebako",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/hudebako.jpg");
    game.load.image(
      "kesigomu",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/kesigomu.jpg");
    game.load.image(
      "jougi",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/jougi.png");
    game.load.image(
      "jougi2",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/jougi2.jpg");
  },

  create: function() {
    game.physics.startSystem(Phaser.Physics.ARCADE);  //物理エンジンのArcade Physics開始
    background = game.add.sprite(10, 12, "mokume"); //背景
    background.scale.setTo(1.72, 1.7);
    
    block = game.add.group(); //障害物のグループを設定
    block.enableBody = true;  //障害物に物理エンジン有効化
    var h = block.create(175, 195, "hudebako"); //筆箱
    h.anchor.setTo(0.5, 0.5);
    h.scale.setTo(0.075, 0.065);
    h.body.immovable = true; //筆箱だけ動かない
        
    var k = block.create(730, 540, "kesigomu"); //消しゴム
    k.scale.setTo(0.7, 0.7);
    k.anchor.setTo(0.5, 0.5);
    k.rotation = 1;
    k.body.immovable = false;
    k.body.drag.set(100);
    
    var k = block.create(50, 200, "kesigomu"); //左上の消しゴム
    k.scale.setTo(0.7, 0.7);
    k.anchor.setTo(0.5, 0.5);
    k.body.immovable = false;
    k.body.drag.set(100);
   
    var j = block.create(200, 550, "jougi");  //木の定規
    j.scale.setTo(0.4, 0.5);
    j.anchor.setTo(0.5, 0.5);
    j.body.immovable = false;
    j.body.drag.set(350);
    
    var j2 = block.create(750, 250, "jougi2"); //プラ定規
    j2.scale.setTo(0.5, 0.5);
    j2.anchor.setTo(0.5, 0.5);
    j2.body.immovable = false;
    j2.body.drag.set(350);

    for(i=0;i<=n;i++){
      /* おはじき生成と矢印の設定 */
      ball[i] = game.add.sprite(200+i*400, 400-i*200, "o"+i); //o0が青おはじき、o1が赤おはじき
      game.physics.enable(ball[i], Phaser.Physics.ARCADE);
      ball[i].scale.setTo(0.1, 0.1);
      ball[i].anchor.setTo(0.5, 0.5);
      ball[i].body.bounce.setTo(0.5, 0.5);

      arrow[i] = game.add.sprite(ball[i].x, ball[i].y, "arrow");
      game.physics.enable(arrow[i], Phaser.Physics.ARCADE);
      arrow[i].anchor.setTo(0.1, 0.5);
      arrow[i].alpha = 0.0;

      /* おはじき掴み時と離し時にイベント設定 */
      ball[i].inputEnabled = true;
      ball[i].input.start(0, true);
      if(i==0) //数字ごとに設定する関数名が変えられなかったためif文利用
        ball[i].events.onInputDown.add(this.set1);
      else
        ball[i].events.onInputDown.add(this.set2);
      ball[i].events.onInputUp.add(this.launch);
      cf[i] = false;
    }
    
    var Text = this.add.text(20, 25, "    のターン", { fontSize: '100px', fill: '#f00' }); //左上の文字
  },

  update: function() {
    /* 衝突前と後の減速具合*/
    if(!hitf) {
      ball[0].body.velocity.x *= 0.95;
	    ball[0].body.velocity.y *= 0.95;
      ball[1].body.velocity.x *= 0.95;
	    ball[1].body.velocity.y *= 0.95;
      this.physics.arcade.overlap(ball[0], ball[1], this.hit, null, this);
    }
    else {
      game.physics.arcade.collide(ball[0], ball[1]);
      if(turn == 0) {
        ball[0].body.velocity.x *= 0.8;
	      ball[0].body.velocity.y *= 0.8;
        ball[1].body.velocity.x *= 0.95;
	      ball[1].body.velocity.y *= 0.95;
      }
      else {
        ball[1].body.velocity.x *= 0.8;
	      ball[1].body.velocity.y *= 0.8;
        ball[0].body.velocity.x *= 0.95;
	      ball[0].body.velocity.y *= 0.95;
      }
    }
    
    /* 各おはじきと矢印の設定 */
    for(var i=0;i<=n;i++){
      game.physics.arcade.collide(ball[i], block);  //障害物と衝突可に
      
      /* 矢印の設定*/
      arrow[i].x = ball[i].x;
      arrow[i].y = ball[i].y;
      arrow[i].rotation = game.physics.arcade.angleToPointer(arrow[i]); //矢印の角度をマウスの位置から変更
      if (cf[i] == true) {
        arrow[i].alpha = 1.0; //掴んでいたら矢印表示
      } else {
        arrow[i].alpha = 0.0; //離していたら矢印透明化
      }
      arrow[i].scale.setTo(
        game.physics.arcade.distanceToPointer(ball[i]) * 0.01,
        game.physics.arcade.distanceToPointer(ball[i]) * 0.01
      );  //マウスとおはじきの距離から矢印拡大
      
      /* おはじきの移動速度が落ち着いたとき完全停止して各種設定初期化&ターン変更 */
      if (Math.abs(ball[0].body.velocity.x)<10 && Math.abs(ball[0].body.velocity.y)<10 && Math.abs(ball[1].body.velocity.x)<10 && Math.abs(ball[1].body.velocity.y)<10 && spf) {
        if(turn == 0)
          turn = 1; //青から赤ターンへ
        else
          turn = 0; //赤から青ターンへ
        ball[0].body.velocity.setTo(0, 0);
        ball[1].body.velocity.setTo(0, 0);
        hitf = false; //衝突前に変更
        spf = false;  //移動なしに変更
      }
      
      /* 現在のターンのおはじきを左上に表示 */
      if(spf == 0){
        var t = game.add.sprite(20, 20, "o"+turn);
       t.scale.setTo(0.09, 0.09);
      }    
      
      /* おはじきが画面外かどうか判定 */
      if (ball[i].x > 797  || ball[i].x < 3 || ball[i].y > 597  || ball[i].y < 3) {
        this.over(i);
      }
    }
    
    /* CPUありの時のCPUのおはじき発射*/
    if(cpu && turn == 1 && !spf && !end) {
      var a = Math.random() * 0.2 + 0.8;  //0.8~1.0の乱数
      Xvector = (ball[0].x - ball[1].x) * 4 * a;
      Yvector = (ball[0].y - ball[1].y) * 4 * a;
      ball[1].body.velocity.setTo(Xvector, Yvector);
      spf = true;  //移動中に変更
    }
  },
  
  /* おはじき衝突時に相手のおはじきを押して自身減速 */
  hit: function() {
      if(turn == 0) {
        ball[1].body.velocity.setTo(ball[0].body.velocity.x, ball[0].body.velocity.y);
        ball[0].body.velocity.x *= 0.5;
	      ball[0].body.velocity.y *= 0.5;
      }
      else {
        ball[0].body.velocity.setTo(ball[1].body.velocity.x, ball[1].body.velocity.y);
        ball[1].body.velocity.x *= 0.5;
	      ball[1].body.velocity.y *= 0.5;
      }
      hitf = true; //衝突後に変更
  },
  
  /* 青おはじき発射準備 */
  set1: function() {
    if(turn == 1 || spf == 1 || (cpu && turn == 1) || end) return; //赤ターン,移動中,CPUなしで青ターン,ゲーム終了 どれかで終了
    cf[0] = true; //青おはじき掴み中
  },
  
  /* 赤おはじき発射準備 */
  set2: function() {
    if(turn == 0 || spf || cpu || end) return;  //青ターン.移動中,CPUありゲーム終了 どれかで終了
    cf[1] = true; //赤おはじき掴み中
  },
  
  /* おはじき発射 */
  launch: function() {
    for(i=0;i<=n;i++){
      if(cf[i] && !end){ 
        cf[i] = false;  //おはじき離す
        Xvector = (ball[i].x - game.input.activePointer.worldX) * 4;
        Yvector = (ball[i].y - game.input.activePointer.worldY) * 4;
        ball[i].body.velocity.setTo(Xvector, Yvector);
        spf = true;  //移動中に変更
      }
    }
  },
  
  /* クリックでタイトル画面へ移動する画像の表示 */
  over: function(x) {
    /* 勝った方のおはじき表示と画面外のおはじき消去 */
    if(x == 0) {
      var w = game.add.sprite(195, 120, "o1");
    }
    else {
      var w = game.add.sprite(195, 120, "o0");
    }
    end = true;
    w.scale.setTo(0.9, 0.9);
    w.inputEnabled = true;
    w.input.start(0, true);
    w.events.onInputDown.add(function() {game.state.start('Boot')});
    var ov = game.add.sprite(220, 300, "win");
    ov.inputEnabled = true;
    ov.input.start(0, true);
    ov.events.onInputDown.add(function() {game.state.start('Boot')});

    var Text = this.add.text(200, 420, "画像をクリックでタイトルへ戻る", { fontSize: '30px', fill: '#000' });
  } 
  };

/* タイトル画面 */
var Boot = function(game) {};
Boot.prototype = {
  preload: function() {
    this.load.image(
      "backo",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/background_ohajiki.jpg"
    );
    this.load.image(
      "title",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/ohajikiotosi.png"
    );
    this.load.image(
      "1vs1",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/1vs1.png"
    );
    this.load.image(
      "1vsCPU",
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1566178/1vsCPU.png"
    );
  },

  create: function() {
    var backo = game.add.sprite(0, 0, "backo"); //背景
    backo.scale.setTo(0.9, 1);
    
    var title = game.add.sprite(140, 160, "title"); //タイトル
    title.scale.setTo(0.9, 1);
   
    /* 各種フラグ初期化 */
    turn = 0;
    hitf = false;
    spf = false;
    end = false;
    start[0] = game.add.sprite(120, 400, "1vs1"); //CPUなし用
    start[1] = game.add.sprite(380, 400, "1vsCPU"); //CPUあり用
    /* 各画像にイベント設定 */
    for(i = 0;i<=1;i++){
      start[i].inputEnabled = true;
      start[i].input.start(0, true);
    }
    start[0].events.onInputDown.add(function() {cpu = false; game.state.start("Game");}); //CPUなしでゲーム開始
    start[1].events.onInputDown.add(function() {cpu = true; game.state.start("Game");});  //CPUありでゲーム開始
  },
 
};

/* 二つのシーン */
game.state.add("Boot", Boot, true); //タイトル画面
game.state.add("Game", Game, true); //ゲームシーン
game.state.start("Boot"); //タイトル画面から起動
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console