Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Game&?</title>
	<style>
        .hp {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNhmf861_yJOYdDYq0ISmYto51k2YBj5ELFDkqRrpR85oZyxba) center center ;
            background-size: 100% 100%;
        }
        #hp_block_wrapper {
            text-align: left;
            width: 60%;
            margin: 20px auto;
        }
        .container {
            margin: 0 auto;
            text-align: center;
        }
        button {
            height: 50px;
            width: 100px;
            margin: 10px;
        }
        .replay_button {
        	height: 200px;
            width: 400px;
            border-radius: 20px;
            background-color: #A9A9A9;
        }
        h1 {
        	color: #008B8B;
        }
    </style>
</head>
<body>
	<div id = "ghthtghtgh__BR">
	<br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br>
	<br><div class = "container ">ЗАГРУЗКА</div><br>
	<div class = "container "> ( НЕТ) </div><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br>
    <br>     <br>     <br>     <br>     <br>    <br>
	</div>
	<div class = "container" id = "replay">
		<br>
		<br>
		<br>
		<br>
		<br>
		<button class = "replay_button" id = "replay_button" onclick = "replay()">
			<h1>НАЧАТЬ ЗАНОВО</h1>
		</button>
	</div>
	<div id = "body">
	<canvas id = "myCanvas" width = "1000" height = "1" style = "border:2px solid green;display:block;margin: 0 auto;
            text-align: center;">
    </canvas>
    <div class = "contaner" ><div id = "hp_block_wrapper">
        <div class = "hp" id = "hp1"></div>
        <div class = "hp" id = "hp2"></div>
        <div class = "hp" id = "hp3"></div>

    </div></div>
    <div class = "container">
        <h1 id = "task">0 + 0 = ?</h1>
        <button id = "answer1">0</button>
        <button id = "answer2">0</button>
        <button id = "answer3">0</button>
        <button id = "answer4">0</button>
    </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
	</script>
    <script type = "text/javascript">
$("#replay").hide();
let vvdcs = 1, operation, value, a, b, min, max, w, x, y, true_answer_location, J, z, c, d = 3, score = -1;
let hps = document.getElementById("hp_block_wrapper");
let body = document.getElementById("body");
let time_interv, ghgj, time;


function operation_generation() {
	operation = Math.round(Math.random() * (4-1) + 1);
	switch (operation) {
		case 1:
			task.innerHTML = a + " + " + b;
			value = a + b;
			break;
		case 2:
			task.innerHTML = a + " - " + b;
			value = a - b;
			break;
		case 3:
			value = a * b;
			break;
		case 4:
			task.innerHTML = a + " : " + b;
			value = a / b;
			break;
		}

	if (value == a - b) {
		a = Math.round(Math.random() * (90-2) + 2);
		if (a > 10) {
			c = a - 5;
		} else {
			c = a
		}
		b = Math.round(Math.random() * (c-2) + 2);
		task.innerHTML = a + " - " + b;
		value = a - b;
	}

	if (value == a * b) {
		a = Math.round(Math.random() * (11-2) + 2);
		b = Math.round(Math.random() * (11-2) + 2);
		task.innerHTML = a + " × " + b;
		value = a * b;
	}

	if (value == a / b) {
		a = Math.round(Math.random() * (100-8) + 8);
		b = Math.round(Math.random() * (10-4) + 4);
		for (i = 0; i < 1; i--) {
			if (Math.round(a / b) == a / b) {
				i = 2;
				task.innerHTML = a + " : " + b;
				value = a / b;
			}
			else a = a + 1
		}
	}
}


function task_generation() {
 	a = Math.round(Math.random() * (50-1) + 1);
 	b = Math.round(Math.random() * (50-1) + 1);
}


function false_answers() {
	min = value - 3;
	max = value + 3;

	no_name();
	function no_name() {
		w = Math.round(Math.random() * (max-min) + min);
		x = Math.round(Math.random() * (max-min) + min);
		y = Math.round(Math.random() * (max-min) + min);
		z = Math.round(Math.random() * (max-min) + min);
		if (w==x||w==y||w==z||x==y||x==z||y==z||w==value||x==value||y==value||z==value) {
			no_name()
		}
			else {
				answer1.innerHTML = w;
				answer2.innerHTML = x;
				answer3.innerHTML = y;
				answer4.innerHTML = z;
				answer1.onclick = function() {next_task(-1);}
				answer2.onclick = function() {next_task(-1);}
				answer3.onclick = function() {next_task(-1);}
				answer4.onclick = function() {next_task(-1);}
			}

	}

}


function true_answer() {
	true_answer_location =  Math.round(Math.random() * (4 - 1) + 1);
	switch (true_answer_location) {
		case 1:
			answer1.innerHTML = value;
			answer1.onclick = function() {next_task(0);}
			break;
		case 2:
			answer2.innerHTML = value;
			answer2.onclick = function() {next_task(0);}
			break;
		case 3:
			answer3.innerHTML = value;
			answer3.onclick = function() {next_task(0);}
			break;
		case 4:
			answer4.innerHTML = value;
			answer4.onclick = function() {next_task(0);}
			break;
		}
}


function next_task(minus_hp) {
	$("#replay").hide();

	time = 1000;

	score = score + minus_hp + 1;
	d = d + minus_hp;

	if (d == 3) {
		vvdcs = 1;
		times();
	}
	if (d == 2) {
		vvdcs = 1;
		$("#hp3").hide();
		times();
	}
	if (d == 1) {
		vvdcs = 1;
		$("#hp2").hide();
		times();
	}
	if (d == 0) {
		vvdcs = 1;
		$("#hp1").hide();
		let h = document.createElement("br");
		let hh = document.createElement("br");
		$('#hp_block_wrapper').append(h);
		$('#hp_block_wrapper').append(hh);
	}
	if (d < 1) {
		if (score == 0) {
			J = "ов"
		}
		if (score == 1) {
			J = ""
		}
		else if (1 < score) {
			if (score < 5) {
			J = "а"
			} else if (score > 4) {J = "ов"}
		}
		setTimeout(function() {
		 	alert(" Вы решили " + score + " пример" + J);
		 	$("br").remove()
		 	$("#body").hide();
		 	$("#replay").show();
		 },80);

	}

	task_generation();
	operation_generation();
	false_answers();
	true_answer();
}

function replay() {
	$("#body").show();
	score = -1;
	d = 3;
	$("#hp1").show();
	$("#hp2").show();
	$("#hp3").show();
	next_task(0);
	times();


}

function times() {
	if (vvdcs != 1) {
	time = time - 10;
	myCanvas.setAttribute('width', time);
	let ghgj = setTimeout(function() {
		if (time < 11) {
			next_task(-1);
			times();
		} else times();
	}, 40) } else {vvdcs = 0; }
}

setTimeout(function() {
	$("#ghthtghtgh__BR").hide();
	next_task(0);
	times();
},800)
	</script>
    </body>
</html>