JavaScript Starters

maths blaster.html

What are these two numbers added together?
<div id="number1">1</div>
<div id="number2">1</div>
<input type="text" id="answer">
<button onclick="mark()">Mark my answer</button>
<button onclick="generate()">New Question</button>

<script>
var number1 = 1;
var number2 = 1;

function generate(){
    number1 = Math.floor(Math.random()*6)+1;
    number2 = Math.floor(Math.random()*6)+1;
    document.getElementById("number1").innerHTML = number1;
    document.getElementById("number2").innerHTML = number2;
}

function mark(){
    var answer = number1 + number2;
    guess = parseInt(document.getElementById("answer").value);
    if (guess == answer){
        alert("right");
    } else {
        alert("wrong")
    }
}</script>

Make the following modifications to the Maths Blaster script:

1. Increase the range of random numbers from 1 to 6 to 1 to 10
2. Don't use alert popups, instead display the word "right" or "wrong" on the HTML page somewhere
3. Add variables that count and display the number of questions i get right and wrong
4. Difficult: make it generate minus and multiplication questions as well
5. Difficult: make it generate divide by questions, but for whole numbers that actually divide evenly together (no decimal answers)

memory game.html

<style>
  .card {
      background-color: chartreuse;
      height: 64px;
      width: 64px;
      display: inline-block;
      margin: 5px;
  }
</style>

<div class="card" id="card1" onclick="flip('card1');"></div>
<div class="card" id="card2" onclick="flip('card2');"></div>
<br>
<div class="card" id="card3" onclick="flip('card3');"></div>
<div class="card" id="card4" onclick="flip('card4');"></div>

<script>
function flip(card){
  document.getElementById(card).style.backgroundColor = 'salmon';
}
</script>

Make the following modifications to the Memory Game script:

1. Change it from a 2x2 to a 3x3 grid
2. Difficult: add some code so that different colours will show, depending on their element id (e.g., if card == 'card1')
3. Difficult: add a function reset() that changes all cards back to the same unflipped colour
4. Add a variable count_flipped that counts and displays the number of cards clicked on
5. Difficult: add some code so that if count_flipped is equal to 2 (2 cards flipped), run the reset() function
6. Difficult: finally, figure out how you can code this game so that if there is a colour match, the matched cards do not reset

simple RPG.html

<style>
  img{ height:300px; width:auto; }
  table{ border-collapse: collapse; }
  tr,td{ border: 1px black solid; }
</style>

<img src="https://static.wikia.nocookie.net/elderscrolls/images/6/6a/Falkreath_Guard.png">
vs
<img src="https://static.wikia.nocookie.net/elderscrolls/images/e/ee/Ulfric_Jarl.png">

<table>
  <tr> <td id="guard_health"> 100 </td> <td id="ulfric_health"> 100 </td> </tr>
  <tr> 
      <td> <button onclick="guard_attack()">Guard Attack</button> </td>
      <td> <button onclick="ulfric_attack()">Ulfric Attack</button> </td>
  </tr>
</table>

<script>
var ulfric_health = 100;
var guard_health = 100;

function guard_attack(){
  damage = Math.floor((Math.random() * 7) + 1); 
  ulfric_health = ulfric_health - damage; 
  document.getElementById("ulfric_health").innerHTML = ulfric_health;
}

function ulfric_attack(){
  damage = Math.floor((Math.random() * 14) + 2); 
  guard_health = guard_health - damage; 
  document.getElementById("guard_health").innerHTML = guard_health;
}
</script>

Make the following modifications to the Simple RPG script:

1. Add an id to Ulfric and the Guards Attack Buttons, e.g.: id="ulfric_attack_button"
2. If someone loses all their health, hide the attack buttons, e.g.: document.getElementById('ulfric_attack_button').style.display = 'none';
3. Add more enemies to battle

card slots.html

<img src="https://digisoln.com/resources/cards/cardback.gif" id="card1">
<img src="https://digisoln.com/resources/cards/cardback.gif" id="card2">
<img src="https://digisoln.com/resources/cards/cardback.gif" id="card3">
<button onclick="spin()"> spin </button>

<script>
Array.prototype.random = function(){
  return this[Math.floor((Math.random()*this.length))];
}
function card_image_link(value,suit){
  return "https://digisoln.com/resources/cards/"+value+suit+".gif"
}

var suits = ["h","d","s","c"];
var vals = ["2","3","4","5","6","7","8","9","t","j","q","k","a"]

function spin(){
    var card1_suit = suits.random(), card2_suit = suits.random(), card3_suit = suits.random()
    var card1_val = vals.random(), card2_val = vals.random(), card3_val = vals.random()
    document.getElementById("card1").src = card_image_link(card1_val, card1_suit);
    document.getElementById("card2").src = card_image_link(card2_val, card2_suit);
    document.getElementById("card3").src = card_image_link(card3_val, card3_suit);
}
</script>

Make the following modifications to the Card Slots script:

1. Calculate different winning combinations, such as two of a kind, flush, straight, etc.
2. Add more cards
3. Add cost / odds mechanics