ここまでの見本

lesson2・チャプター３

ここまでの見本1

//最初に一回だけ呼び出される初期設定
function setup() {
					
 //キャンバスの大きさ
 createCanvas(400, 500);
}
					
//繰り返し呼び出される処理
function draw() {
					
 //背景の描画
 background('black');
					
 //塗りの色設定
 fill('white');
 //円形(胴体)
 ellipse(200, 300, 200, 200);

}

lesson2・チャプター4

ここまでの見本2

//最初に一回だけ呼び出される初期設定
function setup() {
					
 //キャンバスの大きさ
 createCanvas(400, 500);
}
					
//繰り返し呼び出される処理
function draw() {
					
 //背景の描画
 background('black');
					
 //塗りの色設定
 fill('white');
 //円形(胴体)
 ellipse(200, 300, 200, 200);
 //円形(頭)
 ellipse(200, 150, 150, 150);

}

lesson2・チャプター5

ここまでの見本3

//最初に一回だけ呼び出される初期設定
function setup() {
					
 //キャンバスの大きさ
 createCanvas(400, 500);
}
					
//繰り返し呼び出される処理
function draw() {
					
 //背景の描画
 background('black');
					
 //塗りの色設定
 fill('white');
 //円形(胴体)
 ellipse(200, 300, 200, 200);
 //円形(頭)
 ellipse(200, 150, 150, 150);

 //塗りの色設定と円形(目)
 fill('black');
 ellipse(170, 140, 20, 20);
 ellipse(230, 140, 20, 20);

}

lesson2・チャプター6

ここまでの見本4

//最初に一回だけ呼び出される初期設定
function setup() {
					
 //キャンバスの大きさ
 createCanvas(400, 500);
}
					
//繰り返し呼び出される処理
function draw() {
					
 //背景の描画
 background('black');
					
 //塗りの色設定
 fill('white');
 //円形(胴体)
 ellipse(200, 300, 200, 200);
 //円形(頭)
 ellipse(200, 150, 150, 150);

 //塗りの色設定と円形(目)
 fill('black');
 ellipse(170, 140, 20, 20);
 ellipse(230, 140, 20, 20);

 //塗りの色設定と円形(ボタン)
 fill('red');
 ellipse(200, 260, 20, 20);
 ellipse(200, 300, 20, 20);
 ellipse(200, 340, 20, 20);
}

lesson2・チャプター7

ここまでの見本5

//最初に一回だけ呼び出される初期設定
function setup() {
					
 //キャンバスの大きさ
 createCanvas(400, 500);
}
					
//繰り返し呼び出される処理
function draw() {
					
 //背景の描画
 background('black');
					
 //塗りの色設定
 fill('white');
 //円形(胴体)
 ellipse(200, 300, 200, 200);
 //円形(頭)
 ellipse(200, 150, 150, 150);

 //塗りの色設定と円形(目)
 fill('black');
 ellipse(170, 140, 20, 20);
 ellipse(230, 140, 20, 20);

 //塗りの色設定と円形(ボタン)
 fill('red');
 ellipse(200, 260, 20, 20);
 ellipse(200, 300, 20, 20);
 ellipse(200, 340, 20, 20);

 //塗りの色設定と四角(口)
 fill('black');
 rectMode(CENTER);
 rect(200, 200, 30, 15);
}

lesson2・チャプター8

ここまでの見本6

//最初に一回だけ呼び出される初期設定
function setup() {
					
 //キャンバスの大きさ
 createCanvas(400, 500);
}
					
//繰り返し呼び出される処理
function draw() {
					
 //背景の描画
 background('black');
					
 //塗りの色設定
 fill('white');
 //円形(胴体)
 ellipse(200, 300, 200, 200);
 //円形(頭)
 ellipse(200, 150, 150, 150);

 //塗りの色設定と円形(目)
 fill('black');
 ellipse(170, 140, 20, 20);
 ellipse(230, 140, 20, 20);

 //塗りの色設定と円形(ボタン)
 fill('red');
 ellipse(200, 260, 20, 20);
 ellipse(200, 300, 20, 20);
 ellipse(200, 340, 20, 20);

 //塗りの色設定と四角(口)
 fill('black');
 rectMode(CENTER);
 rect(200, 200, 30, 15);

 //塗りの色設定と三角(鼻)
 fill('orange')
 triangle(190, 150, 210, 150, 200, 180);

}

lesson2・チャプター9

ここまでの見本7

//最初に一回だけ呼び出される初期設定
function setup() {
					
 //キャンバスの大きさ
 createCanvas(400, 500);
}
					
//繰り返し呼び出される処理
function draw() {
					
 //背景の描画
 background('black');
					
 //塗りの色設定
 fill('white');
 //円形(胴体)
 ellipse(200, 300, 200, 200);
 //円形(頭)
 ellipse(200, 150, 150, 150);

 //塗りの色設定と円形(目)
 fill('black');
 ellipse(170, 140, 20, 20);
 ellipse(230, 140, 20, 20);

 //塗りの色設定と円形(ボタン)
 fill('red');
 ellipse(200, 260, 20, 20);
 ellipse(200, 300, 20, 20);
 ellipse(200, 340, 20, 20);

 //塗りの色設定と四角(口)
 fill('black');
 rectMode(CENTER);
 rect(200, 200, 30, 15);

 //塗りの色設定と三角(鼻)
 fill('orange')
 triangle(190, 150, 210, 150, 200, 180);

 //塗りの色設定と名前
 fill('green')
 textAlign(CENTER);
 textSize(20);
 text('SNOWMAN', 200, 450);
}

lesson2・チャプター10

ここまでの見本8

//最初に一回だけ呼び出される初期設定
function setup() {
					
 //キャンバスの大きさ
 createCanvas(400, 500);
 //線の塗りを無効にする
 noStroke();
}
					
//繰り返し呼び出される処理
function draw() {
					
 //背景の描画
 background('black');
					
 //塗りの色設定
 fill('white');
 //円形(胴体)
 ellipse(200, 300, 200, 200);
 //円形(頭)
 ellipse(200, 150, 150, 150);

 //塗りの色設定と円形(目)
 fill('black');
 ellipse(170, 140, 20, 20);
 ellipse(230, 140, 20, 20);

 //塗りの色設定と円形(ボタン)
 fill('red');
 ellipse(200, 260, 20, 20);
 ellipse(200, 300, 20, 20);
 ellipse(200, 340, 20, 20);

 //塗りの色設定と四角(口)
 fill('black');
 rectMode(CENTER);
 rect(200, 200, 30, 15);

 //塗りの色設定と三角(鼻)
 fill('orange')
 triangle(190, 150, 210, 150, 200, 180);

 //塗りの色設定と名前
 fill('green')
 textAlign(CENTER);
 textSize(20);
 text('SNOWMAN', 200, 450);
}

