0

Я новичек в js Недавно купил настольную игру, она мне понравилась, и в качестве практики js решил написать её на компе. есть поле с карточками, при нажатии на которые они добавляются к игроку, если нажать еще раз, то цифра над карточкой увеличится, но если покупать две разные карточки, то цифры над ними не над ними))) над первой карточкой сразу две цифры. Как можно сделать, чтобы независимо от порядка покупки карточек цифры над ними не сползали с них?

сори за то, что вставил в код всё подряд)) и картинок нет)))в интернете таких не было, пришлось их самому в

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>MACHICORO</title>
	<style>
		*{
			float: left;
			padding: 0;
			margin: 0;
			font-family: comic sans ms;
		}
		html{
			height: 100%;
		}
		body{
			height: 100%;
		}
		.gamer{
			width: 1800px;
			background: red;
			height: 210px;
			overflow-x: scroll;
			position: relative;
			display: inline;
			background: URL(images/лого.png);
			background-size: cover;
		}
		#pole{
			height: 740px;
			width: 1800px;
			/*Вообще не знал об этом значении, решил попробовать т.к. ничего не получалось!*/
			float: initial;
			display: inline;
			background-image: URL(images/machi-koro-759x500.jpg);
			overflow: scroll;
		}
		#menu{
			/*float: left;*/
			width: 75px;
			height: 100vh;
			background-image: URL(images/machi-koro-759x500.jpg);
			display: inline;
		}
		.img{
			height: 247px;
			width: 180px;
			display: inline;
			/*overflow: hidden;*/
			/*position: fixed;*/
			z-index: 5;
			-webkit-transition: -webkit-transform .5s;
    		transition: transform .5s;
		}
		.img #pole{
			height: 230px;
		}
		.box{
			width: 1800px;
			height: 500px;
			overflow: visible;
		}
		.img:hover{
			-webkit-transform: scale(1.3, 1.3);
    		transform: scale(1.3, 1.3);
		}
		.gamer .img{
			height: 210px;
			width: auto;
		}
		.imgbtn{
			width: 64px;
			height: auto;
		}
		#relative{
			position: relative;
		}
		#btnhod{
			height: 420px;
			width: 75px;
			background: url(images/machi-koro-759x500.jpg);
		}
		#font{
			font-size: 70px;
			font-family: comic sans ms;
		}
		.z-index{
			z-index: 7;
			position: relative;
			right: 75px;
		}
		#shopCol-vo2 , #shopCol-vo1, #forestCol-vo2, #forestCol-vo1{
			position: relative;
			left: 70px;
			/*margin-left: 70px;*/
		}


		@media screen and (max-width: 500px){
			#pole{
				height: 37vh;
    			float: right;
    			width: 340px;
    			display: inline;
    			overflow: scroll;
			}
			.gamer{
				width: 339px;
				float: right;
				height: 200px;
				background-image: url(images/Machi-Koro-Website.png);
				overflow: scroll;
			}
			#menu{
				height: 100vh;
				width: 20px;
				display: inline;
			}
			.img{
				height: 250px;
				width: auto;
				overflow: visible;
				position: inline;
			}
			.gamer .img{
				height: 200px;
				width: auto;
			}
			.img:hover{
				-webkit-transform: scale(1.2, 1.2);
    			transform: scale(1.2, 1.2);
			}	
			.imgbtn{
				width: 16px;
			}	
			#font{
				font-size: 15px;
				font-family: comic sans ms;
			}
			#btnhod{
				width: 40px;
			}
			#relative{
				bottom: 60px;
			}
	</style>
</head>
<body>
	<div id="menu">
		<div id="game1">
			<h5>Игрок 1</h5>
			<button onclick="cube1x1()" id="gg1" disabled><span class="cube1">1кубик</span>
				<img class="imgbtn" src="http://s1.iconbird.com/ico/1012/human02/w128h1281349049040gnometali.png" alt="">
			</button>
			<button onclick="cube1x2()" id="g1" disabled><span class="cube1">2кубик</span>
				<img class="imgbtn" src="https://наклейкибум.рф/wp-content/uploads/2017/05/5180_0-450x450.svg_.png" alt="">
			</button>	




			<div>
				<span id="money1">3</span>
				<img class="imgbtn" src="images/монета.png" alt="">
			</div>

			<button onclick="hod()" id="btnhod"><span id="font">X <br> O <br> Д</span></button>

			<span id="relative">
				<div>
					<span id="money2">3</span>
					<img class="imgbtn" src="images/монета.png" alt="">
				</div>
				<button onclick="cube2x2()" id="gg2" disabled><span class="cube1">2кубик</span>
					<img class="imgbtn" src="https://наклейкибум.рф/wp-content/uploads/2017/05/5180_0-450x450.svg_.png" alt="">
				</button>	
				<button onclick="cube2x1()" id="g2" disabled><span class="cube1">1кубик</span>
					<img class="imgbtn" src="http://s1.iconbird.com/ico/1012/human02/w128h1281349049040gnometali.png" alt="">
				</button>
				<h5>Игрок 2</h5>
			</span>
		</div>
	</div>


<!-- Поле первого игрока -->
	<div  class="gamer" id="gamer1">
		<img class="img" src="images/ПЕКАРНЯ.png" alt=""><div class="z-index" id="pecarCol-vo1"></div>
		<img class="img" src="images/ПШЕНИЧНОЕ ПОЛЕ.png" alt=""><div class="z-index" id="poleCol-vo1"></div>
		<div class="z-index" id="shopCol-vo1"></div>
		<div class="z-index" id="forestCol-vo1"></div>

	</div>
	<hr>

<!-- Магазин карточек -->
	<div id="pole">
		<div class="box">
			<img onclick="pecarBuy()" class="img" src="images/ПЕКАРНЯ.png" alt="">
			<img onclick="poleBuy()" class="img" src="images/ПШЕНИЧНОЕ ПОЛЕ.png" alt="">
			<img onclick="shopBuy()" class="img" src="images/МАГАЗИН.png" alt="">
			<img onclick="forestBuy()" class="img" src="images/ЛЕС.png" alt="">
			<img class="img" src="images/ПЕКАРНЯ.png" alt="">
			<img class="img" src="images/ПЕКАРНЯ.png" alt="">
			<img class="img" src="images/ПЕКАРНЯ.png" alt="">
			<img class="img" src="images/ПЕКАРНЯ.png" alt="">
			<img class="img" src="images/ПЕКАРНЯ.png" alt="">
			<img class="img" src="images/ПЕКАРНЯ.png" alt="">
			<img class="img" src="images/ПЕКАРНЯ.png" alt="">
			<img class="img" src="images/ПЕКАРНЯ.png" alt="">
		</div>
	</div>


<!-- Поле второго игрока -->
	<hr>
	<div class="gamer" id="gamer2">
		<img class="img" src="images/ПЕКАРНЯ.png" alt=""><div class="z-index" id="pecarCol-vo2"></div>
		<img class="img" src="images/ПШЕНИЧНОЕ ПОЛЕ.png" alt=""><div class="z-index" id="poleCol-vo2"></div>
		<div class="z-index" id="shopCol-vo2"></div>
		<div class="z-index" id="forestCol-vo2"></div>
	</div>

	<script>
		var g1 = document.getElementById('g1').disabled = true;
		var g2 = document.getElementById('g2').disabled = false;

// Кол-во денег
		var money1 = 3;
		var money2 = 3;
// Место для выведения кол-ва денег
		var moneygame1 = document.getElementById('money1');
		var moneygame2 = document.getElementById('money2');


		// Активация/деактивация кнопок при смене хода
		function hod(){

    		if (g1 == true){
    			document.getElementById('g2').disabled = true;
				document.getElementById('gg2').disabled = true;
				document.getElementById('g1').disabled = false;
		    	document.getElementById('gg1').disabled = false;
		    	g1 = document.getElementById('g1').disabled = false;
				g2 = document.getElementById('g2').disabled = true;
    		}
    		else{
    			document.getElementById('g2').disabled = false;
				document.getElementById('gg2').disabled = false;
				document.getElementById('g1').disabled = true;
				document.getElementById('gg1').disabled = true;
				g1 = document.getElementById('g1').disabled = true;
				g2 = document.getElementById('g2').disabled = false;
   		    }
			// document.getElementById('g2').disabled = true;
			// document.getElementById('gg2').disabled = true;
			// document.getElementById('g1').disabled = false;
			// document.getElementById('gg1').disabled = false;
		}

