I have completed this simple death battle game with Javascript. Basically, the game will have 2 characters who will be attacking each other until one dies. That's it. Just wondering, how can I refactor my code further to reduce the code repetition in this program?
var superman = {
life: 10,
isAlive: true,
attack: function () {
return Math.floor(Math.random() * 3);
}
};
var batman = {
life: 10,
isAlive: true,
attack: function () {
return Math.floor(Math.random() * 3);
}
};
$('#supermanLife').text(superman.life);
$('#batmanLife').text(batman.life);
const playGame = () => {
init();
debugger
fight();
function fight() {
setTimeout(function () {
// while both still alive, figth each other.
//while (superman.isAlive && batman.isAlive) {
var whoAttack = Math.floor(Math.random() * 2);
if (whoAttack === 0) {
// superman attack batman
// if attack is zero, enemy avoided attack.
if (superman.attack === 0) {
} else {
batman.life = batman.life - 1;
}
if (batman.life <= 0)
batman.isAlive = false;
showHeroLife();
} else {
debugger
// batman attack superman
// if attack is zero, enemy avoided attack.
if (batman.attack === 0) {
} else {
superman.life = superman.life - 1;
}
if (superman.life <= 0)
superman.isAlive = false;
showHeroLife();
}
checkEndGame();
//}
if (superman.isAlive && batman.isAlive)
fight();
}, 1000);
}
}
const showHeroLife = () => {
$('#supermanLife').text(superman.life);
$('#batmanLife').text(batman.life);
}
const checkEndGame = () => {
if (superman.isAlive === false || batman.isAlive === false) {
console.log('Game Over');
if (superman.isAlive) {
$('#gameResult').text('Superman killed Batman with X-Ray laser vision.');
console.log('Superman win');
$('#heroBatman').fadeTo(1000, 0.2); // fadeOut
}
else {
$('#gameResult').text('Batman killed Superman with Kryptonite spear.');
console.log('Batman win');
$('#heroSuperman').fadeTo(1000, 0.2); // fadeOut
}
}
};
const init = () => {
$('#gameResult').text('');
superman.life = 10;
superman.isAlive = true;
$('#heroSuperman').fadeTo(2000, 1);
batman.life = 10;
batman.isAlive = true;
$('#heroBatman').fadeTo(2000, 1);
};
div#main {
max-width: 500;
margin: 0 auto;
font-size: 2em;
text-align: center;
}
div#heroContainer {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
img.hero {
height: 200px;
width: 200px;
border-radius: 50%;
}
button {
font-size: 2em;
margin-top: -40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main'>
<button onclick="playGame()">Fight!</button>
<div id='heroContainer'>
<div id='heroBatman'>
<img src="Img/batman.jpg" class='hero'>
<br>Life: <span id='batmanLife'></span>
</div>
<div id='heroSuperman'>
<img src="Img/superman.jpg" class='hero'>
<br>Life: <span id='supermanLife'></span>
</div>
</div>
<div id='gameResult'></div>
</div>
My source is in my github - ngaisteve1/DeathBattleGameJS