Рубрики
Без рубрики

Создание уродливой игры с использованием React: часть 1

Учебник объясняет, как создать уродливую игру, используя React, HTML и CSS.

Автор оригинала: Oyebanji Jacob.

Вступление

Безда – это слово игра, в которой вы пытаетесь сделать слова из букв из последовательных соседних кубиков, где «соседний» определяется как горизонтально, вертикально и по диагонали, соседние кубики.

Чем дольше слово, тем больше очков вы набираете. Слова должны быть длиной не менее трех букв, могут включать в себя сингулярные и множественные (или другие производные формы) отдельно, но могут не использовать ту же букву куба более одного раза за слово. После трех минут прошло, игра заканчивается.

Письмо «Q» отображается как (и забита как) «Qu».

Оценка

Представленные слова забиты, следующие, основанные на длине слова: – 3-4 буквы: 1 точка – 5 букв: 2 балла – 6 букв: 3 балла – 7 букв: 5 баллов – 8 или более буквы: 11 очков

Пользовательский интерфейс

High Fidelity Wireframe.png.png.png

Настраивать

Создать папку с именем Бездная игра и иметь структуру папки, аналогичную изображению ниже.

Застрел на экране 2017-08-27 при 3,08.30 PM.PNG

Файлы и папки

  • Компоненты – Это папка, в которой мы сохраняем все нашими комментариями реагирования.
  • Изображения – Содержит изображения, используемые в проекте.
  • index.html – Страница, которая загружает и загружает необходимые файлы HTML, CSS и JavaScript.
  • styles.csss – Все наши стили CSS идут сюда.
  • index.js – Это точка входа для наших компонентов реагирования.

В настоящее время все файлы и папки являются/должны быть пустыми.

Кодирование

Чтобы начать, мы создаем наш пользовательский интерфейс с HTML и CSS.

Boggleuisteponeedit.png.

index.html.





    
    
    
    
    Boggle Game

./images/logo.png.

logo.png.png.

still.css

body {
    background-color: #F57921;
    font-family: Arial, Helvetica, sans-serif;
}

#boggle-container {
    display: flex;
    flex-direction: column;
    width: 490px;
    margin: 0 auto;
}

.logo {
    align-self: center;
}

#board {
    border: 5px solid #FFCA08;
    background-color: #398BD4;
    padding: 5px;
    margin-top: 20px;
}

Текущий вид

Застрел на экране 2017-08-27 в 6.05.53 PM.PNG

Доска

Boggleuisteptwo.png.

index.html.

...



    

        

            A
        
 
        

            B
        
 
        

            C
        
 
        

            D
        
 
        

            E
        

    




...

styles.css

...

.row {
    display: flex;
    text-align:center;
    flex-direction:row;
    padding: 5px;
}

.boggle:hover {
    cursor: pointer;
}

.boggle {
   width: 80px;
   height: 80px;
   border-radius: 5px;
   background-color: #ffffff;
   box-shadow: -4px 2px 8px 1px rgba(0,0,0,0.69);
   flex:1 1 auto;
   margin:5px;
}

.boggle.selected {
   background-color: #ACCEEC;
}

.boggle span {
   font-weight: bold;
   display: block;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

...

Что мы имеем

Выстрел на экране 2017-08-28 в 12.40.17 AM.PNG

Текущее слово и отправьте область слова

Снятый экран 2017-08-28 на 12.42.12 AM.PNG

index.html.

...


    Current Word: ABC
    


...

still.css

...

#word-submit {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
}
...

Что мы имеем

Снятый экран 2017-08-28 на 12.47.48 AM.PNG

Область таблицы баллов

Выстрел на экране 2017-08-28 на 12.49.10 AM.PNG
...


    

        Word 
        Score
    

    

        congruent
        11
    

    

        urgent
        3
    

    


...

...

#score-table {
    align-self: left;
    border: 5px solid #FFCA08;
    border-collapse: collapse;
    text-align: left;
}

#score-table td, #score-table th {
    border: 5px solid #FFCA08;
    background-color: white;
    padding: 5px;
}

#score-table tr#footer td {
    background-color: #ACCEEC;
}
...

Что мы имеем

Застрел на экране 2017-08-28 на 1.01.44 AM.PNG

Положить все это вместе

index.html.





    
    
    
    
    Boggle Game


    

        
        

            

                

                    A
                
 
                

                    B
                
 
                

                    C
                
 
                

                    D
                
 
                

                    E
                

            

            

                

                    A
                
 
                

                    B
                
 
                

                    C
                
 
                

                    D
                
 
                

                    E
                

            

            

                

                    A
                
 
                

                    B
                
 
                

                    C
                
 
                

                    D
                
 
                

                    E
                

            

            

                

                    A
                
 
                

                    B
                
 
                

                    C
                
 
                

                    D
                
 
                

                    E
                

            

            

                

                    A
                
 
                

                    B
                
 
                

                    C
                
 
                

                    D
                
 
                

                    E
                

            

        

        

            Current Word: ABC 
            
        

        

            

                Word 
                Score
            

            

                congruent
                11
            

            

                urgent
                3

still.css

body {
    background-color: #F57921;
    font-family: Arial, Helvetica, sans-serif;
}

#boggle-container {
    display: flex;
    flex-direction: column;
    width: 490px;
    margin: 0 auto;
}

.logo {
    align-self: center;
}

#board {
    border: 5px solid #FFCA08;
    background-color: #398BD4;
    padding: 5px;
    margin-top: 20px;
}

.row {
    display: flex;
    text-align:center;
    flex-direction:row;
    padding: 5px;
}

.boggle:hover {
    cursor: pointer;
}

.boggle {
   width: 80px;
   height: 80px;
   border-radius: 5px;
   background-color: #ffffff;
   box-shadow: -4px 2px 8px 1px rgba(0,0,0,0.69);
   flex:1 1 auto;
   margin:5px;
}

.boggle.selected {
   background-color: #ACCEEC;
}

.boggle span {
   font-weight: bold;
   display: block;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

#word-submit {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
}

#score-table {
    align-self: left;
    border: 5px solid #FFCA08;
    border-collapse: collapse;
    text-align: left;
}

#score-table td, #score-table th {
    border: 5px solid #FFCA08;
    background-color: white;
    padding: 5px;
}

#score-table tr#footer td {
    background-color: #ACCEEC;
}

Что мы имеем

Выстрел на экране 2017-08-28 на 1.06.53 AM.PNG

Во второй части этого учебника мы выделим каждый элемент на странице в соответствующие компоненты реагирования и включите игровую игру и очкую логику!

Если вам понравилось это руководство, или у вас есть какие-либо вопросы или комментарии, не стесняйтесь, нравится посмотреть сообщение или комментарий ниже!

Читайте ещё по теме: