Переместить фигуру с помощью циклов в Javascript

251

01 января 2019, 11:10

Прошу помощи с учебной задачей. Не прошу писать все решение, подскажите хоть как в данной задаче в JS выразить мысль (дальше разберусь):

Двигать квадрат вправо, пока длина не более 450px или 9 клеток

Думал типа этого

function plan(piece) do {
piece.addStep('right');  
while (top: 0; right: 450; addStep+=50px;)
 }

но это не оно (по кр мере ничего не происходит)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Go through the MAZE</title> 
    <style> 
        body { 
            background-color: gray; 
            display: flex; 
            flex-flow: row nowrap; 
        } 
 
        .controls { 
            display: flex; 
            flex-direction: column; 
            margin-left: 20px; 
        } 
 
        .result { 
            display: inline-block; 
            color: red; 
            text-transform: uppercase; 
            vertical-align: middle; 
        } 
 
        .result--success { 
            color: green; 
        } 
 
        .start { 
            display: inline-block; 
            margin-bottom: 20px; 
        } 
 
        .field { 
            position: relative; 
            display: flex; 
            flex-wrap: wrap; 
            justify-content: flex-start; 
            background-color: white; 
            width: 500px; 
            height: 500px; 
            float: left; 
        } 
 
        .field__cell { 
            flex-basis: 50px; 
            height: 50px; 
            box-shadow: inset 0 0 0 1px palegreen; 
        } 
 
        .field__cell--top { 
            box-shadow: 0 -4px 0 0 black, inset 0 0 0 1px palegreen; 
        } 
 
        .field__cell--top-right { 
            box-shadow: 0 -4px 0 0 black, 4px 0 0 0 black, inset 0 0 0 1px palegreen; 
        } 
 
        .field__cell--top-left { 
            box-shadow: 0 -4px 0 0 black, -4px 0 0 black, inset 0 0 0 1px palegreen; 
        } 
 
        .field__cell--right { 
            box-shadow: 4px 0 0 0 black, inset 0 0 0 1px palegreen; 
        } 
 
        .field__cell--bottom { 
            box-shadow: 0 4px 0 0 black, inset 0 0 0 1px palegreen; 
        } 
 
        .field__cell--bottom-right { 
            box-shadow: 0 4px 0 0 black, 4px 0 0 0 black, inset 0 0 0 1px palegreen; 
        } 
 
        .field__cell--bottom-left { 
            box-shadow: 0 4px 0 0 black, -4px 0 0 black, inset 0 0 0 1px palegreen; 
        } 
 
        .field__cell--left { 
            box-shadow: -4px 0 0 black, inset 0 0 0 1px palegreen; 
        } 
 
        .field__cell--target:after { 
            content: ""; 
            display: block; 
            height: 100%; 
            width: 100%; 
            background-color: darkorange; 
            opacity: 0.5; 
        } 
 
        .piece { 
            position: absolute; 
            z-index: 1; 
            width: 50px; 
            height: 50px; 
        } 
 
        .piece:after { 
            display: block; 
            position: absolute; 
            content: ""; 
            background-color: darkorange; 
            border-radius: 7px; 
            top: 50%; 
            left: 50%; 
            margin-top: -15px; 
            margin-left: -15px; 
            width: 30px; 
            height: 30px; 
        } 
 
    </style> 
</head> 
<body> 
<div class="field"> 
    <div class="piece" style="top: 0; left: 0;"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top-right"></div> 
 
    <div class="field__cell field__cell--top-left"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top-right"></div> 
    <div class="field__cell field__cell--right"></div> 
 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--top-left"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top-right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--top-left"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top-right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--top-left"></div> 
    <div class="field__cell field__cell--top"></div> 
    <div class="field__cell field__cell--top-right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--top-left"></div> 
    <div class="field__cell field__cell--bottom-right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--bottom-left"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom-right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--bottom-left"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom-right"></div> 
    <div class="field__cell field__cell--right"></div> 
    <div class="field__cell field__cell--right"></div> 
 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--left"></div> 
    <div class="field__cell field__cell--bottom-left"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom-right"></div> 
    <div class="field__cell field__cell--right"></div> 
 
    <div class="field__cell field__cell--left field__cell--target"></div> 
    <div class="field__cell field__cell--bottom-left"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom"></div> 
    <div class="field__cell field__cell--bottom-right"></div> 
</div> 
 
<div class="controls"> 
    <div> 
        <button class="start">Start</button> 
    </div> 
    <div class="result"></div> 
</div> 
 
