Combat System for a Javascript/Jquery RPG Game (Timers)

I just started learning javascript about a month ago. I've been working on a personal project to help me hone my skils and have decided to make a text-based RPG Game.

What I want to achieve is a combat system based on a "tick" system or time. Basically once combat is initiated (by attacking) the ticks would initiate and the enemy would attack me every 3 ticks(seconds) or so. How often the enemy attacks would also be based on their agility stat.

As of right now, I have a basic combat system that attacks the enemy for a random value based on the player's strength and enemies defense values. However, the enemy only attacks back once I attack them, and its instantaneously. Here's the code for that.

regPlayerAttack = function () {

    //random boolean to determine if its going to be 10% dmg of positive or 

negative

    randomDmgFlag = Math.round(Math.random());

    //the 10% will be added on

    if (randomDmgFlag === 1) {

        rawDmg = Math.round((player.level * 3 + player.strength * 8) - 

(chosenEnemy.stamina * 2));

        randomDmgRange = (15.0 / 100) * rawDmg;

        randomDmg = Math.floor(Math.random() * (randomDmgRange - 0) + 0);

        totalDmg = rawDmg + randomDmg;

        chosenEnemy.health -= totalDmg;

        $("#textbox-text").prepend("You attacked the " + chosenEnemy.name + 

" for " + totalDmg + " damage." + "<br>");

    }

    //the 10% will be subtracted

    else {

        rawDmg = Math.round((player.level * 3 + player.strength * 8) - 

(chosenEnemy.stamina * 2));

        randomDmgRange = (15.0 / 100) * rawDmg;

        randomDmg = Math.floor(Math.random() * (randomDmgRange - 0) + 0);

        totalDmg = rawDmg - randomDmg;

        chosenEnemy.health -= totalDmg;

        $("#textbox-text").prepend("You attacked the " + chosenEnemy.name + 

" for " + totalDmg + " damage." + "<br>");

    }

}

I have the same function for the enemy attack that works exactly like the code above. (I know I should make it into one function, but I wanted to visualize it first)

So to sum it up, I want a way for the enemy to keep attacking me once combat has been initiated based on a time system and they'll attack faster or slower based on their agility stat. I'm still messing with damage formulas so nothing is set in stone. Any ideas?? Thanks.

asked Jan 3 at 1:15

Jullyo Lima

233

add a comment |

I just started learning javascript about a month ago. I've been working on a personal project to help me hone my skils and have decided to make a text-based RPG Game.

regPlayerAttack = function () {

    //random boolean to determine if its going to be 10% dmg of positive or 

negative

    randomDmgFlag = Math.round(Math.random());

    //the 10% will be added on

    if (randomDmgFlag === 1) {

        rawDmg = Math.round((player.level * 3 + player.strength * 8) - 

(chosenEnemy.stamina * 2));

        randomDmgRange = (15.0 / 100) * rawDmg;

        randomDmg = Math.floor(Math.random() * (randomDmgRange - 0) + 0);

        totalDmg = rawDmg + randomDmg;

        chosenEnemy.health -= totalDmg;

        $("#textbox-text").prepend("You attacked the " + chosenEnemy.name + 

" for " + totalDmg + " damage." + "<br>");

    }

    //the 10% will be subtracted

    else {

        rawDmg = Math.round((player.level * 3 + player.strength * 8) - 

(chosenEnemy.stamina * 2));

        randomDmgRange = (15.0 / 100) * rawDmg;

        randomDmg = Math.floor(Math.random() * (randomDmgRange - 0) + 0);

        totalDmg = rawDmg - randomDmg;

        chosenEnemy.health -= totalDmg;

        $("#textbox-text").prepend("You attacked the " + chosenEnemy.name + 

" for " + totalDmg + " damage." + "<br>");

    }

}

I have the same function for the enemy attack that works exactly like the code above. (I know I should make it into one function, but I wanted to visualize it first)

asked Jan 3 at 1:15

Jullyo Lima

233

add a comment |

I just started learning javascript about a month ago. I've been working on a personal project to help me hone my skils and have decided to make a text-based RPG Game.

regPlayerAttack = function () {

    //random boolean to determine if its going to be 10% dmg of positive or 

negative

    randomDmgFlag = Math.round(Math.random());

    //the 10% will be added on

    if (randomDmgFlag === 1) {

        rawDmg = Math.round((player.level * 3 + player.strength * 8) - 

(chosenEnemy.stamina * 2));

        randomDmgRange = (15.0 / 100) * rawDmg;

        randomDmg = Math.floor(Math.random() * (randomDmgRange - 0) + 0);

        totalDmg = rawDmg + randomDmg;

        chosenEnemy.health -= totalDmg;

        $("#textbox-text").prepend("You attacked the " + chosenEnemy.name + 

" for " + totalDmg + " damage." + "<br>");

    }

    //the 10% will be subtracted

    else {

        rawDmg = Math.round((player.level * 3 + player.strength * 8) - 

(chosenEnemy.stamina * 2));

        randomDmgRange = (15.0 / 100) * rawDmg;

        randomDmg = Math.floor(Math.random() * (randomDmgRange - 0) + 0);

        totalDmg = rawDmg - randomDmg;

        chosenEnemy.health -= totalDmg;

        $("#textbox-text").prepend("You attacked the " + chosenEnemy.name + 

" for " + totalDmg + " damage." + "<br>");

    }

}

