ゲームを自分で作って、自分で遊ぶ ~ crappy bird 編 ~

By JavaScript

はじめに

皆さんは,flappy birdをご存知でしょうか?

flappy bird とはグエン氏が作成し一日に5000万回以上ダウロードされた人気ゲームアプリです。小鳥を操作して土管などの障害物をよけながら進み、その距離を競います。

参考 : https://flappybird.io/

今回はこのflappy birdならぬ、crappy(くだらない) birdを作成してみたいと思います。

作成に当たっては、前回、打ち上げ花火を作成したときと同様、ダニエルシフマンさんのCoding Challengeを参考に、小鳥を前後左右に移動させたり、パイプの速度などを変更させました。

完成した動画

※音が出るのでご注意

※BGMは動画作成アプリで後から付けたもの

※小鳥を操作したときの電子音はプログラムで実装したもの

PCの十字キーで小鳥を操作します。

技術

Javascriptのフレームワークであるp5.jsとProcessingを活用しています。

コード

var bird;
var pipes = [];

let img;
let song;

//Point
let startTime;
const oneSec = 1000;
let elapsedTime = 0;
let count = 1;

let level;

function preload() {
  img = loadImage('./bird.png');
  soundFormats('mp3', 'ogg');
  song = loadSound('./jump.mp3');
}

function setup() {
  //createCanvas(650, 600);
  createCanvas(windowWidth,windowHeight);
  
  bird = new Bird(img);
  bird = new Bird();
  img.loadPixels();
  
  //Set Point
  startTime = millis();
  textSize(30);
  
  p = createP();
}
  
function draw() {
  if (level === 1 || level === 2 || level === 4 || level === 6) {
    background(135, 206, 235);
    fill(0);
  } else {
    background(0);
  }
  //draw pipes    
  for (var i = pipes.length-1; i >= 0; i--) {
    pipes[i].show();
    pipes[i].update();
    
    if (pipes[i].hits(bird)) {
      gameover();
    }
    
    if (pipes[i].offscreen()) {
      pipes.splice(i, 1);
    }
  }
  
  //bird
  bird.update();
  bird.show();
  
  if (level === 1 || level === 2 || level === 4 || level === 6) {
    fill(51);
  } else {
    fill(225);
  }
  text('Level : ' + level, 10, 30);
  text('Time : ' + count + 'sec', 10, 60);
  text('Point : ' + count * 11 * level + 'pt', 10, 90);
  const now = millis();
  elapsedTime = now - startTime;
  if (elapsedTime >= oneSec) {
    count++;
    startTime = millis();
  }
  
    if (0 < count <= 15) {
      level = 1;
      if (frameCount % 120 == 0) {
        pipes.push(new Pipe(2));
      }
      console.log(level + ":" + count);
    } 
    
    if (15 <= count && 30 > count) {
      level = 2;
      console.log(level + ":" + count);    
      if (frameCount % 150 == 0) {
        pipes.push(new Pipe(3));
      }
    } 
    
    if (30 <= count && 60 > count) {
      level = 3;
      console.log(level + ":" + level);
      if (frameCount % 120 == 0) {
        pipes.push(new Pipe(4));
      }
    } 
    
    if (60 <= count && 90 > count) {
      level = 4;
      if (frameCount % 90 == 0) {
        pipes.push(new Pipe(5));
      }
      console.log(level + ":" + count);
    }
    
    if (90 <= count && 120 > count) {
      level = 5;
      if (frameCount % 85 == 0) {
        pipes.push(new Pipe(6));
      }
      console.log(level + ":" + count);
    }
    
    if (120 <= count && 200 > count) {
      level = 6;
      if (frameCount % 95 == 0) {
        pipes.push(new Pipe(7));
      }
      console.log(level + ":" + count);
    }
    
    if (200 <= count) {
      gameclear();
    }
}

function mousePressed(){
  bird.up();
  song.play();
}

function keyPressed() {
  if (key == ' ') {
    bird.up();
    //song.play();
    console.log("UP");
  }
  p.html(keyCode);
  if (keyCode === UP_ARROW) {
    bird.up();
  } else if (keyCode === DOWN_ARROW){
    bird.down();
  } else if (keyCode === LEFT_ARROW) {
    bird.moveL();
    console.log("L");
  }else if (keyCode === RIGHT_ARROW) {
    bird.moveR();
    console.log("R");
  }
  song.play();
}

