js увеличение отступа left от текущего значения
146
19 ноября 2020, 01:20
Я новичек в 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>фотошопе делать.
Ответ желательно попроще, так как я хочу написать игру, в которой я всё понимаю.
Answer 1
Сам решил проблему, сделал пременную left, в моём случае она равна 70, потом при каждой покупке карточки применял к количеству этих карточек стиль left, равный переменной left, затем чтобы отступ слева был больше просто увеличивал left, в моём случае left+=140
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47907 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30567 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23895 visits
- Как через css изменить цвет png изображения? 10398 visits
- Blob video url download 10004 visits
- Php curl запрос через прокси с авторизацией 9276 visits
- Работа с captcha vk api 8147 visits
READ ALSO
© "hostciti.net" 24.3.2025 | 18:00