lesson3・チャプター3

ここまでの見本9

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(220);
				  
 textSize(30);
 textAlign(CENTER);
 text("KIRAMEKI TARO", 200, 150);
 text("きらめき 太郎", 200, 250);
}

lesson3・チャプター4

ここまでの見本10

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(220);
				  
 textSize(30);
 textAlign(CENTER);
 text("KIRAMEKI TARO", 200, 150);
 text("きらめき 太郎", 200, 250);
}

lesson3・チャプター5

ここまでの見本11

//最初に一回だけ呼び出される初期設定
function setup() {
  createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
  background(220);

  textSize(30);
  textAlign(CENTER);
  text("KIRAMEKI TARO, 200, 150);
  text("きらめき 太郎", 200, 250);
}

lesson4・チャプター3

ここまでの見本12

//最初に一回だけ呼び出される初期設定
function setup() {
 //キャンバスの大きさ
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 //背景の描画
 background(220);

 //線を無効にする
 noStroke();

 //円形1
 fill("black");
 ellipse(width / 4 * 1, height / 2, 150, 150);

 //円形2
 fill("gray");
 ellipse(width / 4 * 2, height / 2, 150, 150);

 //円形
 fill("white");
 ellipse(width / 4 * 3, height / 2, 150, 150);
}

lesson4・チャプター4

ここまでの見本13

//最初に一回だけ呼び出される初期設定
function setup() {
 //キャンバスの大きさ
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 //背景の描画
 background(220);

 //線を無効にする
 noStroke();

 //円形1
 fill(0);
 ellipse(width / 4 * 1, height / 2, 150, 150);

 //円形2
 fill(125);
 ellipse(width / 4 * 2, height / 2, 150, 150);

 //円形
 fill(255);
 ellipse(width / 4 * 3, height / 2, 150, 150);
}

lesson4・チャプター5

ここまでの見本14

//最初に一回だけ呼び出される初期設定
function setup() {
 //キャンバスの大きさ
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 //背景の描画
 background(220);

 //線を無効にする
 noStroke();

 //円形1
 fill(255, 0, 0);
 ellipse(width / 4 * 1, height / 2, 150, 150);

 //円形2
 fill(0, 255, 0);
 ellipse(width / 4 * 2, height / 2, 150, 150);

 //円形
 fill(0, 0, 255);
 ellipse(width / 4 * 3, height / 2, 150, 150);
}

lesson4・チャプター6

ここまでの見本15

//最初に一回だけ呼び出される初期設定
function setup() {
 //キャンバスの大きさ
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 //背景の描画
 background(220);

 //線を無効にする
 noStroke();

 //円形1
 fill("#FF0000");
 ellipse(width / 4 * 1, height / 2, 150, 150);

 //円形2
 fill("#00FF00");
 ellipse(width / 4 * 2, height / 2, 150, 150);

 //円形
 fill("#0000FF");
 ellipse(width / 4 * 3, height / 2, 150, 150);
}

lesson4・チャプター7

ここまでの見本16

//最初に一回だけ呼び出される初期設定
function setup() {
 //キャンバスの大きさ
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 //背景の描画
 background(220);

 //線を無効にする
 noStroke();

 //円形1
 fill(255, 0, 0, 126);
 ellipse(width / 4 * 1, height / 2, 150, 150);

 //円形2
 fill(0, 255, 0, 126);
 ellipse(width / 4 * 2, height / 2, 150, 150);

 //円形
 fill(0, 0, 255, 126);
 ellipse(width / 4 * 3, height / 2, 150, 150);
}

lesson4・チャプター8

ここまでの見本17

//最初に一回だけ呼び出される初期設定
function setup() {
 //キャンバスの大きさ
 createCanvas(400, 400);
 //カラーモード・最大値の変更
 colorMode(RGB, 100);
}

//繰り返し呼び出される処理
function draw() {
 //背景の描画
 background(86);

 //線を無効にする
 noStroke();

 //円形1
 fill(100, 0, 0, 50);
 ellipse(width / 4 * 1, height / 2, 150, 150);

 //円形2
 fill(0, 100, 0, 50);
 ellipse(width / 4 * 2, height / 2, 150, 150);

 //円形
 fill(0, 0, 100, 50);
 ellipse(width / 4 * 3, height / 2, 150, 150);
}

lesson4・チャプター9

ここまでの見本18

//最初に一回だけ呼び出される初期設定
function setup() {
 //キャンバスの大きさ
 createCanvas(400, 400);
 //カラーモード・最大値の変更
 colorMode(HSB);
}

//繰り返し呼び出される処理
function draw() {
 //背景の描画
 background(0, 0, 86);

 //線を無効にする
 noStroke();

 //円形1
 fill(0, 100, 100);
 ellipse(width / 4 * 1, height / 2, 150, 150);

 //円形2
 fill(120, 100, 100);
 ellipse(width / 4 * 2, height / 2, 150, 150);

 //円形
 fill(240, 100, 100);
 ellipse(width / 4 * 3, height / 2, 150, 150);
}

lesson6・チャプター2

ここまでの見本19

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(220);

 var x = width / 2;

 var y = height / 2;

 ellipse(x, y, 120 * 2, 120 * 2);

 ellipse(x, y, 120 + 30, 120 + 30);

 ellipse(x, y, 120 - 30, 120 - 30);
  
 ellipse(x, y, 120 / 2, 120 / 2);

 noLoop();
}

lesson7・チャプター3

ここまでの見本20

var x = 70;

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
 rectMode(CENTER);
}

//繰り返し呼び出される処理
function draw() {
 background(220);

 ellipse(x, 200, 120, 120);

 x = x + 130;
 rect(x, 200, 120, 120);

 x = x + 130;
 triangle(x, 140, 390, 260, 270, 260);

 noLoop();
}

lesson7・チャプター3

ここまでの見本21

var x = 70;

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
 rectMode(CENTER);
}

//繰り返し呼び出される処理
function draw() {
 background(220);

 console.log(x);
 ellipse(x, 200, 120, 120);

 x = x + 130;
 console.log(x);
 rect(x, 200, 120, 120);

 x = x + 130;
 console.log(x);
 triangle(x, 140, 390, 260, 270, 260);

 noLoop();
}