<script> 
    const defaultPiecePosition = 'top: 0; left: 0;'; 
    const successResult = 'success!'; 
    const failResult = 'fail!'; 
    const successModifier = 'result--success'; 
    const start = document.querySelector('.start'); 
    const result = document.querySelector('.result'); 
    const fieldElement = document.querySelector('.field'); 
    const cellsElements = document.querySelectorAll('.field__cell'); 
    const pieceElement = document.querySelector('.piece'); 
 
    class Field { 
        constructor() { 
            this.field = fieldElement; 
            this.cells = cellsElements; 
            this.opposites = { 
                'up': 'down', 
                'down': 'up', 
                'left': 'right', 
                'right': 'left' 
            } 
        } 
 
        wallThere(direction, classes) { 
            return classes.indexOf(direction) !== -1; 
        } 
 
        inTheSameRow(current, next) { 
            return (current - current % 10) / 10 === (next - next % 10) / 10 
        } 
 
        findNextCell(currentIndex, direction) { 
            let nextIndex = currentIndex; 
 
            switch (direction) { 
                case 'up': 
                    nextIndex = currentIndex - 10; 
                    if (nextIndex < 0) { 
                        nextIndex = -1; 
                    } 
                    break; 
 
                case 'right': 
                    nextIndex = currentIndex + 1; 
                    if (!this.inTheSameRow(currentIndex, nextIndex)) { 
                        nextIndex = -1; 
                    } 
                    break; 
 
                case 'down': 
                    nextIndex = currentIndex + 10; 
                    if (nextIndex > 100) { 
                        nextIndex = -1; 
                    } 
                    break; 
 
                case 'left': 
                    nextIndex = currentIndex - 1; 
                    if (!this.inTheSameRow(currentIndex, nextIndex)) { 
                        nextIndex = -1; 
                    } 
                    break; 
 
                default: 
                    nextIndex = -1; 
                    break; 
            } 
 
            return this.cells[nextIndex]; 
        } 
 
        checkCell(currentTop, currentLeft, direction) { 
            let cellIndex = (currentTop / 50 * 10 + currentLeft / 50); 
            let cell = this.cells[cellIndex]; 
            let nextCell = this.findNextCell(cellIndex, direction); 
 
            return !( 
                this.wallThere(direction, cell.classList.toString()) || 
                typeof nextCell === 'undefined' || 
                this.wallThere(this.opposites[direction], nextCell.classList.toString()) 
            ); 
        } 
    } 
 
    class Piece { 
        constructor() { 
            this.piece = pieceElement; 
            this.steps = []; 
            this.finished = false; 
            this.timeout = 400; 
            this.field = new Field(); 
        } 
 
        addStep(direction) { 
            this.steps.push({direction}) 
        } 
 
        makeNext(step, endAfterIt) { 
            let top = Number(this.piece.style.top.replace('px', '')); 
            let left = Number(this.piece.style.left.replace('px', '')); 
            let nextLeft = left; 
            let nextTop = top; 
 
            switch (step.direction) { 
                case 'left': 
                    break; 
 
                case 'down': 
                    nextTop += 50; 
                    break; 
 
                case 'up': 
                    break; 
 
                case 'right': 
                    nextLeft += 50; 
                    break; 
 
                default: 
                    return; 
            } 
 
            if (this.finished) { 
                return; 
            } 
 
            if (this.field.checkCell(top, left, step.direction)) { 
 
                this.piece.setAttribute('style', 'top: ' + nextTop + 'px; left: ' + nextLeft + 'px;'); 
 
                if (nextTop === 450 && nextLeft === 0) { 
                    this.finished = true; 
                } 
 
                if (this.finished) { 
                    this.end(true); 
                } 
            } 
 
            if (!this.finished && endAfterIt) { 
                this.end(false); 
            } 
        } 
 
        end(success) { 
            if (success) { 
                result.textContent = successResult; 
                result.classList.add(successModifier); 
            } else { 
                result.textContent = failResult; 
                result.classList.remove(successModifier); 
            } 
        } 
 
        go() { 
            this.steps.forEach((step, index) => { 
                setTimeout(() => { 
                    const endAfterIt = index === this.steps.length - 1; 
                    this.makeNext(step, endAfterIt); 
                }, (index + 1) * this.timeout); 
            }); 
        } 
    } 
 
 
    function reset() { 
        pieceElement.setAttribute('style', defaultPiecePosition); 
        result.textContent = ''; 
        result.classList.remove(successModifier); 
    } 
 
    function run() { 
        let piece = new Piece(); 
 
        plan(piece); 
        piece.go(); 
    } 
 
    function plan(piece) { 
        piece.addStep('left'); 
        piece.addStep('up'); 
        piece.addStep('right'); 
        piece.addStep('right'); 
        piece.addStep('right'); 
        piece.addStep('right'); 
        piece.addStep('right'); 
        piece.addStep('right'); 
        piece.addStep('right'); 
        piece.addStep('right'); 
        piece.addStep('right'); 
        piece.addStep('down'); 
        piece.addStep('down'); 
        piece.addStep('down'); 
        piece.addStep('down'); 
    } 
 
    function main() { 
        reset(); 
        run(); 
    } 
 
    start.addEventListener('click', main); 
 
</script> 
</body> 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Вопрос по jQuery (js)

есть такой вопрос:

245

javascript

Как сделать карусель (отзывов) используя FancyBox 3?

Не в виде всплывающего окна, а именно как карусел

201

javascript

как очистить пост после передачи данных

Имеется скрипт, для сбора информации из полей email и phone, проблема в том, что после первой передачи, если нужно отредактировать эти поля у других...

183

javascript

Uncaught SyntaxError: Unexpected token < in JSON at position 0

помогите решить довольно распространенную ошибку Этой функцией я получаю из бд массив и его id

232