Игра на javascript. если ли способ вставить переменную в css? чтобы блоки на css и js скользили по линиям

215
12 марта 2022, 06:30

Делаю игрушку на js возникла проблема. Блоки на css и они должны чередоваться, вопрос как поставить переменную в стиль чтобы генерировать блоки и с помощью функции setinterval проводить их по одной линии. Подскажите кто нибудь как сделать блоки для препятствий уникальными чтобы они не мигали и в css стиле прокатывали по линии с уникальным id или может есть еще какое нибудь решение на javascript? https://amir248.github.io/cockerel/ Всем заранее Большое спасибо! И как в сбербанке больше чем спасибо!

<html>
<meta charset="utf-8">
<title>Game cockerel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
padding: 0;
margin: 0;
}
#line {
width: 100%;
height: 100%;
display: flex;
}
#line1 {
width: 25%;
height: 100%;
background-color: rgb(201, 230, 185);
flex-flow: row;
}
#line2 {
width: 25%;
height: 100%;
background-color: rgb(201, 230, 185);
}
#line3 {
width: 25%;
height: 100%;
background-color: rgb(201, 230, 185);
flex-flow: row;
}
#line4 {
width: 25%;
height: 100%;
background-color: rgb(201, 230, 185);
}
#line5 {
width: 25%;
height: 100%;
background-color: rgb(201, 230, 185);
flex-flow: row;
}
#line6 {
width: 25%;
height: 100%;
background-color: rgb(201, 230, 185);
}
.pic_push_down {
display: block;
position: relative;
max-width: 100%;
max-height: 100%;
margin-left: 25%;
margin-Right: 50%;
top: 77%;
}
#side {
background-color: azure;
width: 70%;
}
button {
background-color: red;
border: 10px;
width: 50px;
height: 75px;
}
.info {
display: block;
position: absolute;
text-align: center;
margin-left: 50%;
margin-right: 50%;
top: 5%;
}
.hedge_stone1, .hedge_stone6, .hedge_stone2, .hedge_stone3, .hedge_stone4, .hedge_stone5 {
position: absolute;
margin-left: 5px;
width: 50px;
height: 50px;
top: -50px;     
background-color: brown;
}
</style>
<body>
<div id="line">
<div id="line1">
<p class="pic_push_down" id='pic1'></p>
<p class="hedge_stone1"></p>
</div>
<div id="line2">
<p class="pic_push_down line2" id='pic2'></p>
<p class="hedge_stone2"></p>
</div>
<div id="line3">
<p class="pic_push_down" id='pic3'></p>
<p class='hedge_stone3'></p>
</div>
<div id="line4">
<p class="pic_push_down" id='pic4'></p>
<p class='hedge_stone4'></p>
</div>
<div id="line5">
<p class="pic_push_down" id='pic5'></p>
<p class='hedge_stone5'></p>
</div>
<div id="line6">
<p class="pic_push_down" id='pic6'></p>
<p class="hedge_stone6"></p>
</div>
<div id="side">
<div align="center">
<br>
<button onClick="left_button()">
<=</button> <button onClick="right_button()">=>
</button>
<br>
</div>
</div>
</div>
<div class="info">тут инфо</div>
<style>
.alert {
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c763d;
background-color: #dff0d8;
}
</style>
<script>
/* еще не понятно для чего это но может пригодиться. */
let div = document.createElement('div');
div.className = "alert";
div.innerHTML = "<strong>Всем привет!</strong> Вы прочитали важное сообщение.";
document.body.append(div);
</script>
<script>
/* нужно создать цсс стиль чтобы динамически генирировать новые блоки */
/*let style = document.createElement('rande_hedge_stone');
style.type= 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);
document.getElementById('someElementId').className = 'cssClass';*/
/* ----------------------------------------
Большой скрипт с препятствиями и временем
-------------------------------------------*/
for(y = 0; y <25; y++); // для будущего переменная в начале док
setInterval(randomBlock, 1000);
function randomBlock(){
/* if(stone.style.display = "none"){
stone.style.diplay = 'block';
} */ // это условие тут не работает но суть ясна! Его надо сделать.
let rand7 = Math.random().toFixed(1);
let number;
if(rand7<=0.2){
number = 6;
}else if(rand7>=0.2&&rand7<=0.3){
number = 5;
}else if(rand7>=0.4&&rand7<=0.5){
number = 4;
}else if(rand7>0.5&&rand7<=0.6){
number = 3;
}else if(rand7>0.6&&rand7<=0.8){
number = 2;
}else if(rand7>0.8){
number = 1;
}else{
console.log('что то пошло не так.');
}
console.log(rand7);
console.log(number);
let stone = document.querySelector('.hedge_stone'+[number]);
let distance_window = document.documentElement.clientHeight;/*Тут была какаето задумка, но сейчас это пустует.*/
let distance_stone =0;
function peremeshenie() {
stone.style.top = distance_stone;
if (distance_stone < window.innerHeight -50) { /* innerWidth - окно экрана в высоту*/
distance_stone = distance_stone + 1;
}
if(distance_stone>window.innerHeight-51){
stone.style.display ='none';
} 
}
setInterval(peremeshenie, 20); 
} 
// -----------------------------------
//-----переменные для управления-----
//-----------------------------------
var rightPressed = false;
var leftPressed = false;
var jumpPressed = false;
var upPressed = false;
var downPressed = false;
// ------------------------------------
/* скрипт тут ля управления перемещениями с клавиатура */
document.addEventListener('keydown', keyDownHangler, false);
function keyDownHangler(e) {
if (e.key == "f") {
right_button();
} else if (e.key == "s") {
left_button();
} else {
return;
}
}
if (keyDown = 'KeyF') {
right_button();
}
if (right_button) {
left_button();
}
document.onkeypress = function (event) {
console.log(event);
}
var i = 3;
var pic = document.getElementById('pic' + i).innerHTML = '<img id="cockerel.png" src="https://i.ibb.co/Gnk5Ln3/cockerel.png" alt="cockerel" border="0" width="50px">';
function left_button() {
if (i > 1) {
i = i - 1;
document.querySelector('#pic' + i).innerHTML = '<img id="cockerel.png" src="https://i.ibb.co/Gnk5Ln3/cockerel.png" alt="cockerel" border="0" width="50px">';
document.querySelector('#pic' + (i + 1)).innerHTML = ' ';
console.log(i);
} else if (i <= 1) {
return;
}
}
function right_button() {
if (i < 6) {
i++;
document.querySelector('#pic' + i).innerHTML = '<img id="cockerel.png" src="https://i.ibb.co/Gnk5Ln3/cockerel.png" alt="cockerel" border="0" width="50px">';
document.querySelector('#pic' + (i - 1)).innerHTML = '';
console.log(i);
}
else if (i >= 6) {
return;
}
}
</script>>
</body>
</html>
Answer 1