I have the same function for the enemy attack that works exactly like the code above. (I know I should make it into one function, but I wanted to visualize it first)

asked Jan 3 at 1:15

Jullyo Lima

233

I just started learning javascript about a month ago. I've been working on a personal project to help me hone my skils and have decided to make a text-based RPG Game.

regPlayerAttack = function () {

    //random boolean to determine if its going to be 10% dmg of positive or 

negative

    randomDmgFlag = Math.round(Math.random());

    //the 10% will be added on

    if (randomDmgFlag === 1) {

        rawDmg = Math.round((player.level * 3 + player.strength * 8) - 

(chosenEnemy.stamina * 2));

        randomDmgRange = (15.0 / 100) * rawDmg;

        randomDmg = Math.floor(Math.random() * (randomDmgRange - 0) + 0);

        totalDmg = rawDmg + randomDmg;

        chosenEnemy.health -= totalDmg;

        $("#textbox-text").prepend("You attacked the " + chosenEnemy.name + 

" for " + totalDmg + " damage." + "<br>");

    }

    //the 10% will be subtracted

    else {

        rawDmg = Math.round((player.level * 3 + player.strength * 8) - 

(chosenEnemy.stamina * 2));

        randomDmgRange = (15.0 / 100) * rawDmg;

        randomDmg = Math.floor(Math.random() * (randomDmgRange - 0) + 0);

        totalDmg = rawDmg - randomDmg;

        chosenEnemy.health -= totalDmg;

        $("#textbox-text").prepend("You attacked the " + chosenEnemy.name + 

" for " + totalDmg + " damage." + "<br>");

    }

}

I have the same function for the enemy attack that works exactly like the code above. (I know I should make it into one function, but I wanted to visualize it first)

javascript jquery

asked Jan 3 at 1:15

Jullyo Lima

233

asked Jan 3 at 1:15

Jullyo Lima

233

asked Jan 3 at 1:15

Jullyo Lima

233

asked Jan 3 at 1:15

Jullyo Lima

233

asked Jan 3 at 1:15

Jullyo Lima

233

add a comment |

1 Answer
1

active

oldest

votes

One option would be to use a turn counter and an interval which triggers every second (or whatever you want). When a character's turn % agility === 0, that character attacks. (eg, agility of 1 would mean the character attacks every turn - agility of 3 would mean the character attacks every 3 turns)

const enemies = [

  { agility: 3, name: 'enemy1', hp: 100 }

];

const player = { agility: 1 };



let turn = 0;

const interval = setInterval(() => {

  console.clear();

  console.log('turn ' + turn);

  // player attacks every turn with agility 1:

  regPlayerAttack();

  

  // if all enemies are dead, end the interval

  if (enemies.every(({ hp }) => hp <= 0)) {

    clearInterval(interval);

    console.log('done');

  }



  // every enemy whose agility modulo the current turn is 0 attacks:

  enemies

    .filter(({ agility }) => turn % agility === 0)

    .forEach(enemyAttack);

  

  turn++;

}, 1000);



function regPlayerAttack() {

  console.log('player attacking...');

  // insert attack logic

}

function enemyAttack(enemy) {

  console.log(enemy.name + ' attacking...');

  // insert attack logic

}

Note that like this, agility is inversely proportional to speed - lower agility is better. This makes the calculations really easy to visualize when there are no fractions involved, but if you want higher agility to correspond to higher speed, you can change the formula as you like.

answered Jan 3 at 1:32

CertainPerformance

97.4k165887

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015176%2fcombat-system-for-a-javascript-jquery-rpg-game-timers%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

const enemies = [

  { agility: 3, name: 'enemy1', hp: 100 }

];

const player = { agility: 1 };



let turn = 0;

const interval = setInterval(() => {

  console.clear();

  console.log('turn ' + turn);

  // player attacks every turn with agility 1:

  regPlayerAttack();

  

  // if all enemies are dead, end the interval

  if (enemies.every(({ hp }) => hp <= 0)) {

    clearInterval(interval);

    console.log('done');

  }



  // every enemy whose agility modulo the current turn is 0 attacks:

  enemies

    .filter(({ agility }) => turn % agility === 0)

    .forEach(enemyAttack);

  

  turn++;

}, 1000);



function regPlayerAttack() {

  console.log('player attacking...');

  // insert attack logic

}

function enemyAttack(enemy) {

  console.log(enemy.name + ' attacking...');

  // insert attack logic

}