lesson10・チャプター3

ここまでの見本22

var count = 0; //カウント変数

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {

 //背景の描画
 background(0);

 //塗りの色設定
 fill(255);

 //文字の設定
 textAlign(CENTER);
 textSize(100);

 //カウント表示
 text(count, 200, 250);
}

lesson10・チャプター4

ここまでの見本23

var count = 0; //カウント変数

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {

 //背景の描画
 background(0);

 //塗りの色設定
 fill(255);

 //文字の設定
 textAlign(CENTER);
 textSize(100);

 //カウント表示
 text(count, 200, 250);

 //変数cに+1(1フレーム毎)
 count = count + 1;
}

lesson10・チャプター5

ここまでの見本24

var count = 0; //カウント変数

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {

 //背景の描画
 background(0);

 //塗りの色設定
 fill(255);

 //文字の設定
 textAlign(CENTER);
 textSize(100);

 //カウント表示
 text(count, 200, 250);

 //変数cに+1(1フレーム毎)
 count = count + 1;
}

lesson10・チャプター6

ここまでの見本25

var count = 0; //カウント変数

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {

 //背景の描画
 background(0);

 //塗りの色設定
 fill(255);

 //文字の設定
 textAlign(CENTER);
 textSize(100);

 //カウント表示
 text(int(count / 60), 200, 250);

 //変数cに+1(1フレーム毎)
 count = count + 1;

 //10以上になったとき
 if (int(count / 60) >= 10) {

  //背景の描画を変更
  background(0, 0, 255);

  //カウント表示(0)
  text(10, 200, 250);
 }

 console.log(count);
}

lesson10・チャプター7

ここまでの見本26

var count = 600; //カウント変数

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {

 //背景の描画
 background(0);

 //塗りの色設定
 fill(255);

 //文字の設定
 textAlign(CENTER);
 textSize(100);

 //カウント表示
 text(int(count / 60), 200, 250);

 //変数cに-1(1フレーム毎)
 count = count - 1;


 //0以下になったとき
 if (int(count / 60) <= 0) {


  //背景の描画を変更
  background(255, 0, 0);

  //カウント表示(0)
  text(0, 200, 250);
 }

 console.log(count);
}

lesson11・チャプター4

ここまでの見本27

//最初に一回だけ呼び出される初期設定
function setup() {
 //キャンバスの大きさ
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(220);
 noStroke();

 //円形1
 fill(255, 0, 0, 126);
 ellipse(width / 4 * 1, height / 2, 150, 150);

 //円形2
 fill(0, 255, 0, 126);
 ellipse(width / 4 * 2, height / 2, 150, 150);

 //円形
 fill(0, 0, 255, 126);
 ellipse(width / 4 * 3, height / 2, 150, 150);
}

lesson11・チャプター4

ここまでの見本28

//最初に一回だけ呼び出される初期設定
function setup() {
 //キャンバスの大きさ
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(220);
 noStroke();

 //円形1
 fill(255, 0, 0, 126);
 ellipse(width / 4 * 1, height / 2, mouseX, mouseX);
 
 //円形2
 fill(0, 255, 0, 126);
 ellipse(width / 4 * 2, height / 2, mouseY, mouseY);

 //円形3
 fill(mouseX, mouseY, mouseX / mouseY, 126);
 ellipse(width / 4 * 3, height / 2, 150, 150);
}

lesson12・チャプター3

ここまでの見本29

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
 background(200);
}

//繰り返し呼び出される処理
function draw() {
 //マウスの位置に四角を描画
 rect(mouseX, mouseY, 30, 30);
}

lesson12・チャプター4

ここまでの見本30

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
 background(200);
}

//繰り返し呼び出される処理
function draw() {
 //マウスの位置に四角を描画
 rect(mouseX, mouseY, 30, 30);
 //マウスクリック判定
 if (mouseIsPressed) {
  fill(255, 255, 0);
 } else {
  fill(255, 0, 255);
 }

}

lesson15・チャプター3

ここまでの見本31

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(480, 120);
 strokeWeight(2);
}

//繰り返し呼び出される処理
function draw() {
 background(220);
 stroke(255, 0, 0);

 line(20, 40, 80, 80);
 line(80, 40, 140, 80);
 line(140, 40, 200, 80);
 line(200, 40, 260, 80);
 line(260, 40, 320, 80);
 line(320, 40, 380, 80);
 line(380, 40, 440, 80);
}

lesson15・チャプター4

ここまでの見本32

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(480, 120);
 strokeWeight(2);
}

//繰り返し呼び出される処理
function draw() {
 background(220);
 stroke(255, 0, 0);

 for (var i = 20; i < 400; i += 60) {
  line(i, 40, i + 60, 80);
 }
}

lesson16・チャプター3

ここまでの見本33

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(255);
 strokeWeight(1)
 stroke(0);

 //ガイドライン
 for (var i = 10; i < 400; i = i + 10) {
  stroke(100);
  strokeWeight(0.1);
  line(i, 0, i, 400);
  line(0, i, 400, i);
 }
 //ガイド数値
 for (i = 0; i < 400; i = i + 50) {
  textSize(8);
  text(i, i, 8);
  text(i, 0, i);
 }
}

lesson16・チャプター4

ここまでの見本34

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(255);
 strokeWeight(1)
 stroke(0);

 //ライン
 line(50, 100, 180, 30);

 //ガイドライン
 for (var i = 10; i < 400; i = i + 10) {
  stroke(100);
  strokeWeight(0.1);
  line(i, 0, i, 400);
  line(0, i, 400, i);
 }
 //ガイド数値
 for (i = 0; i < 400; i = i + 50) {
  textSize(8);
  text(i, i, 8);
  text(i, 0, i);
 }
}

lesson16・チャプター5

ここまでの見本35

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(255);
 strokeWeight(1)
 stroke(0);

 //ライン
 line(50, 100, 180, 30);


 //三角形
 triangle(110, 120, 180, 200, 50, 240);

 //ガイドライン
 for (var i = 10; i < 400; i = i + 10) {
  stroke(100);
  strokeWeight(0.1);
  line(i, 0, i, 400);
  line(0, i, 400, i);
 }
 //ガイド数値
 for (i = 0; i < 400; i = i + 50) {
  textSize(8);
  text(i, i, 8);
  text(i, 0, i);
 }
}

lesson16・チャプター6

ここまでの見本36

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(255);
 strokeWeight(1)
 stroke(0);

 //ライン
 line(50, 100, 180, 30);


 //三角形
 triangle(110, 120, 180, 200, 50, 240);

 //四辺形
 quad(90, 260, 180, 280, 150, 360, 50, 350);


 //ガイドライン
 for (var i = 10; i < 400; i = i + 10) {
  stroke(100);
  strokeWeight(0.1);
  line(i, 0, i, 400);
  line(0, i, 400, i);
 }
 //ガイド数値
 for (i = 0; i < 400; i = i + 50) {
  textSize(8);
  text(i, i, 8);
  text(i, 0, i);
 }
}

lesson16・チャプター7

ここまでの見本37

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(255);
 strokeWeight(1)
 stroke(0);

 //ライン
 line(50, 100, 180, 30);


 //三角形
 triangle(110, 120, 180, 200, 50, 240);

 //四辺形
 quad(90, 260, 180, 280, 150, 360, 50, 350);

 //四角形
 rect(220, 30, 150, 70);


 //ガイドライン
 for (var i = 10; i < 400; i = i + 10) {
  stroke(100);
  strokeWeight(0.1);
  line(i, 0, i, 400);
  line(0, i, 400, i);
 }
 //ガイド数値
 for (i = 0; i < 400; i = i + 50) {
  textSize(8);
  text(i, i, 8);
  text(i, 0, i);
 }
}

lesson16・チャプター8

ここまでの見本38

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(255);
 strokeWeight(1)
 stroke(0);

 //ライン
 line(50, 100, 180, 30);


 //三角形
 triangle(110, 120, 180, 200, 50, 240);

 //四辺形
 quad(90, 260, 180, 280, 150, 360, 50, 350);

 //四角形
 rect(220, 30, 150, 70);

 //楕円形
 ellipse(300, 180, 120, 120);


 //ガイドライン
 for (var i = 10; i < 400; i = i + 10) {
  stroke(100);
  strokeWeight(0.1);
  line(i, 0, i, 400);
  line(0, i, 400, i);
 }
 //ガイド数値
 for (i = 0; i < 400; i = i + 50) {
  textSize(8);
  text(i, i, 8);
  text(i, 0, i);
 }
}

lesson16・チャプター9

ここまでの見本39

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
 background(255);
 strokeWeight(1)
 stroke(0);

 //ライン
 line(50, 100, 180, 30);


 //三角形
 triangle(110, 120, 180, 200, 50, 240);

 //四辺形
 quad(90, 260, 180, 280, 150, 360, 50, 350);

 //四角形
 rect(220, 30, 150, 70);

 //楕円形
 ellipse(300, 180, 120, 120);

 //円弧
 arc(300, 320, 120, 120, 0, PI + HALF_PI, PIE);


 //ガイドライン
 for (var i = 10; i < 400; i = i + 10) {
  stroke(100);
  strokeWeight(0.1);
  line(i, 0, i, 400);
  line(0, i, 400, i);
 }
 //ガイド数値
 for (i = 0; i < 400; i = i + 50) {
  textSize(8);
  text(i, i, 8);
  text(i, 0, i);
 }
}

lesson17・チャプター3

ここまでの見本40

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
 noStroke();
}

//繰り返し呼び出される処理
function draw() {
 background(0);
 for (var y = 0; y <= height; y += 40) {
  for (var x = 0; x <= width; x += 40) {
  fill(255, 140, y);
  ellipse(x, y, 40, 40);
  }
 }
}

lesson17・チャプター4

ここまでの見本41

//最初に一回だけ呼び出される初期設定
function setup() {
 createCanvas(400, 400);
 noStroke();
}

//繰り返し呼び出される処理
function draw() {
 background(0);
  for (var y = 0; y <= 20; y += 40) {
   for (var x = 0; x <= 400; x += 40) {
   fill(255, 140, y);
   ellipse(x, y, 40, 40);
   }
 }
}

lesson18・チャプター3

ここまでの見本42

var x = 200;
var y = 200;
var radius = 12;

//最初に一回だけ呼び出される初期設定
function setup() {
  createCanvas(400, 400);
  ellipseMode(RADIUS);
}

//繰り返し呼び出される処理
function draw() {
  background(220);

  fill(255, 0, 0);
   
  ellipse(x, y, radius, radius);
}

lesson18・チャプター4

ここまでの見本43

var x = 200;
var y = 200;
var radius = 12;

//最初に一回だけ呼び出される初期設定
function setup() {
  createCanvas(400, 400);
  ellipseMode(RADIUS);
}

//繰り返し呼び出される処理
function draw() {
  background(220);

  var d = dist(mouseX, mouseY, x, y);
  if (d < radius) {
    radius++;
    fill(0, 0, 255);
   } else {
     fill(255, 0, 0);
   }
  ellipse(x, y, radius, radius);
}

lesson19・チャプター3

ここまでの見本44

//最初に一回だけ呼び出される初期設定
function setup() {
  createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
  background(220);

  stroke(255, 0, 255);

  line(50, 20, 50, 380);
  line(100, 20, 100, 380);
  line(150, 20, 150, 380);
  line(200, 20, 200, 380);
  line(250, 20, 250, 380);
  line(300, 20, 300, 380);
  line(350, 20, 350, 380);

}

lesson19・チャプター4

ここまでの見本45

//最初に一回だけ呼び出される初期設定
function setup() {
  createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
  background(220);

   var mx = mouseX / 10;
   var offsetA = random(-mx, mx);
   var offsetB = random(-mx, mx);
    
   stroke(255, 0, 255);
    
   line(50 + offsetA, 20, 50 - offsetB, 380);
   line(100 + offsetA, 20, 100 - offsetB, 380);
   line(150 + offsetA, 20, 150 - offsetB, 380);
   line(200 + offsetA, 20, 200 - offsetB, 380);
   line(250 + offsetA, 20, 250 - offsetB, 380);
   line(300 + offsetA, 20, 300 - offsetB, 380);
   line(350 + offsetA, 20, 350 - offsetB, 380);

}

lesson24・チャプター2

ここまでの見本46

//プレイヤーの変数
let player;

//最初に一回だけ呼び出される初期設定
function setup() {
  //キャンバスの設定
  createCanvas(480, 640);
  //カラーモードの設定
  colorMode(HSB, 360, 100, 100, 3);
  //Playerクラスのインスタンスを生成
  player = new Player();
}