У вас сейчас происходит мигание, поскольку вы не создаете новый элемент, а берете старый и вешаете на него еще один таймер перемещения с другими координатами. Вот и выходит, что два таймера пытаются одновременно поставить блок в разные места, что порождает мигание. В принципе, достаточно было бы создать новый блок внутри randomBlock() и проблема бы исчезла.

Ну или лучше просто переделать так, чтобы блоки нормально создавались и не зависели от стилей.

<html>
<meta charset="utf-8">
<title>Game cockerel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .flex {
        width: 100%;
        height: 100%;
        display: flex;
    }
    .row {
        width: 25%;
        height: 100%;
        background-color: rgb(201, 230, 185);
        flex-flow: row;
    }
    .hedge_stone {
        position: absolute;
        margin-left: 5px;
        width: 50px;
        height: 50px;
        top: -50px;
        background-color: brown;
    }
</style>
<body>
    <div class="flex">
        <div class="row"> </div>
        <div class="row"> </div>
        <div class="row"> </div>
        <div class="row"> </div>
        <div class="row"> </div>
        <div class="row"> </div>
    </div>
    <script>
        let interval = setInterval(() => {
            addBlock();
        }, 1000);
        function addBlock() {
            let line = document.getElementsByClassName("row")[Math.floor(Math.random() * 6)];
            let block = document.createElement("p");
            block.classList.add("hedge_stone");
            line.appendChild(block);
            let distance_stone = 0;
            let interval = setInterval(peremeshenie, 20);
            function peremeshenie() {
                block.style.top = distance_stone;
                if (distance_stone < window.innerHeight - 50) { /* innerWidth - окно экрана в высоту*/
                    distance_stone = distance_stone + 1;
                }
                if (distance_stone > window.innerHeight - 51) {
                    block.style.display = 'none';
                    line.removeChild(block);
                    window.clearInterval(interval);
                }
            }
        }
    </script>
</body>
</html>
READ ALSO
Присвоить высоту дочернего элемента к родителю jquery
javascript

Присвоить высоту дочернего элемента к родителю jquery

Помогите решить проблемуМне нужно присвоить высоту контейнера внутри активного дочернего элемента родителю при помощи jQuery

 106
Помогите написать слайдер из трёх слайдов
javascript

Помогите написать слайдер из трёх слайдов

Я новичок в jsНе могу написать слайдер

 95
Отправить скриншот! html2canvas
javascript

Отправить скриншот! html2canvas

Доброго времени суток)

 104
Создание всплывающего окна для chrome extension
javascript

Создание всплывающего окна для chrome extension

Необходимо при двойном клике получить доступ к DOM вкладки и нарисовать в определённом месте всплывающее окно

 79