タイトル:ポケットモンスタークリッカー (Pokémon Clicker)
プレイ方法:
1. 最初にスターターポケモンを選んでスタートする。
2. ポケモンの画像をクリックして、経験値を獲得する。
3. 経験値が一定値に達するとレベルアップし、新しいスキルを獲得できる。
4. スキルを使って敵ポケモンと戦い、勝利するとポケモンカードを獲得できる。
5. ポケモンカードを集めて、ポケモン図鑑を完成させよう!
実装方法:
1. HTMLファイルに以下のコードを記述する。
Pokémon Clicker
2. JavaScriptコードを記述する。
// スターターポケモンの選択
var starterPokemon = promptHisa("スターターポケモンを選んでください(ピカチュウ、ヒトカゲ、ゼニガメ)", "ピカチュウ");
// ポケモンの初期値
var pokemon = {
name: starterPokemon,
level: 1,
exp: 0,
skills: ["たいあたり", "ひっかく"],
baseExp: 50
};
// ポケモンの初期画像
var pokemonImage = new Image();
pokemonImage.src="./img/" + pokemon.name + "emozi_hamuster.png";
// ポケモンの初期表示
var pokemonContainer = document.getElementById("pokemon-container");
pokemonContainer.innerHTML = "
" + pokemon.name + " Lv." + pokemon.level + "
";
pokemonContainer.appendChild(pokemonImage);
// ポケモンのクリックイベント
pokemonImage.addEventListener("click", function() {
pokemon.exp += 10;
if (pokemon.exp >= pokemon.baseExp) {
pokemon.level += 1;
pokemon.exp = 0;
pokemon.skills.push("かみなり");
pokemonContainer.innerHTML = "
" + pokemon.name + " Lv." + pokemon.level + "
";
}
});
// スキルの初期表示
var skillContainer = document.getElementById("skill-container");
for (var i = 0; i < pokemon.skills.length; i++) {
var skillButton = document.createElement("button");
skillButton.innerHTML = pokemon.skills[i];
skillButton.addEventListener("click", function() {
alertHisa(this.innerHTML + "を使った!");
});
skillContainer.appendChild(skillButton);
}
// 敵ポケモンの初期値
var enemyPokemon = {
name: "フシギダネ",
level: 1,
hp: 50,
baseExp: 50
};
// 敵ポケモンの初期画像
var enemyImage = new Image();
enemyImage.src="./img/" + enemyPokemon.name + "emozi_himawari.png";
// 敵ポケモンの初期表示
var enemyContainer = document.getElementById("enemy-container");
enemyContainer.innerHTML = "
" + enemyPokemon.name + " Lv." + enemyPokemon.level + "
";
enemyContainer.innerHTML += "
HP: " + enemyPokemon.hp + "
";
enemyContainer.appendChild(enemyImage);
// 敵ポケモンのクリックイベント
enemyImage.addEventListener("click", function() {
var damage = Math.floor(Math.random() * 10) + 10;
enemyPokemon.hp -= damage;
if (enemyPokemon.hp <= 0) {
alertHisa(enemyPokemon.name + "を倒した!");
pokemon.exp += enemyPokemon.baseExp;
if (pokemon.exp >= pokemon.baseExp) {
pokemon.level += 1;
pokemon.exp = 0;
pokemon.skills.push("かみなり");
pokemonContainer.innerHTML = "
" + pokemon.name + " Lv." + pokemon.level + "
";
}
var pokemonCard = document.createElement("div");
pokemonCard.className = "card";
var pokemonCardImage = new Image();
pokemonCardImage.src="./img/" + enemyPokemon.name + "emozi_rabbit.png";
pokemonCard.appendChild(pokemonCardImage);
var pokemonCardName = document.createElement("h3");
pokemonCardName.innerHTML = enemyPokemon.name;
pokemonCard.appendChild(pokemonCardName);
var pokemonCardLevel = document.createElement("p");
pokemonCardLevel.innerHTML = "Lv." + enemyPokemon.level;
pokemonCard.appendChild(pokemonCardLevel);
var pokemonCardExp = document.createElement("p");
pokemonCardExp.innerHTML = "Exp." + enemyPokemon.baseExp;
pokemonCard.appendChild(pokemonCardExp);
document.getElementById("card-container").appendChild(pokemonCard);
} else {
enemyContainer.innerHTML = "
" + enemyPokemon.name + " Lv." + enemyPokemon.level + "
";
enemyContainer.innerHTML += "
HP: " + enemyPokemon.hp + "
";
enemyContainer.appendChild(enemyImage);
}
});
3. 画像ファイルをimgディレクトリに保存する。
- ピカチュウ.png
- ヒトカゲ.png
- ゼニガメ.png
- フシギダネ.png
4. プレイする。
- スターターポケモンを選んでスタートする。
- ポケモンの画像をクリックして、経験値を獲得する。
- スキルを使って敵ポケモンと戦い、勝利するとポケモンカードを獲得できる。
- ポケモンカードを集めて、ポケモン図鑑を完成させよう!