//繰り返し呼び出される処理
function draw() {
  //背景色設定
  background(200, 80, 30);
  //プレイヤーを描画
  player.display();
}

//Playerクラス
class Player {
  constructor() {
    //x座標
    this.x = width / 2;
    //y座標
    this.y = height - 20
  }
  //描画の処理
  display() {
    //塗りつぶす色
    fill(200, 80, 100);
    //線を無効
    noStroke();
    //四角の描画元の指定
    rectMode(CENTER);
    //四角を描画
    rect(this.x, this.y, 20, 50, 5);
  }
}

lesson24・チャプター3

ここまでの見本47

//プレイヤーの変数
let player;

//最初に一回だけ呼び出される初期設定
function setup() {
  //キャンバスの設定
  createCanvas(480, 640);
  //カラーモードの設定
  colorMode(HSB, 360, 100, 100, 3);
  //Playerクラスのインスタンスを生成
  player = new Player();
}

//繰り返し呼び出される処理
function draw() {
  //背景色設定
  background(200, 80, 30);
  //プレイヤーを移動
  player.move();
  //プレイヤーを描画
  player.display();
}

//Playerクラス
class Player {
  constructor() {
    //x座標
    this.x = width / 2;
    //y座標
    this.y = height - 20
    //移動速度
    this.speed = 5;
  }
  //描画の処理
  display() {
    //塗りつぶす色
    fill(200, 80, 100);
    //線を無効
    noStroke();
    //四角の描画元の指定
    rectMode(CENTER);
    //四角を描画
    rect(this.x, this.y, 20, 50, 5);
  }
  //移動の処理
  move() {
    //右へ移動
    if (keyIsDown(RIGHT_ARROW)) {
      this.x += this.speed;
      //左へ移動
    } else if (keyIsDown(LEFT_ARROW)) {
      this.x -= this.speed;
    }
    //左移動の制限
    if (this.x < 0) {
      this.x = 0;
    }
    //右移動の制限
    if (width < this.x) {
      this.x = width;
    }
  }
}

lesson24・チャプター4

ここまでの見本48

//プレイヤーの変数
let player;
//スタートしているかどうかの変数
let isStart = false;

//最初に一回だけ呼び出される初期設定
function setup() {
  //キャンバスの設定
  createCanvas(480, 640);
  //カラーモードの設定
  colorMode(HSB, 360, 100, 100, 3);
  //Playerクラスのインスタンスを生成
  player = new Player();
}

//繰り返し呼び出される処理
function draw() {
  //背景色設定
  background(200, 80, 30);
  //スタートしているかどうかで処理を分ける
  if (isStart) {
    //プレイヤーを移動
    player.move();
    //プレイヤーを描画
    player.display();
  } else {
    //塗りつぶす色の設定
    fill(0, 0, 100);
    //線を無効
    noStroke();
    //文字の大きさ
    textSize(34);
    //アラインの設定
    textAlign(CENTER, CENTER);
    //文字を描画
    text("click to start!", width / 2, height / 2);
    //マウスを押したときの処理
    if (mouseIsPressed) {
      isStart = true;
    }
  }
}

//Playerクラス
class Player {
  constructor() {
    //x座標
    this.x = width / 2;
    //y座標
    this.y = height - 20
    //移動速度
    this.speed = 5;
  }
  //描画の処理
  display() {
    //塗りつぶす色
    fill(200, 80, 100);
    //線を無効
    noStroke();
    //四角の描画元の指定
    rectMode(CENTER);
    //四角を描画
    rect(this.x, this.y, 20, 50, 5);
  }
  //移動の処理
  move() {
    //右へ移動
    if (keyIsDown(RIGHT_ARROW)) {
      this.x += this.speed;
      //左へ移動
    } else if (keyIsDown(LEFT_ARROW)) {
      this.x -= this.speed;
    }
    //左移動の制限
    if (this.x < 0) {
      this.x = 0;
    }
    //右移動の制限
    if (width < this.x) {
      this.x = width;
    }
  }
}

lesson24・チャプター6

ここまでの見本50

//プレイヤーの変数
let player;
//スタートしているかどうかの変数
let isStart = false;
//敵の変数
let enemys = Array(20);

//最初に一回だけ呼び出される初期設定
function setup() {
  //キャンバスの設定
  createCanvas(480, 640);
  //カラーモードの設定
  colorMode(HSB, 360, 100, 100, 3);
  //Playerクラスのインスタンスを生成
  player = new Player();
}

//繰り返し呼び出される処理
function draw() {
  //背景色設定
  background(200, 80, 30);
  //スタートしているかどうかで処理を分ける
  if (isStart) {
    //プレイヤーを移動
    player.move();
    //プレイヤーを描画
    player.display();
    //敵が端に来たかどうか
    let enemyIsCameEdge = false;
    //敵の数だけ繰り返す
    for (let enemy of enemys) {
      //敵を移動
      enemy.move();
      //敵を描画
      enemy.display();
      //x座標とライフの状況を確認
      if ((enemy.x > width || enemy.x < 0) && enemy.life > 0) {
        enemyIsCameEdge = true;
      }
    }
    //端にきていたら下に移動
    if (enemyIsCameEdge) {
      for (let enemy of enemys) {
        enemy.shiftDown();
      }
    }
  } else {
    //塗りつぶす色の設定
    fill(0, 0, 100);
    //線を無効
    noStroke();
    //文字の大きさ
    textSize(34);
    //アラインの設定
    textAlign(CENTER, CENTER);
    //文字を描画
    text("click to start!", width / 2, height / 2);
    //マウスを押したときの処理
    if (mouseIsPressed) {
      isStart = true;
      enemysSetup();
    }
  }
}

//敵のポジションを設定
function enemysSetup() {
  for (let j = 0; j < 2; j++) {
    for (let i = 0; i < enemys.length / 2; i++) {
      enemys[i + j * enemys.length / 2] = new Enemy(i * 40, 60 - j * 60)
    }
  }
}