function gameover() {  
  if (level === 1 || level === 2 || level === 4 || level === 6) {
    background(0, 192);
    fill(225);
  } else {
    background(225);
    fill(0);
  }
  textSize(64);
  textAlign(CENTER, CENTER);
  text("Game Over", width/2, height/2);
  text("level : " + level, width/2, height/4.5);
  text("Point : " +count * 10 * level + 'pt', width/2, height/3);
  
  noLoop();
}

function gameclear() {  
  if (level === 1 || level === 2 || level === 4 || level === 6) {
    background(0, 192);
    fill(225);
  } else {
    background(225);
    fill(0);
  }
  textSize(64);
  textAlign(CENTER, CENTER);
  text("Game Clear", width/2, height/2);
  text("Point : " + count * 11 * level + 'pt', width/2, height/3);
  
  noLoop();
}
function Pipe(level) {
  this.top = random(height/3 * random(2));
  this.bottom = random(height/3 * random(2));
  this.x = width;
  this.w = 40;
  this.level = level;
  
  this.hits = function(bird) {
    
    
    if ( bird.y < this.top ) {
      if (bird.x > this.x - this.x/6 && bird.x < this.x - this.x/6 + this.w) {
        return true;     
      }
    }
    if ( bird.y > height - this.bottom ) {
      if (bird.x > this.x && bird.x < this.x + this.w) {
        return true;     
      }
    }
    return false;
  }
  
  this.show = function() {
    if (level === 1 || level === 2 || level === 4 || level === 6) {
      fill(0, 128, 255);
    } else {
      fill(0, 225, 0); 
    }
    
    strokeWeight(1);
    
    rect(this.x - this.x/6, 0, this.w, this.top);
    rect(this.x, height-this.bottom, this.w, this.bottom);
  } 
  this.update = function() {
    this.x -= this.level;
  }
  
  this.offscreen = function(){
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
}
//function Bird(img){
function Bird(){
  this.x = width/3;
  this.y = height/2;
  
  this.gravity = 0.2;
  this.lift = -15;
  this.velocity = 0;
  this.location = 0;
  
  this.show = function() {
    fill(225,0,0);
    stroke(51);
    //bird.update();
    //ellipse(this.x, this.y, 40, 40); 
    image(img, this.x, this.y, 50, 50);
  }
  
  this.up = function() {
    this.velocity += this.lift;
  }
  
  this.down = function() {
     this.velocity -= this.lift;
  }
  
  this.moveR = function (){
    this.x += 35;
  }
  
  this.moveL = function() {
    this.x -= 35;
  }
  
  this.update = function() {
    this.velocity += this.gravity;
    this.velocity *= 0.9;
    this.y += this.velocity;
    
    this.x += this.location;
    
    if (this.y > height) {
      this.y = height;
      this.velocity = 0;
    }
    if (this.y < 0) {
      this.y = 0;
      this.velocity = 0;
    }
  }
}
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="Pipe.js"></script>
  <script language="javascript" type="text/javascript" src="bird.js"></script>
  <script language="javascript" type="text/javascript" src="cloud.js"></script>
  <script language="javascript" type="text/javascript" src="p5.sound.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

  <!-- This line removes any default padding and style.
       You might only need one of these values set. -->
  <style> body { padding: 0; margin: 0; } </style>
</head>

<body>
<div>
</body>
</html>

今回は小鳥を操作したときの電子音を出すためにp5.sound.jsを読み込んでいます。

その他プログラムの説明は、グエンの動画を見てください　:）

このゲームではステージ6まであり、ステージ毎に棒の速さがどんどん早くなります。

50回くらいやってみたのですが2回ほどしか、クリアできませんでした。

クソゲーです　：）

しかし、あれこれと自分で、速度を調整したり、小鳥をペイントツールで描いて、読み込ませたり、

音が出るようにカスタマイズしたりと、いろいろやっていると

不思議と自分の作ったプログラムが

いとおしくなってきます。

皆さんもぜひ挑戦してみてはいかがでしょうか？

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）