javascript-ゲームを作ってオブジェクトを学ぶ-

#この記事について
現役プログラマーさんから教えていただいたことをまとめている記事です。今回はJavaScriptの基礎を使ったゲームづくりを通して、教えていただいたことをまとめていきます。

#関数
まずfunctionを使った足し算をする簡単な関数をみていきます。
sumNumberは関数名で、自由に名前をつけることができます。
a,bは引数で、後にから代入する具体的な数字を入れるための箱のようなものです。

.js

//aとbを足して、コンソールに表示する関数を定義
function sumNumber(a,b){
	console.log(a+b);
}
//関数名とa,bに入る数字を記入すると、上の関数に代入されます。
sumNamber(3,4);

//結果：７

#allow関数
上の関数をallow関数で書いてみます。

.js

const sumNumber = (a,b) =>{
  console.log(a+b);
}
sumNumber(3,4);

先ほどのfunctionを使った関数を下のように書き換えています。
const 関数名 = (引数) => {　関数の中身　}

functionを使った関数に問題が見つかり、allow関数で回避することができるので、こちらを主に使っていくのがベターみたいです。

#オブジェクト
オブジェクトを使うと、今までsumNumber(3,4)のように、数字や文字などを単体だった情報をまとめて管理できるようになります。

.js

const user1 = {
  name:"ポチ",
  age:7,
  weight: 15
}

このオブジェクトだとオブジェクト名はuser1です。nameやageなどの要素はプロパティと呼びます。プロパティは「 , （カンマ）」でつなぎます。最後のプロパティの後ろは何もつけないので注意！
オブジェクトは、オブジェクト名.プロパティ名　で呼び出すことができます。

.js

console.log(user1.name);
console.log(user1.age);

結果：ポチ
　　　7

◎関数の引数としてオブジェクトを渡すことができます！
name,age,weightを表示させる関数を作り,その引数に先ほどのオブジェクトuser1を代入してみます。

.js

const loginUser = (u) =>{
 console.log(u.name);
 console.log(u.age);
 console.log(u.weight);
}
loginUser(user1);

結果：ポチ
　　　７
　　　15

関数の引数“u”が“user1”が置き換わるイメージです。初めの引数の“u”は、ただの数字を代入する箱のようなイメージで意味を持たないと考えようにすると、分かりやすくなると思います。

#ゲームを作って覚えよう
私は、鬼滅の刃が好きなので、それぞれの剣士の階級を求めるプログラムを作りたいと思います。剣士の腕前を、腕力、速さ、技術に分けて、点数化し、その合計値を元に階級を表示していきます。

###1.炭次郎のオブジェクトを定義

剣士のプロパティーは
・name（文字列）
・power（数字）
・speed（数字）
・technique（数字）
名前以外は、それぞれ1~100の数字。

炭次郎のオブジェクト名は、kenshi1とします。

.js

const kenshi1 = {
  name:"竈門炭治郎",
  power: 50,
  speed: 60,
  technique: 70
}

###2.剣士の階級を求める関数を作成する
剣士の階級はpowerとspeedとtechniqueの合計値で求めます。
合計値が250以上なら甲（キノエ）
合計値が150以上250未満なら丙（ヒノエ）
合計値が150未満なら丁（ヒノト）とします。

.js

//まず腕力、速さ、技術の合計値を求める関数を定義します。この時の、“kenshi”は引数で後で定義する具体的な数値を入れるためのただの箱のようなものです。
const calcSum = (kenshi) => {
  return kenshi.power + kenshi.speed + kenshi.technique;
}

//次に剣士のランクを求める関数を定義します。
const getRank = (kenshi) => {
  const sum = calcSum(kenshi);
  //rankは変化していくので、変数で定義します。文字列になるので、""をつけています。"階級"などの文字を入れてもOK   
  let rank = "";     
  if(sum>=250){
    rank = "甲（キノエ）";
  }else if(sum>=150){
    rank = "丙（ヒノエ）";
  }else{
    rank = "丁（ヒノト）";
  }
　return rank;
}

###3.それぞれのランクをconsoleに出力する

.js

//炭次郎は定義したので、他2人のオブジェクトを定義します
const kenshi2 = {
	name:"煉獄杏寿郎",
	power: 98,
	speed: 96,
	technique:80
}
const kenshi3 = {
	name:"不死川玄弥",
	power: 20,
	speed: 40,
	technique:70
}
//3人の名前とランクをコンソールに表示します
console.log(kenshi1.name);
console.log(getRank(kenshi1));
console.log(kenshi2.name);
console.log(getRank(kenshi2));
console.log(kenshi3.name);
console.log(getRank(kenshi3));

結果