//Playerクラス
class Player {
  constructor() {
    //x座標
    this.x = width / 2;
    //y座標
    this.y = height - 20
    //移動速度
    this.speed = 5;
  }
  //描画の処理
  display() {
    //塗りつぶす色
    fill(200, 80, 100);
    //線を無効
    noStroke();
    //四角の描画元の指定
    rectMode(CENTER);
    //四角を描画
    rect(this.x, this.y, 20, 50, 5);
  }
  //移動の処理
  move() {
    //右へ移動
    if (keyIsDown(RIGHT_ARROW)) {
      this.x += this.speed;
      //左へ移動
    } else if (keyIsDown(LEFT_ARROW)) {
      this.x -= this.speed;
    }
    //左移動の制限
    if (this.x < 0) {
      this.x = 0;
    }
    //右移動の制限
    if (width < this.x) {
      this.x = width;
    }
  }
}

//Enemyクラス
class Enemy {
  constructor(_x, _y) {
    //x座標
    this.x = _x;
    //y座標
    this.y = _y;
    //辺の長さ
    this.sidelength = 30;
    //ライフ
    this.life = 3;
    //移動速度
    this.xSpeed = 1.5;
  }
  //描画の処理
  display() {
    //3回繰り返す
    for (let i = 0; i < 3; i++) {
      //線の色
      stroke(160, 80, 100, this.life);
      //線の太さ
      strokeWeight(3);
      //塗りつぶしを無効
      noFill();
      //四角の描画元の指定
      rectMode(CENTER);
      //四角を描画
      rect(this.x, this.y, this.sidelength * (i + 1) / 3, this.sidelength * (i + 1) / 3);
    }
  }
  //下に降りる
  shiftDown() {
    this.xSpeed *= -1;
    this.y += this.sidelength;
  }
  //移動の処理
  move() {
    this.x += this.xSpeed;
  }
}

lesson24・チャプター7

ここまでの見本51

//プレイヤーの変数
let player;
//スタートしているかどうかの変数
let isStart = false;
//敵の変数
let enemys = Array(20);
//弾の変数
let bullets = [];

//最初に一回だけ呼び出される初期設定
function setup() {
  //キャンバスの設定
  createCanvas(480, 640);
  //カラーモードの設定
  colorMode(HSB, 360, 100, 100, 3);
  //Playerクラスのインスタンスを生成
  player = new Player();
}

//繰り返し呼び出される処理
function draw() {
  //背景色設定
  background(200, 80, 30);
  //スタートしているかどうかで処理を分ける
  if (isStart) {
    //プレイヤーを移動
    player.move();
    //プレイヤーを描画
    player.display();
    //敵が端に来たかどうか
    let enemyIsCameEdge = false;
    //敵の数だけ繰り返す
    for (let enemy of enemys) {
      //敵を移動
      enemy.move();
      //敵を描画
      enemy.display();
      //x座標とライフの状況を確認
      if ((enemy.x > width || enemy.x < 0) && enemy.life > 0) {
        enemyIsCameEdge = true;
      }
    }
    //端にきていたら下に移動
    if (enemyIsCameEdge) {
      for (let enemy of enemys) {
        enemy.shiftDown();
      }
    }
    //弾の数だけ繰り返す
    for (let bullet of bullets) {
      //弾を移動
      bullet.move();
      //弾を表示
      bullet.display();
    }
    //弾の配列を更新
    bullets = bullets.filter(b => b.isVisible);
  } else {
    //塗りつぶす色の設定
    fill(0, 0, 100);
    //線を無効
    noStroke();
    //文字の大きさ
    textSize(34);
    //アラインの設定
    textAlign(CENTER, CENTER);
    //文字を描画
    text("click to start!", width / 2, height / 2);
    //マウスを押したときの処理
    if (mouseIsPressed) {
      isStart = true;
      enemysSetup();
    }
  }
}

//キー操作
function keyPressed() {
  //スペースキーを押したら
  if (key == ' ') {
    //弾を配列に追加
    bullets.push(new Bullet(player.x, height - 20));
  }
}

//敵のポジションを設定
function enemysSetup() {
  for (let j = 0; j < 2; j++) {
    for (let i = 0; i < enemys.length / 2; i++) {
      enemys[i + j * enemys.length / 2] = new Enemy(i * 40, 60 - j * 60)
    }
  }
}

//Playerクラス
class Player {
  constructor() {
    //x座標
    this.x = width / 2;
    //y座標
    this.y = height - 20
    //移動速度
    this.speed = 5;
  }
  //描画の処理
  display() {
    //塗りつぶす色
    fill(200, 80, 100);
    //線を無効
    noStroke();
    //四角の描画元の指定
    rectMode(CENTER);
    //四角を描画
    rect(this.x, this.y, 20, 50, 5);
  }
  //移動の処理
  move() {
    //右へ移動
    if (keyIsDown(RIGHT_ARROW)) {
      this.x += this.speed;
      //左へ移動
    } else if (keyIsDown(LEFT_ARROW)) {
      this.x -= this.speed;
    }
    //左移動の制限
    if (this.x < 0) {
      this.x = 0;
    }
    //右移動の制限
    if (width < this.x) {
      this.x = width;
    }
  }
}

//Enemyクラス
class Enemy {
  constructor(_x, _y) {
    //x座標
    this.x = _x;
    //y座標
    this.y = _y;
    //辺の長さ
    this.sidelength = 30;
    //ライフ
    this.life = 3;
    //移動速度
    this.xSpeed = 1.5;
  }
  //描画の処理
  display() {
    //3回繰り返す
    for (let i = 0; i < 3; i++) {
      //線の色
      stroke(160, 80, 100, this.life);
      //線の太さ
      strokeWeight(3);
      //塗りつぶしを無効
      noFill();
      //四角の描画元の指定
      rectMode(CENTER);
      //四角を描画
      rect(this.x, this.y, this.sidelength * (i + 1) / 3, this.sidelength * (i + 1) / 3);
    }
  }
  //下に降りる
  shiftDown() {
    this.xSpeed *= -1;
    this.y += this.sidelength;
  }
  //移動の処理
  move() {
    this.x += this.xSpeed;
  }
}

//Bulletクラス
class Bullet {
  constructor(_x, _y) {
    //x座標
    this.x = _x;
    //y座標
    this.y = _y;
    //半径
    this.r = 8;
    //表示するかどうか
    this.isVisible = true;
  }
  //移動の処理
  move() {
    this.y -= 5;
    if (this.y < 0) {
      this.isVisible = false;
    }
  }
  //描画の処理
  display() {
    //線を無効
    noStroke();
    //塗りつぶす色
    fill(20, 80, 100);
    //円を描画
    ellipse(this.x, this.y, this.r * 2, this.r * 2);
  }
}

lesson24・チャプター8

ここまでの見本52

