◆20200812 回復量が敵攻撃力に追いつかないDQ
簡易版ドラゴンクエストを利用した問題演習
問題1
画像を指定したキャラに変更
問題2
ライフがマイナスになった時に0になるように設定
問題３
回復処理を作成（HTML側で回復のボタンは作成済み）
問題４
回復値がキャラの最大HPを超えないように設定
追加問題1
勝敗判定を行い、判定後にボタンを消す設定
追加問題２
負けたキャラの画像を消すように設定
一通り解いてみたが、キャラを好きに変更したり死んだ時の画像に切り替え
たりもできるのでいろいろいじってみると面白いかも。
回復ボタンを駆使しながらゾーマを攻略しようとしても回復量がしょぼすぎる
ので全く役にたたない・・・。
〇この問題で得た知識・できるようになったこと
・キャラクター、職種、最大HP等を配列で管理する
・何回も使う変数は宣言して簡単に入力できるようにする
・document.getElementById('ID名')
.setAttributee('src', 配列名.画像名);
→画像をブラウザに表示させる
・document.getElementById('ID名')
.innerHTML=配列名.配列の中の配列;
→文字をブラウザに表示させる
・document.getElementById("ID名")
.style.visibility = "hidden";
→HTMLの'ID名'の部分をJSファイルから非表示設定する
・関数の設定・関数の呼び出しの記述の仕方
・関数の設定・関数の呼び出しの記述の仕方
JSファイル
// プレイヤーリスト
var playerList = [
{ name: 'ライアン', job: '戦士', maxLife: 600, life: 600, attack: 1200, magic: 100, aliveImg: 'img/p_01.gif', deadImg: 'img/p_01dead.gif' },
{ name: 'クリフト', job: '僧侶', maxLife: 400, life: 400, attack: 500, magic: 800, aliveImg: 'img/p_02.gif', deadImg: 'img/p_02dead.gif' },
{ name: 'アリーナ', job: '武闘家', maxLife: 600, life: 600, attack: 1200, magic: 100, aliveImg: 'img/p_03.gif', deadImg: 'img/p_03dead.gif' },
];
// 出現する敵リスト
var enemyList = [
{ name: 'バラモス', maxLife: 4000, life: 3500, attack: 400, dead: 0, aliveImg: 'img/e_01.gif', damageImg: 'img/e_01damage.gif' },
{ name: 'ゾーマ', maxLife: 4500, life: 4000, attack: 450, dead: 0, aliveImg: 'img/e_02.gif', damageImg: 'img/e_02damage.gif' },
{ name: 'デスピサロ', maxLife: 5000, life: 4500, attack: 500, dead: 0, aliveImg: 'img/e_03.gif', damageImg: 'img/e_03damage.gif' },
];
// playerの番号（pNum）とenemyの番号（eNum）を宣言をしておくことで
// 番号を変えるだけで画像・HPが入れ替わるようになる
var pNum = 0
var eNum = 1
// プレイヤー画面表示
document.getElementById('playerImg').setAttribute('src', playerList[pNum].aliveImg);
document.getElementById('playerName').innerHTML = playerList[pNum].name;
document.getElementById('playerLife').innerHTML = playerList[pNum].life;
// 敵画面表示
// 問題１
// ゾーマを表示すること
document.getElementById('enemyImg').setAttribute('src', enemyList[eNum].aliveImg);
document.getElementById('enemyName').innerHTML = enemyList[eNum].name;
document.getElementById('enemyLife').innerHTML = enemyList[eNum].life;
function attack() {
// 問題２
// 敵のライフがマイナスになった場合「0」に修正して表示すること
console.log('攻撃');
var attackPoint = Math.floor(Math.random() * playerList[pNum].attack);
console.log(attackPoint);
enemyList[eNum].life -= attackPoint;
document.getElementById('enemyLife').innerHTML = enemyList[eNum].life;
// if文を使って0未満になった時にコンソールとブラウザ上に.dead(HP=0)を
//表示するように設定する
if (enemyList[eNum].life < 0) {
console.log(enemyList[eNum].dead);
document.getElementById('enemyLife').innerHTML = enemyList[eNum].dead;
}
enemyAttack();
// ↑敵の攻撃。 enemyAttack()の設定は下部に記述アリ
}
function recover() {
console.log('回復');
// 問題３
// 攻撃を参考に回復処理を作成すること
// ※回復に使用する値はプレイヤーのmagic値を使用する
// ※回復時も敵の攻撃を受けるようにする
var healPoint = Math.floor(Math.random() * playerList[pNum].magic);
console.log(healPoint);
playerList[pNum].life += healPoint;
document.getElementById('playerLife').innerHTML = playerList[pNum].life;
enemyAttack();
// ↑回復時の敵の攻撃
// 問題４
// 回復値がプレイヤーのmaxLife値を超えないようにすること
// 回復した際に自分のHPがMaxHPを超えた場合、MaxHPを表示するように設定。
if (playerList[pNum].life > playerList[pNum].maxLife) {
console.log(playerList[pNum].maxLife);
document.getElementById('playerLife').innerHTML = playerList[pNum].maxLife;
};
}
// 敵攻撃設定
function enemyAttack() {
console.log('敵攻撃');
var enemyAttackPoint = Math.floor(Math.random() * enemyList[eNum].attack);
console.log(enemyAttackPoint);
playerList[pNum].life -= enemyAttackPoint;
if (playerList[pNum].life < 0) {
playerList[pNum].life = 0;
}
document.getElementById('playerLife').innerHTML = playerList[pNum].life;
}
// 追加問題１
// 勝敗判定をして勝敗決定後はボタンを非表示にすること
// 非表示にするためのコードは
// document.getElementById("ID名").style.visibility = "hidden";
// ※今回は使わないが表示するためのコードは
// document.getElementById("ID名").style.visibility = "hidden";
// 追加問題２
// 勝敗判定後負けたほうを非表示にすること
document.getElementById("controller").style.visibility = "visibility";
function attack() {
console.log('攻撃');
var attackPoint = Math.floor(Math.random() * playerList[pNum].attack);
console.log(attackPoint);
enemyList[eNum].life -= attackPoint;
document.getElementById('enemyLife').innerHTML = enemyList[eNum].life;
if (enemyList[eNum].life < 0) {
console.log(enemyList[eNum].dead);
document.getElementById('enemyLife').innerHTML = enemyList[eNum].dead;
}
enemyAttack();
// 追加問題１の答え 敵のHPが0以下になったらボタンを非表示にする
if (enemyList[eNum].life <= 0) {
document.getElementById("controller").style.visibility = "hidden";
// 追加問題２の答え 画像も消すようにする
document.getElementById("enemyImg").style.visibility = "hidden";
}
//追加問題１の答え 味方のHPが0以下になったらボタンを非表示にする
if (playerList[pNum].life <= 0) {
document.getElementById("controller").style.visibility = "hidden";
// 追加問題２の答え 画像も消すようにする
document.getElementById("playerImg").style.visibility = "hidden";
}
}
// 回復中も攻撃を受けるので回復ボタン側の設定もする
function recover() {
console.log('回復');
var healPoint = Math.floor(Math.random() * playerList[pNum].magic);
console.log(healPoint);
playerList[pNum].life += healPoint;
document.getElementById('playerLife').innerHTML = playerList[pNum].life;
enemyAttack();
if (playerList[pNum].life > playerList[pNum].maxLife) {
console.log(playerList[pNum].maxLife);
document.getElementById('playerLife').innerHTML = playerList[pNum].maxLife;
};
// 追加問題１の答え 味方のHPが0以下になったらボタンを非表示にする
if (playerList[pNum].life <= 0) {
document.getElementById("controller").style.visibility = "hidden";
// 追加問題２の答え 画像も消すようにする
document.getElementById("playerImg").style.visibility = "hidden";
}
}
以下今回の問題のHTMLファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>関数</title>
</head>
<body>
<div class="box">
<div class="inner">
<div class="status">
<div class="player">
<div class="img">
<img id="playerImg" src="img/p_01.gif">
</div>
<div class="name">
名前：<span id="playerName"></span>
</div>
<div class="life">
体力：<span id="playerLife">0</span>
</div>
</div>
<div class="enemy">
<div class="img">
<img id="enemyImg" src="img/e_01damage.gif">
</div>
<div class="name">
名前：<span id="enemyName"></span>
</div>
<div class="life">
体力：<span id="enemyLife">0</span>
</div>
</div>
</div>
<div id="controller">
<input type="button" value="攻撃" onclick="attack();">
<input type="button" value="回復" onclick="recover();">
</div>
</div>
</div>
<script src="js/script01.js"></script>
</body>
</html>