// проверка наличия карточек у игроков при выпадении на кубике чисел
		function cube1x1(){
			var num1 = Math.floor(Math.random() * 6) + 1;
			alert(num1);
			// пекарня доход
				if(num1 == 2){
					money1 = money1 + pecar1;
					moneygame1.innerHTML = money1;
				}
				else if(num1 == 3){
					money1 = money1 + pecar1;
					moneygame1.innerHTML = money1;
				}
			// пшеничное поле доход
				if(num1 == 1){
					money1 = money1 + ppole1;
					money2 = money2 + ppole2;
					moneygame1.innerHTML = money1;
					moneygame2.innerHTML = money2;
				}
				// Магазин
				if(num1 == 4){
					money1 = money1 + shop1;
					moneygame1.innerHTML = money1;
				}
				// лес
				if(num1 == 5){
					money1 = money1 + forest2;
					money2 = money2 + forest2;
					moneygame1.innerHTML = money1;
					moneygame2.innerHTML = money2;
				}

		}
		function cube1x2(){
			var num1 = Math.floor(Math.random() * 12) + 2;
			alert(num1);
			// пекарня доход
				if(num1 == 2){
					money1 = money1 + pecar1;
					moneygame1.innerHTML = money1;
				}
				else if(num1 == 3){
					money1 = money1 + pecar1;
					moneygame1.innerHTML = money1;
				}
				// Магазин
				if(num1 == 4){
					money1 = money1 + shop1;
					moneygame1.innerHTML = money1;
				}
				// Лес
				if(num1 == 5){
					money1 = money1 + forest2;
					money2 = money2 + forest2;
					moneygame1.innerHTML = money1;
					moneygame2.innerHTML = money2;
				}
		}
			
		function cube2x1(){
			var num2 = Math.floor(Math.random() * 6) + 1;
			alert(num2);
			// пекарня доход
				if(num2 == 2){
					money2 = money2 + pecar2;
					moneygame2.innerHTML = money2;
				}
				else if(num2 == 3){
					money2 = money2 + pecar2;
					moneygame2.innerHTML = money2;
				}
				// пшеничное поле доход
				if(num2 == 1){
					money1 = money1 + ppole1;
					money2 = money2 + ppole2;
					moneygame1.innerHTML = money1;
					moneygame2.innerHTML = money2;
				}
				// Магазин
				if(num2 == 4){
					money2 = money2 + shop2;
					moneygame2.innerHTML = money2;
				}
				// Лес
				if(num2 == 5){
					money1 = money1 + forest2;
					money2 = money2 + forest2;
					moneygame1.innerHTML = money1;
					moneygame2.innerHTML = money2;
				}
		}
		function cube2x2(){
			var num2 = Math.floor(Math.random() * 12) + 2;
			alert(num2);
			// пекарня доход
			if(num2 == 2){
				money2++;
				moneygame2.innerHTML = money2;
			}
			else if(num2 == 3){
				money2++;
				moneygame2.innerHTML = money2;
			}
			// Магазин
			if(num2 == 4){
				money2 = money2 + shop2;
				moneygame2.innerHTML = money2;
			}
			// Лес
			if(num2 == 5){
				money1 = money1 + forest2;
				money2 = money2 + forest2;
				moneygame1.innerHTML = money1;
				moneygame2.innerHTML = money2;
			}
		}

					// Покупка пекарни

		var pecar1 = 1;
		var pecar2 = 1;

		function pecarBuy(){
			if(g2 == false){
				if(money2 >= 1){
					money2--;
					pecar2++
					alert('Игрок 2 приобрел пекарню');
					moneygame2.innerHTML = money2;
					// кол-во шт.

					document.querySelector('#pecarCol-vo2').innerHTML = pecar2;
				}
			}
			else//(g1 == false)
			{
				if(money1 >= 1){
					money1--;
					pecar1++
					alert('Игрок 1 приобрел пекарню');
					moneygame1.innerHTML = money1;
					// кол-во шт.
					document.querySelector('#pecarCol-vo1').innerHTML = pecar1;
				}
			}
		}

		// покупка поля
		var ppole1 = 1;
		var ppole2 = 1;

		function poleBuy(){
			if(g2 == false){
				if(money2 >= 1){
					money2--;
					ppole2++;
					alert('Игрок 2 приобрел пшеничное поле');
					moneygame2.innerHTML = money2;
					// кол-во шт.					
					document.querySelector('#poleCol-vo2').innerHTML = ppole2;
				}
			}
			else if(g1 == false){
				if(money1 >= 1){
					money1--;
					ppole1++;
					alert('Игрок 1 приобрел пшеничное поле');
					moneygame1.innerHTML = money1;
					// кол-во шт.					
					document.querySelector('#poleCol-vo1').innerHTML = ppole1;
				}
			}
		}

		// Покупка магазина
		var shop1 = 0;
		var shop2 = 0;
		function shopBuy(){
			if(g2 == false){
				if(money2 >= 2){
					money2 = money2 - 2;
					shop2 = shop2 + 3;
					alert('Игрок 2 приобрел магазин');
					moneygame2.innerHTML = money2;
					// кол-во шт.
					document.querySelector('#shopCol-vo2').innerHTML = shop2/3;
					// вставить карточку
					if(shop2 <= 3){	
						document.querySelector('#gamer2').innerHTML += '<img class="img" src="images/МАГАЗИН.png" alt="">';
					}
				}
			}
			else if(g1 == false){
				if(money1 >= 2){
					money1 = money1 - 2;
					shop1 = shop1 + 3;
					alert('Игрок 1 приобрел магазин');
					moneygame1.innerHTML = money1;
					// кол-во шт.
					document.querySelector('#shopCol-vo1').innerHTML = shop1/3;
					// вставить карточку
					if(shop1 <= 3){
						document.querySelector('#gamer1').innerHTML += '<img class="img" src="images/МАГАЗИН.png" alt="">';
					}
				}
			}
		}
		// покупка леса(заповедника)
		var forest2 = 0;
		var forest1 = 0;
		function forestBuy(){
			if(g2 == false){
				if(money2 >= 3){
					money2 = money2 - 3;
					forest2 = forest2 + 1;
					alert('Игрок 2 приобрел лес(заповедник)');
					moneygame2.innerHTML = money2;
					// кол-во шт.
					document.querySelector('#forestCol-vo2').innerHTML = forest2;
					// вставить картинку
					if(forest2 <= 1){
						document.querySelector('#gamer2').innerHTML += '<img class="img" src="images/ЛЕС.png" alt="">';
					}
				}
			}
			else if(g1 == false){
				if(money1 >= 2){
					money1 = money1 - 3;
					forest1 = forest1 + 1;
					alert('Игрок 1 приобрел лес(заповедник)');
					moneygame1.innerHTML = money1;
					// кол-во шт.
					
					document.querySelector('#forestCol-vo1').innerHTML = forest1;
					// вставить картинку
					if(forest1 <= 1){
						document.querySelector('#gamer1').innerHTML += '<img class="img" src="images/ЛЕС.png" alt="">';
					}
				}
			}
		}



		// Количество карточек вначале
		document.querySelector('#pecarCol-vo2').innerHTML = pecar2;
		document.querySelector('#pecarCol-vo1').innerHTML = pecar1;
		document.querySelector('#poleCol-vo2').innerHTML = ppole2;
		document.querySelector('#poleCol-vo1').innerHTML = ppole1;

	</script>
</body>
</html>

фотошопе делать.

Ответ желательно попроще, так как я хочу написать игру, в которой я всё понимаю.

2

1 ответ 1

0

Сам решил проблему, сделал пременную left, в моём случае она равна 70, потом при каждой покупке карточки применял к количеству этих карточек стиль left, равный переменной left, затем чтобы отступ слева был больше просто увеличивал left, в моём случае left+=140

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.