//プレイヤーの変数
let player;
//スタートしているかどうかの変数
let isStart = false;
//敵の変数
let enemys = Array(20);
//弾の変数
let bullets = [];
//最初のゲームかどうかの変数
let isFirstGame = true;
//スコアの変数
let score = 0;

//最初に一回だけ呼び出される初期設定
function setup() {
  //キャンバスの設定
  createCanvas(480, 640);
  //カラーモードの設定
  colorMode(HSB, 360, 100, 100, 3);
  //Playerクラスのインスタンスを生成
  player = new Player();
}

//繰り返し呼び出される処理
function draw() {
  //背景色設定
  background(200, 80, 30);
  //スタートしているかどうかで処理を分ける
  if (isStart) {
    //プレイヤーを移動
    player.move();
    //プレイヤーを描画
    player.display();
    //敵が端に来たかどうか
    let enemyIsCameEdge = false;
    //敵の数だけ繰り返す
    for (let enemy of enemys) {
      //敵を移動
      enemy.move();
      //敵を描画
      enemy.display();
      //x座標とライフの状況を確認
      if ((enemy.x > width || enemy.x < 0) && enemy.life > 0) {
        enemyIsCameEdge = true;
      }
      //プレイヤーと敵のy座標を確認
      if (player.y <= enemy.y) {
        isStart = false;
        isFirstGame = false;
      }
    }
    //端にきていたら下に移動
    if (enemyIsCameEdge) {
      for (let enemy of enemys) {
        enemy.shiftDown();
      }
    }
    //弾の数だけ繰り返す
    for (let bullet of bullets) {
      //弾を移動
      bullet.move();
      //弾を表示
      bullet.display();
      //敵の数だけ繰り返す
      for (let enemy of enemys) {
        //ヒットしていたら
        if (bullet.isHit(enemy)) {
          //球を非表示
          bullet.isVisible = false;
          //ライフを減らす
          enemy.life -= 1;
          //スコアを加算
          score += 10;
        }
      }
    }
    //弾の配列を更新
    bullets = bullets.filter(b => b.isVisible);
    //敵がすべてライフが0だったら
    if (enemys.every(enemy => enemy.life == 0)) {
      //敵をセットアップ
      enemysSetup();
      //弾を初期化
      bullets = [];
    }
  } else {
    //塗りつぶす色の設定
    fill(0, 0, 100);
    //線を無効
    noStroke();
    //文字の大きさ
    textSize(34);
    //アラインの設定
    textAlign(CENTER, CENTER);
    //文字を描画
    if (isFirstGame) {
      text("click to start!", width / 2, height / 2);
    } else {
      text("Game Over!\nclick to start!", width / 2, height / 2);
    }
    //マウスを押したときの処理
    if (mouseIsPressed) {
      isStart = true;
      enemysSetup();
      score = 0;
    }
  }
  //線を無効
  noStroke();
  //塗りつぶす色の設定
  fill(0, 0, 100);
  //アラインの設定
  textAlign(LEFT, CENTER);
  //文字の大きさ
  textSize(16);
  //文字を描画
  text("score: " + score, 20, height - 20);
}

//キー操作
function keyPressed() {
  //スペースキーを押したら
  if (key == ' ') {
    //弾を配列に追加
    bullets.push(new Bullet(player.x, height - 20));
  }
}

//敵のポジションを設定
function enemysSetup() {
  for (let j = 0; j < 2; j++) {
    for (let i = 0; i < enemys.length / 2; i++) {
      enemys[i + j * enemys.length / 2] = new Enemy(i * 40, 60 - j * 60)
    }
  }
}

//Playerクラス
class Player {
  constructor() {
    //x座標
    this.x = width / 2;
    //y座標
    this.y = height - 20
    //移動速度
    this.speed = 5;
  }
  //描画の処理
  display() {
    //塗りつぶす色
    fill(200, 80, 100);
    //線を無効
    noStroke();
    //四角の描画元の指定
    rectMode(CENTER);
    //四角を描画
    rect(this.x, this.y, 20, 50, 5);
  }
  //移動の処理
  move() {
    //右へ移動
    if (keyIsDown(RIGHT_ARROW)) {
      this.x += this.speed;
      //左へ移動
    } else if (keyIsDown(LEFT_ARROW)) {
      this.x -= this.speed;
    }
    //左移動の制限
    if (this.x < 0) {
      this.x = 0;
    }
    //右移動の制限
    if (width < this.x) {
      this.x = width;
    }
  }
}

//Enemyクラス
class Enemy {
  constructor(_x, _y) {
    //x座標
    this.x = _x;
    //y座標
    this.y = _y;
    //辺の長さ
    this.sidelength = 30;
    //ライフ
    this.life = 3;
    //移動速度
    this.xSpeed = 1.5;
  }
  //描画の処理
  display() {
    //3回繰り返す
    for (let i = 0; i < 3; i++) {
      //線の色
      stroke(160, 80, 100, this.life);
      //線の太さ
      strokeWeight(3);
      //塗りつぶしを無効
      noFill();
      //四角の描画元の指定
      rectMode(CENTER);
      //四角を描画
      rect(this.x, this.y, this.sidelength * (i + 1) / 3, this.sidelength * (i + 1) / 3);
    }
  }
  //下に降りる
  shiftDown() {
    this.xSpeed *= -1;
    this.y += this.sidelength;
  }
  //移動の処理
  move() {
    this.x += this.xSpeed;
  }
}
//Bulletクラス
class Bullet {
  constructor(_x, _y) {
    //x座標
    this.x = _x;
    //y座標
    this.y = _y;
    //半径
    this.r = 8;
    //表示するかどうか
    this.isVisible = true;
  }
  //移動の処理
  move() {
    this.y -= 5;
    if (this.y < 0) {
      this.isVisible = false;
    }
  }
  //描画の処理
  display() {
    //線を無効
    noStroke();
    //塗りつぶす色
    fill(20, 80, 100);
    //円を描画
    ellipse(this.x, this.y, this.r * 2, this.r * 2);
  }
  //当たり判定
  isHit(enemy) {
    //ライフが0なら当たらない
    if (enemy.life == 0) {
      return false;
    }
    //弾と敵の距離が弾の半径+敵の1辺の長さの半分より短くなったら当たり
    if (dist(this.x, this.y, enemy.x, enemy.y) < this.r + enemy.sidelength / 2) {
      return true;
    }
    //それ以外は当たらない
    return false;
  }
}

lesson24・チャプター9

ここまでの見本53

