i make quiz app
It displays the winner now if the number of questions expires and counts the points, but I want itin the event of the points being equal to display a message
self.showWinner = function () {
// who has the most points?
let team_data = {};
for (let team_name of self.teams)
team_data[team_name] = 0;
for (let action of self.actions) {
if (self.rounds[self.current.round].indexOf(action.category) === -1)
continue;
if (action.correct)
team_data[action.team] += action.difficulty;
else
team_data[action.team] -= action.difficulty;
}
let name;
let points = -99999;
for (let team_name in team_data) {
if (team_data[team_name] > points) {
points = team_data[team_name];
name = team_name;
}
}
// show screen
$("#overlay").show();
$("#overlay > *").hide();
$("#overlay #winner").show();
$("#winner .text").text(name + " (" + points + " pt)");
// reset game
self.teams = [];
};
if (self.current.round !== undefined && answered_questions === 4) {
setTimeout(self.showWinner, 10);
return;
}
I'm having two timing issues here, both involving the process in this game once the winning move has been made: https://codepen.io/acchang/pen/XWePpWB
Ideally, I should (1) pick the winning space (2) see the winning space filled (3) have the alert proclaim the winner.
What I see and do not like is:
*checkForWinners() runs
winDeclared() runs and the alert "winner" pop up first
Then after the alert is cleared, drawboard() runs, adding the winning piece to the gameboard.
This does not happen as badly in Firefox. The piece is added at the same time the alert pops up.
Then, in winDeclared(), I also change the display in the top right to also indicate the winner. But swapTurns() seems to execute before winDeclared().
Is that because winDeclared() is two functions deep into checkForWinners()? Is there a way to delay it?
Thanks!
let gameboard = [
[1,2,3,4,5,6,7],
[8,9,10,11,12,13,14],
[15,16,17,18,19,20,21],
[22,23,24,25,26,27,28],
[29,30,31,32,33,34,35],
[36,37,38,39,40,41,42]
];
let playerOne
let playerTwo
let indexPick
let availableSpots
let gameType
let playerOneTurn = true
document.getElementsByName("announcements")[0].innerHTML = "Current Player: " + whosPlaying() + " "
let itsAOnePlayerGame = true
let isThereAWinner = false
let mainDiv = document.createElement("div");
mainDiv.setAttribute('class', 'mainDiv')
document.body.append(mainDiv);
let selectorHolder = document.createElement("div")
selectorHolder.setAttribute('class', 'selectorHolder')
selectorHolder.setAttribute('id', 'selectorHolder')
mainDiv.append(selectorHolder)
let selectorTable = document.createElement("table")
selectorTable.setAttribute('class', 'selectorTable')
selectorTable.setAttribute('id', 'selectorTable')
selectorHolder.append(selectorTable)
function drawSelector() {
let selectorRow = document.createElement("tr")
selectorRow.setAttribute('class', 'selectorRow')
selectorTable.append(selectorRow)
for (i=0; i<7; i++){
let selectorCell = document.createElement("td")
selectorCell.setAttribute('class', 'selectorCell')
let innerSelectorCell = document.createElement("div")
innerSelectorCell.setAttribute('class', 'innerSelectorCell')
innerSelectorCell.setAttribute('id', [i])
selectorCell.append(innerSelectorCell)
innerSelectorCell.addEventListener("mouseover", function(event) {
if (playerOneTurn == true) {
innerSelectorCell.classList.add('yellowBG')}
else {innerSelectorCell.classList.add('redBG')
}
})
innerSelectorCell.addEventListener("mouseout", function(event) {
if (playerOneTurn == true) {
innerSelectorCell.classList.remove('yellowBG')}
else {innerSelectorCell.classList.remove('redBG')
}
})
innerSelectorCell.onclick = function(){
if (isThereAWinner == true){return}
else {
indexPick = parseInt(this.id)
console.log(indexPick)
claimSpot()
}
}
selectorRow.append(selectorCell)
}
};
drawSelector()
// Draw Main Gameboard
let mainTable = document.createElement("table");
mainTable.setAttribute('class', 'mainTable')
mainDiv.append(mainTable)
function drawBoard() {
for (i=0; i<gameboard.length; i++){
let row = document.createElement("tr")
mainTable.append(row)
for (j=0; j<gameboard[i].length; j++){
let outerCell = document.createElement('td')
outerCell.setAttribute('class', 'outerCell')
row.append(outerCell)
let innerCell = document.createElement('div')
innerCell.setAttribute('class', 'innerCell')
innerCell.classList.add(gameboard[i][j])
innerCell.setAttribute('innerHTML', gameboard[i][j])
outerCell.append(innerCell)
}
}
};
drawBoard()
function validateRadio() {
let ele = document.getElementsByName('gameType');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked){
gameType = (ele[i].value)
beginGame()
}
}
};
function beginGame() {
if (gameType == "1PEasy"){
itsAOnePlayerGame = true
resetBoard()
onePlayerPickSides()
play1PGame()
}
else if (gameType == "1PHard"){
itsAOnePlayerGame = true
resetBoard()
onePlayerPickSides()
play1PGame()
}
else if (gameType == "2P"){
itsAOnePlayerGame = false
resetBoard()
twoPlayerPickSides()
play2PGame()
}
};
function resetBoard() {
playerOneTurn = true
isThereAWinner = false
gameboard = [
[1,2,3,4,5,6,7],
[8,9,10,11,12,13,14],
[15,16,17,18,19,20,21],
[22,23,24,25,26,27,28],
[29,30,31,32,33,34,35],
[36,37,38,39,40,41,42]
];
}
function swapTurns() {
selectorTable.innerHTML = ""
drawSelector()
playerOneTurn = !playerOneTurn
document.getElementsByName("announcements")[0].innerHTML = "Current Player: " + whosPlaying() + " "
};
// GAMEPLAY
function playerSelects2P() {
findAvailableSpots()
// put an eventListener here?
columnPick = prompt(whosPlaying() + ', choose which column 1-7')
if (availableSpots.includes(parseInt(columnPick)))
{console.log(columnPick)}
else {
alert("not available")
playerSelects2P()}
};
function playerSelects1P() {
if (whosPlaying() == playerTwo) {
findAvailableSpots()
columnPick = availableSpots[Math.floor(Math.random() * availableSpots.length)]
return
}
else {playerSelects2P()}
};
function whosPlaying() {
if (playerOneTurn) {
return "Yellow"
} else {
return "Red"
}
};
// starts from the bottom row and claims spot when there it is a number (unoccupied)
function claimSpot(){
findAvailableSpots()
if (availableSpots.includes(indexPick+1)) {
let i;
for (i = 5; i > -1; i--)
{if (Number.isInteger(gameboard[i][indexPick])) {
gameboard[i].splice((indexPick), 1, whosPlaying())
mainTable.innerHTML = ""
drawBoard()
checkForWinners()
// do I need to put some sort of delay here for it not to go to swap turns right away?
swapTurns()
return
}
}
}
else {
console.log(availableSpots)
alert("Forbidden")
}
};
// if there is a string in row[0], that column is no longer available.
// the cells are numbered from 1 to 7, not per index so you need to add one to indexPick to identify
function findAvailableSpots() {
availableSpots = gameboard[0].filter(x => Number.isInteger(x) == true)
};
function checkForWinners() {
horizontalCheck()
verticalCheck()
downrightCheck()
uprightCheck()
}
// WIN CHECKERS
// a forloop evaluates a section of the matrix, moving through it and seeing if the 3 ahead match.
// it stops before going out of bounds
function findFour(w,x,y,z) {
// Checks first cell against current player and all cells match that player
return ((w == whosPlaying()) && (w === x) && (w === y) && (w === z));
};
function winDeclared() {
isThereAWinner = true
alert("winner")
document.getElementsByName("announcements")[0].innerHTML = whosPlaying() + " wins! "
// this does not show, it snaps to swap places
};
function uprightCheck() {
for (r=5; r>2; r--) {
for (c=0; c<4; c++){
if (findFour(gameboard[r][c], gameboard[r-1][c+1], gameboard[r-2][c+2], gameboard[r-3][c+3])) {
winDeclared()
return
}
}
}
};
function downrightCheck() {
for (r=0; r<3; r++) {
for (c=0; c<4; c++){
if (findFour(gameboard[r][c], gameboard[r+1][c+1], gameboard[r+2][c+2], gameboard[r+3][c+3])) {
winDeclared()
return
}
}
}
};
function verticalCheck() {
for (r=5; r>2; r--) {
for (c=0; c<7; c++){
if (findFour(gameboard[r][c], gameboard[r-1][c], gameboard[r-2][c], gameboard[r-3][c])) {
winDeclared()
return
}
}
}
};
function horizontalCheck() {
for (r=0; r<6; r++) {
for (c=0; c<4; c++){
if (findFour(gameboard[r][c], gameboard[r][c+1], gameboard[r][c+2], gameboard[r][c+3])) {
winDeclared()
return
}
}
}
};
When you manipulate the DOM, the operation itself is syncrhonous but the browser decides when the user will actually see the changes. Sometimes, the broswer will not have time to redraw before the prompt appears. To get around this, you can wrap the alert in a setTimeout() to delay the alert.
setTimeout(
function() {
alert("winner")
}, 10)
Data fetched from the API stored in the Array : movieInfo
let movieInfo = [];
async function popularMovies() {
let page = 1;
let lastResult = [];
do {
try {
const resp = await fetch(popularAPIURL + `&page=${page}`);
const data = await resp.json();
lastResult = data.total_pages;
data.results.forEach((result) => {
movieInfo.push(result);
});
page++;
} catch (err) {
console.error(`Oops, Something is wrong ${err}`);
}
} while (lastResult);
console.log(movieInfo);
}
console.time("Time my API Call");
popularMovies();
console.timeEnd("Time my API Call");
Constructor function created for HTML pagination which also renders data from the Array: movieInfo to create respective Movie cards which basically displays the movie name, image and descp. Now I want to make this Constructor Asynchronous and only be called once the Array : MovieInfo has retrieved all the data from the API
class Paginator {
constructor(totalRecords, recordsPerPage = 1, visiblePages = 1) {
this.recordsPerPage = recordsPerPage;
this.totalRecords = totalRecords;
this.noOfPages = Math.ceil(this.totalRecords / this.recordsPerPage);
this.visiblePages = visiblePages;
this.activePage = 1;
this.visiblePagesEndRange = visiblePages;
this.validate();
}
validate() {
if (this.recordsPerPage <= 0) {
this.recordsPerPage = 1;
}
if (this.visiblePages <= 0) {
this.visiblePages = 1;
}
if (this.totalRecords <= 0) {
this.totalRecords = 1;
}
if (this.noOfPages <= 0) {
this.noOfPages = Math.ceil(this.totalRecords / this.recordsPerPage);
}
if (this.visiblePagesEndRange <= 0) {
this.visiblePagesEndRange = this.visiblePages;
}
if (this.visiblePages > this.noOfPages) {
this.visiblePages = this.noOfPages;
this.visiblePagesEndRange = this.visiblePages;
}
if (this.recordsPerPage > this.totalRecords) {
this.recordsPerPage = this.totalRecords;
}
}
gotoNextPage() {
if (this.activePage < this.noOfPages) {
this.activePage += 1;
if (this.activePage > this.visiblePagesEndRange) {
this.visiblePagesEndRange += this.visiblePages;
this.visiblePagesEndRange = Math.min(
this.visiblePagesEndRange,
this.noOfPages
);
}
}
}
gotoPrevPage() {
if (this.activePage > 1) {
this.activePage -= 1;
if (this.activePage % this.visiblePages === 0) {
this.visiblePagesEndRange = this.activePage;
}
}
}
gotoFirstPage() {
this.activePage = 1;
this.visiblePagesEndRange = this.visiblePages;
}
gotoLastPage() {
this.activePage = this.noOfPages;
this.visiblePagesEndRange = this.noOfPages;
}
gotoPage(page) {
this.activePage = page;
}
getVisiblePagesRange() {
let beginningVisiblePage;
let endingVisiblePage;
// When the visiblepagesendrange % visiblepages is not zero (which means that all the pages cannot be fit in the visible pages range) and if our ending page range is equal to total no pages then the beginning would be equivalent to visble page range - ((visible page range mod visiblepage range) - 1) i.e the leftover pages until the end.
if (
this.visiblePagesEndRange % this.visiblePages !== 0 &&
this.visiblePagesEndRange === this.noOfPages
) {
beginningVisiblePage =
this.visiblePagesEndRange -
((this.visiblePagesEndRange % this.visiblePages) - 1);
}
// else we are always in a place where, current visible page end range - visible page range + 1 will return us the correct beginning position for the page range.
else {
beginningVisiblePage = this.visiblePagesEndRange - this.visiblePages + 1;
}
//Also endingActivePage would be simply equal visiblePagesEndRange.
endingVisiblePage = this.visiblePagesEndRange;
return {
beginningVisiblePage,
endingVisiblePage,
};
}
getActivePageIndices() {
// the beginning page index will be current active page multiplied by no of records.
let beginningPageIndex = (this.activePage - 1) * this.recordsPerPage;
// the ending page index will be minimum of total records and (beginning + records allowed per page);
let endingPageIndex = Math.min(
beginningPageIndex + this.recordsPerPage,
this.totalRecords
);
return { beginningPageIndex, endingPageIndex };
}
}
// All the render and using Paginator class logic comes here
(function () {
function nextPage() {
paginator.gotoNextPage();
render();
}
function prevPage() {
paginator.gotoPrevPage();
render();
}
function lastPage() {
paginator.gotoLastPage();
render();
}
function firstPage() {
paginator.gotoFirstPage();
render();
}
// Delegating event to the parent ul.
function gotoPage(event) {
if (event.target.nodeName === "BUTTON") {
const page = parseInt(event.target.dataset.item);
paginator.gotoPage(page);
render();
}
}
const paginationPages = document.querySelector(".pagination__pages");
paginationPages.addEventListener("click", gotoPage);
// paginator object
// list which is of length 346
// recordsPerPage = 6
// visiblePages = 6
const paginator = new Paginator(movieInfo.length, 20, 6);
// Method to render the pagination buttons;
function renderPages() {
const paginationPages = document.querySelector(".pagination__pages");
let html = "";
let { beginningVisiblePage, endingVisiblePage } =
paginator.getVisiblePagesRange();
for (let page = beginningVisiblePage; page <= endingVisiblePage; page++) {
const pageClass =
paginator.activePage === page
? "pagination__page-btn--active"
: "pagination__page-btn";
html += `<li class='pagination__page'>
<button data-item=${page} class=${pageClass}>${page}</button>
</li>`;
}
paginationPages.innerHTML = html;
}
// Method to render the list items
function renderList() {
// const list = document.querySelector(".list");
const mainContent = document.getElementById("main-content");
const { beginningPageIndex, endingPageIndex } =
paginator.getActivePageIndices();
let html = "";
for (let index = beginningPageIndex; index < endingPageIndex; index++) {
// html += `<li class='list__item'>${records[index]}</li>`;
html = `<div class="container">
<div class="card">
<figure class="card__thumb">
<img src= "${IMG_URL + movieInfo[index].poster_path}"/>
<figcaption class="card__caption">
<h2 class="card__title">${movieInfo[index].name}</h2>
<p class="card__snippet">${movieInfo[index].overview}</p>
Read more
</figcaption>
</figure>
</div>
</div>`;
}
mainContent.innerHTML += html;
}
// Main render function
function render() {
renderPages();
renderList();
}
render();
this.firstPage = firstPage;
this.lastPage = lastPage;
this.nextPage = nextPage;
this.prevPage = prevPage;
this.gotoPage = gotoPage;
})();
Make your IIFE a named function declaration (init() below). And execute that function as a callback for your async Promise resolution.
NOTE: you should surround your call to your async function with a try/catch block.
async function popularMovies() {
//...
return movieInfo;
}
popularMovies().then(init);
// Replace your IIFE with this
function init(movieInfo) {
//...
const paginator = new Paginator(movieInfo.length, 20, 6);
//...
}
I've been writing this little script in order to make a "self writing text" animation. The thing is, everytime a word is finished, it jumps straight up to the next one. I can't work my head around it to make so each letter deletes before passing on the next word in the array.
const text = ['design', 'make', 'develop', 'code', 'create']
let count = 0;
let index = 0;
let currentText = "";
let letter = "";
(function type() {
if (count === text.length) {
count = 0;
}
currentText = text[count];
letter = currentText.slice(0, ++index);
document.querySelector(".main__animation").textContent = letter;
if (letter.length === currentText.length) {
count++
index = 0;
}
setTimeout(type, 500);
}())
Thanks beforehand!
const text = [, 'design', 'make', 'develop', 'code', 'create']
let count = 1;
let index = 0;
let currentText = "";
let letter = "";
var deleting = false;
(function type() {
if (count === text.length) {
count = 1;
}
currentText = text[count];
if (deleting) {
letter = currentText.slice(0, --index);
} else {
letter = currentText.slice(0, ++index);
}
document.querySelector(".main-animation").textContent = letter;
if (letter.length === currentText.length) {
deleting = true;
}
if (letter.length === 0) {
count++;
index = 0;
deleting = false;
}
setTimeout(type, 500);
}())
<div class="main-animation"></div>
This is what I came along. Please let me know if there is any doubt.
function createAnimation(words, target, speed) {
let wordIndex = 0;
let i = 0;
let erase = false;
const handler = () => {
const word = words[wordIndex];
if (erase) {
target.innerText = target.innerText.slice(0, -1);
if (!target.innerText.length) {
wordIndex = (wordIndex + 1) % words.length;
i = 0;
erase = false;
}
} else {
target.innerText += word.charAt(i);
i++;
if (i === word.length) {
erase = true;
}
}
};
let interval = null;
return {
start() {
interval = setInterval(handler, 1000 / speed)
},
stop() {
clearInterval(interval);
}
}
}
const animation = createAnimation(
['design', 'make', 'develop', 'code', 'create'],
document.getElementById('target'),
5 // [letters/s]
);
animation.start();
// TO STOP, CALL animation.stop()
<h1 id='target'></h1>
I am trying to make a game when you have to guess a number that is generated by the Math.random() function in JavaScript. But I realized that when I do that I have to rerun the function if they get the number wrong. Then the number regenerates when it reruns the function. Is there a way that I can make the variable stay until I want to change it. I was going to change it using the const function but I realized it would do the same thing. Here is my full code:
var tries = 5;
var howMany = 0;
var wrong = 0;
var player1 = 0;
var player2 = 0;
var triesmulti = 10;
var turn = 'player 1';
var number;
function start() {
var min = document.getElementById('min').value;
var max = document.getElementById('max').value;
number = Math.floor(Math.random() * (+max - +min)) + +min;
if (tries < 1) {
alert('You \don\'t have any more tries left. The number was \n' + number);
tries = 5;
wrong += 1;
document.getElementById('wrong').innerHTML = 'You have got the number wrong ' + wrong + ' times';
} else {
var guess = prompt();
if (guess == number) {
alert('You got the number right!\n' + number);
howMany += 1;
tries = 5;
document.getElementById('howMany').innerHTML = 'You have guessed the number ' + howMany + ' times';
document.getElementById('tries').innerHTML = 'You have 5 tries left';
} else {
alert('You got the number wrong.');
tries -= 1;
document.getElementById('tries').innerHTML = 'You have ' + tries + ' tries left';
setTimeout(start, 1000);
}
}
}
function multiplayer() {
var min = document.getElementById('minm').value;
var max = document.getElementById('maxm').value;
number = Math.floor(Math.random() * (+max - +min)) + +min;
if (triesmulti < 1) {
alert('You \don\'t have any more tries left\n' + number);
triesmulti = 10;
document.getElementById('triesmulti').innerHTML = 'You have 5 tries for each player';
} else {
var guess = prompt(turn);
if (turn == 'player 1') {
if (guess == number) {
alert('You got the number right!\n' + number);
player1 += 1;
triesmulti = 10;
document.getElementById('triesmulti').innerHTML = 'You have 5 tries for each player';
} else {
alert('You got the number wrong!');
turn = 'player 2';
setTimeout(multiplayer, 1000);
}
} else if (turn == 'player 2') {
if (guess == number) {
alert('You got the number right!\n' + number);
player2 += 1;
triesmulti = 10;
document.getElementById('triesmulti').innerHTML = 'You have 5 tries for each player';
} else {
alert('You got the number wrong!');
turn = 'player1';
setTimeout(multiplayer, 1000);
}
}
}
}
If you see there, in the setTimeout() it reruns the function.
You can create a stateful random number generator quite easily with an object or closure:
const rndRng = (lo, hi) => ~~(Math.random() * (hi - lo) + lo);
const intRng = (lo, hi) => {
let n = rndRng(lo, hi);
return {
next: () => (n = rndRng(lo, hi)),
get: () => n
};
};
const rng = intRng(10, 20);
console.log(rng.get());
console.log(rng.get());
rng.next();
console.log(rng.get());
console.log(rng.get());
But having to do this shouldn't really be necessary for your application. Currently, the application uses non-idempotent functions that rely on global state, repeated/duplicate logic and deeply nested conditionals, so it's become too encumbered to easily work with.
I'd start by storing state in an object. A game like this can be modeled well by a finite state machine.
The below code is a naive implementation of this with plenty of room for improvement, but hopefully demonstrates the idea. It works for any number of players and it's fairly easy to add features to.
However, string messages are baked into business logic so the class is overburdened. A good next step would be creating a separate view class to abstract business logic from display. However, although the message strings are baked into the game logic, the DOM is decoupled. This makes it fairly easy for the caller to use the class in other UIs such as substituting the DOM for alert/prompt.
The below solution is far from the only way to approach this design problem.
class GuessingGame {
constructor(players=1, guesses=5, lo=0, hi=10) {
this.players = Array(players).fill().map(() => ({
guesses: guesses, score: 0
}));
this.guesses = guesses;
this.lowerBound = lo;
this.upperBound = hi;
this.state = this.initialize;
}
initialize() {
const {lowerBound: lo, upperBound: hi} = this;
this.players = this.players.map(({score}) => ({
guesses: this.guesses,
score: score
}));
this.target = ~~(Math.random() * (hi - lo) + lo);
this.currentPlayer = ~~(Math.random() * this.players.length);
this.state = this.guess;
this.message = `guess a number between ${lo} and ${hi - 1} ` +
`(inclusive), player ${this.currentPlayer}:`;
}
handleCorrectGuess() {
this.state = this.initialize;
this.players[this.currentPlayer].score++;
this.message = `player ${this.currentPlayer} guessed ` +
`${this.target} correctly! press 'enter' to continue.`;
}
handleNoGuessesLeft(guess) {
this.state = this.initialize;
this.players[this.currentPlayer].score--;
this.flash = `${guess} was not the number, player ` +
`${this.currentPlayer}.`;
this.message = `player ${this.currentPlayer} ran out of ` +
`guesses. the secret number was ${this.target}. press ` +
`'enter' to continue.`;
}
handleIncorrectGuess(guess) {
this.flash = `${guess} was not the number, player ` +
`${this.currentPlayer}.`;
this.currentPlayer = (this.currentPlayer + 1) % this.players.length;
const {lowerBound: lo, upperBound: hi} = this;
this.message = `guess a number between ${lo} and ${hi - 1} ` +
`(inclusive), player ${this.currentPlayer}:`;
}
guess(guess) {
if (String(+guess) !== String(guess)) {
this.flash = `sorry, ${guess || "that"} ` +
`isn't a valid number. try something else.`;
return;
}
if (this.target === +guess) {
this.handleCorrectGuess();
}
else if (!--this.players[this.currentPlayer].guesses) {
this.handleNoGuessesLeft(+guess);
}
else {
this.handleIncorrectGuess(+guess);
}
}
nextState(...args) {
this.flash = "";
return this.state(...args);
}
scoreBoard() {
return game.players.map((e, i) =>
`player ${i}: {score: ${e.score}, guesses remaining: ` +
`${e.guesses}} ${game.currentPlayer === i ? "<--" : ""}`
).join("\n");
}
}
const msgElem = document.getElementById("message");
const responseElem = document.getElementById("response");
const scoresElem = document.getElementById("scoreboard");
const game = new GuessingGame(3);
game.nextState();
msgElem.innerText = game.message;
scoresElem.innerText = game.scoreBoard();
let timeout;
responseElem.addEventListener("keydown", e => {
if (timeout || e.code !== "Enter") {
return;
}
game.nextState(e.target.value);
e.target.value = "";
e.target.disabled = true;
msgElem.innerText = game.flash;
clearTimeout(timeout);
timeout = setTimeout(() => {
msgElem.innerText = game.message;
scoresElem.innerText = game.scoreBoard();
timeout = null;
e.target.disabled = false;
e.target.focus();
}, game.flash ? 1300 : 0);
});
* {
background: white;
font-family: monospace;
font-size: 1.03em;
}
input {
margin-bottom: 1em;
margin-top: 1em;
}
<div id="message"></div>
<input id="response">
<div id="scoreboard"></div>
Well, your code is not organised, have lot of duplicates, you could devide it into functions anyway, you can add a boolean variable to check against when you should change the number, I don't know about your HTML code or css but I just added those elements according to you selectors, you can change the multiplayer function too.
var tries = 5;
var howMany = 0;
var wrong = 0;
var player1 = 0;
var player2 = 0;
var triesmulti = 10;
var turn = 'player 1';
var number;
var isAlreadyPlaying = false;
function start() {
var min = document.getElementById('min').value;
var max = document.getElementById('max').value;
if(!isAlreadyPlaying) {
isAlreadyPlaying = true;
number = Math.floor(Math.random() * (+max - +min)) + +min;
}
if (tries < 1) {
alert('You \don\'t have any more tries left. The number was \n' + number);
tries = 5;
wrong += 1;
document.getElementById('wrong').innerHTML = 'You have got the number wrong ' + wrong + ' times';
isAlreadyPlaying = false;
} else {
var guess = prompt();
if (guess == number) {
alert('You got the number right!\n' + number);
howMany += 1;
tries = 5;
document.getElementById('howMany').innerHTML = 'You have guessed the number ' + howMany + ' times';
document.getElementById('tries').innerHTML = 'You have 5 tries left';
isAlreadyPlaying = false;
} else {
alert('You got the number wrong.');
tries -= 1;
document.getElementById('tries').innerHTML = 'You have ' + tries + ' tries left';
setTimeout(start, 1000);
}
}
}
Min <input type="number" id="min" value="1"><br>
Max<input type="number" id="max" value="10"><br>
<button onclick="start()">Play</button>
<p id="wrong"></p>
<p id="howMany"></p>
<p id="tries"></p>