はじめに
皆さんは,flappy birdをご存知でしょうか?
flappy bird とはグエン氏が作成し一日に5000万回以上ダウロードされた人気ゲームアプリです。小鳥を操作して土管などの障害物をよけながら進み、その距離を競います。
今回はこの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回ほどしか、クリアできませんでした。
クソゲーです :)
しかし、あれこれと自分で、速度を調整したり、小鳥をペイントツールで描いて、読み込ませたり、
音が出るようにカスタマイズしたりと、いろいろやっていると
不思議と自分の作ったプログラムが
いとおしくなってきます。
皆さんもぜひ挑戦してみてはいかがでしょうか?
コメント