//プレイヤーの変数
let player;
//スタートしているかどうかの変数
let isStart = false;
//敵の変数
let enemys = Array(20);
//弾の変数
let bullets = [];
//最初のゲームかどうかの変数
let isFirstGame = true;
//スコアの変数
let score = 0;

//最初に一回だけ呼び出される初期設定
function setup() {
  //キャンバスの設定
  createCanvas(480, 640);
  //カラーモードの設定
  colorMode(HSB, 360, 100, 100, 3);
  //Playerクラスのインスタンスを生成
  player = new Player();
}

//繰り返し呼び出される処理
function draw() {
  //背景色設定
  background(200, 80, 30);
  //スタートしているかどうかで処理を分ける
  if (isStart) {
    //プレイヤーを移動
    player.move();
    //プレイヤーを描画
    player.display();
    //敵が端に来たかどうか
    let enemyIsCameEdge = false;
    //敵の数だけ繰り返す
    for (let enemy of enemys) {
      //敵を移動
      enemy.move();
      //敵を描画
      enemy.display();
      //x座標とライフの状況を確認
      if ((enemy.x > width || enemy.x < 0) && enemy.life > 0) {
        enemyIsCameEdge = true;
      }
      //プレイヤーと敵のy座標を確認
      if (player.y <= enemy.y) {
        isStart = false;
        isFirstGame = false;
      }
    }
    //端にきていたら下に移動
    if (enemyIsCameEdge) {
      for (let enemy of enemys) {
        enemy.shiftDown();
      }
    }
    //弾の数だけ繰り返す
    for (let bullet of bullets) {
      //弾を移動
      bullet.move();
      //弾を表示
      bullet.display();
      //敵の数だけ繰り返す
      for (let enemy of enemys) {
        //ヒットしていたら
        if (bullet.isHit(enemy)) {
          //球を非表示
          bullet.isVisible = false;
          //ライフを減らす
          enemy.life -= 1;
          //スコアを加算
          score += 10;
        }
      }
    }
    //弾の配列を更新
    bullets = bullets.filter(b => b.isVisible);
    //敵がすべてライフが0だったら
    if (enemys.every(enemy => enemy.life == 0)) {
      //敵をセットアップ
      enemysSetup();
      //弾を初期化
      bullets = [];
    }
  } else {
    //塗りつぶす色の設定
    fill(0, 0, 100);
    //線を無効
    noStroke();
    //文字の大きさ
    textSize(34);
    //アラインの設定
    textAlign(CENTER, CENTER);
    //文字を描画
    if (isFirstGame) {
      text("click to start!", width / 2, height / 2);
    } else {
      text("Game Over!\nclick to start!", width / 2, height / 2);
    }
    //マウスを押したときの処理
    if (mouseIsPressed) {
      isStart = true;
      enemysSetup();
      score = 0;
    }
  }
  //線を無効
  noStroke();
  //塗りつぶす色の設定
  fill(0, 0, 100);
  //アラインの設定
  textAlign(LEFT, CENTER);
  //文字の大きさ
  textSize(16);
  //文字を描画
  text("score: " + score, 20, height - 20);
}

//キー操作
function keyPressed() {
  //スペースキーを押したら
  if (key == ' ') {
    //弾を配列に追加
    bullets.push(new Bullet(player.x, height - 20));
  }
}

//敵のポジションを設定
function enemysSetup() {
  for (let j = 0; j < 2; j++) {
    for (let i = 0; i < enemys.length / 2; i++) {
      enemys[i + j * enemys.length / 2] = new Enemy(i * 40, 60 - j * 60)
    }
  }
}

//Playerクラス
class Player {
  constructor() {
    //x座標
    this.x = width / 2;
    //y座標
    this.y = height - 20
    //移動速度
    this.speed = 5;
  }
  //描画の処理
  display() {
    //塗りつぶす色
    fill(200, 80, 100);
    //線を無効
    noStroke();
    //四角の描画元の指定
    rectMode(CENTER);
    //四角を描画
    rect(this.x, this.y, 20, 50, 5);
  }
  //移動の処理
  move() {
    //右へ移動
    if (keyIsDown(RIGHT_ARROW)) {
      this.x += this.speed;
      //左へ移動
    } else if (keyIsDown(LEFT_ARROW)) {
      this.x -= this.speed;
    }
    //左移動の制限
    if (this.x < 0) {
      this.x = 0;
    }
    //右移動の制限
    if (width < this.x) {
      this.x = width;
    }
  }
}

//Enemyクラス
class Enemy {
  constructor(_x, _y) {
    //x座標
    this.x = _x;
    //y座標
    this.y = _y;
    //辺の長さ
    this.sidelength = 30;
    //ライフ
    this.life = 3;
    //移動速度
    this.xSpeed = 1.5;
  }
  //描画の処理
  display() {
    //3回繰り返す
    for (let i = 0; i < 3; i++) {
      //線の色
      stroke(160, 80, 100, this.life);
      //線の太さ
      strokeWeight(3);
      //塗りつぶしを無効
      noFill();
      //四角の描画元の指定
      rectMode(CENTER);
      //四角を描画
      rect(this.x, this.y, this.sidelength * (i + 1) / 3, this.sidelength * (i + 1) / 3);
    }
  }
  //下に降りる
  shiftDown() {
    this.xSpeed *= -1;
    this.y += this.sidelength;
  }
  //移動の処理
  move() {
    this.x += this.xSpeed;
  }
}
//Bulletクラス
class Bullet {
  constructor(_x, _y) {
    //x座標
    this.x = _x;
    //y座標
    this.y = _y;
    //半径
    this.r = 8;
    //表示するかどうか
    this.isVisible = true;
  }
  //移動の処理
  move() {
    this.y -= 5;
    if (this.y < 0) {
      this.isVisible = false;
    }
  }
  //描画の処理
  display() {
    //線を無効
    noStroke();
    //塗りつぶす色
    fill(20, 80, 100);
    //円を描画
    ellipse(this.x, this.y, this.r * 2, this.r * 2);
  }
  //当たり判定
  isHit(enemy) {
    //ライフが0なら当たらない
    if (enemy.life == 0) {
      return false;
    }
    //弾と敵の距離が弾の半径+敵の1辺の長さの半分より短くなったら当たり
    if (dist(this.x, this.y, enemy.x, enemy.y) < this.r + enemy.sidelength / 2) {
      return true;
    }
    //それ以外は当たらない
    return false;
  }
}