answered Jan 3 at 1:32

CertainPerformance

97.4k165887

add a comment |

const enemies = [

  { agility: 3, name: 'enemy1', hp: 100 }

];

const player = { agility: 1 };



let turn = 0;

const interval = setInterval(() => {

  console.clear();

  console.log('turn ' + turn);

  // player attacks every turn with agility 1:

  regPlayerAttack();

  

  // if all enemies are dead, end the interval

  if (enemies.every(({ hp }) => hp <= 0)) {

    clearInterval(interval);

    console.log('done');

  }



  // every enemy whose agility modulo the current turn is 0 attacks:

  enemies

    .filter(({ agility }) => turn % agility === 0)

    .forEach(enemyAttack);

  

  turn++;

}, 1000);



function regPlayerAttack() {

  console.log('player attacking...');

  // insert attack logic

}

function enemyAttack(enemy) {

  console.log(enemy.name + ' attacking...');

  // insert attack logic

}

answered Jan 3 at 1:32

CertainPerformance

97.4k165887

add a comment |

const enemies = [

  { agility: 3, name: 'enemy1', hp: 100 }

];

const player = { agility: 1 };



let turn = 0;

const interval = setInterval(() => {

  console.clear();

  console.log('turn ' + turn);

  // player attacks every turn with agility 1:

  regPlayerAttack();

  

  // if all enemies are dead, end the interval

  if (enemies.every(({ hp }) => hp <= 0)) {

    clearInterval(interval);

    console.log('done');

  }



  // every enemy whose agility modulo the current turn is 0 attacks:

  enemies

    .filter(({ agility }) => turn % agility === 0)

    .forEach(enemyAttack);

  

  turn++;

}, 1000);



function regPlayerAttack() {

  console.log('player attacking...');

  // insert attack logic

}

function enemyAttack(enemy) {

  console.log(enemy.name + ' attacking...');

  // insert attack logic

}

answered Jan 3 at 1:32

CertainPerformance

97.4k165887

const enemies = [

  { agility: 3, name: 'enemy1', hp: 100 }

];

const player = { agility: 1 };



let turn = 0;

const interval = setInterval(() => {

  console.clear();

  console.log('turn ' + turn);

  // player attacks every turn with agility 1:

  regPlayerAttack();

  

  // if all enemies are dead, end the interval

  if (enemies.every(({ hp }) => hp <= 0)) {

    clearInterval(interval);

    console.log('done');

  }



  // every enemy whose agility modulo the current turn is 0 attacks:

  enemies

    .filter(({ agility }) => turn % agility === 0)

    .forEach(enemyAttack);

  

  turn++;

}, 1000);



function regPlayerAttack() {

  console.log('player attacking...');

  // insert attack logic

}

function enemyAttack(enemy) {

  console.log(enemy.name + ' attacking...');

  // insert attack logic

}

const enemies = [

  { agility: 3, name: 'enemy1', hp: 100 }

];

const player = { agility: 1 };



let turn = 0;

const interval = setInterval(() => {

  console.clear();

  console.log('turn ' + turn);

  // player attacks every turn with agility 1:

  regPlayerAttack();

  

  // if all enemies are dead, end the interval

  if (enemies.every(({ hp }) => hp <= 0)) {

    clearInterval(interval);

    console.log('done');

  }



  // every enemy whose agility modulo the current turn is 0 attacks:

  enemies

    .filter(({ agility }) => turn % agility === 0)

    .forEach(enemyAttack);

  

  turn++;

}, 1000);



function regPlayerAttack() {

  console.log('player attacking...');

  // insert attack logic

}

function enemyAttack(enemy) {

  console.log(enemy.name + ' attacking...');

  // insert attack logic

}

const enemies = [

  { agility: 3, name: 'enemy1', hp: 100 }

];

const player = { agility: 1 };



let turn = 0;

const interval = setInterval(() => {

  console.clear();

  console.log('turn ' + turn);

  // player attacks every turn with agility 1:

  regPlayerAttack();

  

  // if all enemies are dead, end the interval

  if (enemies.every(({ hp }) => hp <= 0)) {

    clearInterval(interval);

    console.log('done');

  }



  // every enemy whose agility modulo the current turn is 0 attacks:

  enemies

    .filter(({ agility }) => turn % agility === 0)

    .forEach(enemyAttack);

  

  turn++;

}, 1000);



function regPlayerAttack() {

  console.log('player attacking...');

  // insert attack logic

}

function enemyAttack(enemy) {

  console.log(enemy.name + ' attacking...');

  // insert attack logic

}

answered Jan 3 at 1:32

CertainPerformance

97.4k165887

answered Jan 3 at 1:32

CertainPerformance

97.4k165887

answered Jan 3 at 1:32

CertainPerformance

97.4k165887

answered Jan 3 at 1:32

CertainPerformance

97.4k165887

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu