こんにちわ。ジークスで開発をしている酒井といいます。

※文中のサンプルコードがrawgithub.com廃止により動かなくなっていたので
cdn.jsdelivr.netに移行しました

ゲームを作るのが好きで、たまに初心者の人を集めて一緒にゲームを作る活動をしています。

みんな最初はモチベーション高いんですが、環境構築やツールの設定とか、準備が色々必要だと、その間に疲れてきちゃうので、始めてすぐにゲームの動きをいじれるようなライブラリを作って試しています。

開発環境

今日はCodePenに環境を用意しました。
ここをいじって、だんだんゲームっぽくしていきます。

See the Pen unitaro.js: starter kit1 by sakai yoichi (@oosamanet) on CodePen.

１：タスクをいじってみる

今回は四角しか表示できないゲームライブラリを使います。
タスクを１つ作るごとにゲーム画面には四角が生まれます。
タスクの中身をいじっていく事で、四角が動いたり、別の四角を生み出したりといった
ゲームっぽい動きを作っていきましょう

先頭の所に書いてある部分が１つのタスクです。
幅とか高さ、色を書く部分と、２つのプログラムを書く部分で構成されています。
initは、四角が生まれた時に一回だけ実行されます。
updateは、１秒に20回実行されます。

var ENEMY={
  w:30, //幅
  h:30, //高さ
  color:'red', //色
  init:function(x,y){
    //生まれた時に実行
    this.x = x;
    this.y = y;
  },
  update:function(age){
    if (this.y < 0){
      this.stop();
    }
    //1秒に20回実行
  }
};

最初はクリックした位置に赤い四角がぺたぺた貼られていくだけです。
これを改造していこう！
・w:30の所の数字を変えてみる
・h:30の所の数字を変えてみる
・color:'red'のredの所を違う色の名前に変えてみる
・updateの中にthis.x += 1;を追加

例)

  update:function(age){
    //1秒に20回実行
    this.x += 1;
  }

・updateの中にthis.y += 2;を追加
・updateに追加した1とか2の数字を変えてみる

２：加速度をつけてみる

改造していくと、クリックして貼られた四角が動くようになったと思います。
この動きは何かというと、中学の時に習った等速直線運動ってやつですね。
これを現実の物体が落ちる時みたいに等加速度運動にしてみます。
・initに速度を定義

this.vy = 0;

・updateで速度をy座標に足す

this.y += this.vy;

・速度に加速度を足す

this.vy += 1;

・vyに足している1を変えてみる
この1の所が重力加速度にあたります。少なくすれば月みたいに弱い重力になります。

３：はねかえらせてみる

さっきの動きだけでもちょっと面白くなってきました。みんなたいてい
１０秒くらいは夢中でクリックしまくってくれますが、逆にいうと
１０秒で飽きます＾＾

今度は地面ではねかえるような感じにしていきます
・initに地面の高さを定義

this.ground = 400;

・updateにはねかえる動きを定義

if (this.y > this.ground){
  this.vy = -this.vy;
}

・はねかえるようになると、四角が大きくて見にくいので小さくしたほうがいいかも
this.wやthis.hの所の数字を5くらいにするといいと思います

４：横にも動かしてみる

縦に落ちて地面ではねかえる動きまでできた所で今度は横の動きを作っていきます
・initに横の速度を定義

this.vx = 4;

・updateで速度を加算

this.x += this.vx;

これだと全部右に寄っていってしまうのでランダム要素を入れてみます。
JavascriptではMath.random()と書くと0から1までの乱数を返してくれます

initの最後で横の速度を変更
if (Math.random() > 0.5){
  this.vx = -this.vx;
}

５：横もはねかえらせる

・今度は横もはねかえらせてみます
updateに追加

    if (this.x < 10){
      this.vx = -this.vx;
    }

・これだと左だけなので右も。

    if (this.x > app.WIDTH-10){
      this.vx = -this.vx;
    }

まとめ

See the Pen unitaro.js: starter kit1 by sakai yoichi (@oosamanet) on CodePen.

最後まで編集したコードをのせておきます。
２０行くらいしかいじってないですが、結構面白い動きになってきたんじゃないでしょうか

次は（あるのか？）もうちょっとゲームっぽい事をしてみようかと思います