Day 21: A Little Game Progress

Intro

Some exciting developments have been happening this weekend. I have been focusing a lot on this upcoming project. I can announce what the project is going to be since I'm getting a lot closer to finishing. It will be done no later than Friday. The project is going to be a simple title-based game. It's something that I can keep updating as this challenge goes on. Today will be somewhat of a brief explanation of HTML code from what I have been writing. Also a little CSS.

HTML Section

When building a project or a webpage, I like to have an idea of how I'm going to make it look at the end. I wanted this game to be magic and something I would like to play. That being said I wanted a screen to play the game, two scrolls to show attacks available and enemies on the board, and I wanted a stats screen for the player.

Thinking about this made me think I was going to use two CSS grids to arrange the webpage. The basic look was something like this

                
                    
      
    <div class='grid-container'>
      <div class='padding'>

      </div>
      <div class='main-content'>
        <div class='long-box' id='attack-box'>

        </div>

        <div class='' id='canvas-area'>
         <div class='long-box' id='enemy-box'>

        </div>
      </div>
      <div class='padding'>

      </div>
    </div>

            
      
                
            

Thinking about this made me think I was going to use two CSS grids to arrange the webpage. The basic look was something like this

Attack Box

The code about lets me cut the screen into a main area and a padding area. I always like the look of having some space away from the screen when displaying my content. Next I split the content area into three columns an attack box, canvas, and an enemy box.

                
                    
      
    <div class='long-box' id='attack-box'>

      <p class='center'>Attacks</p>

        <button class='direction-button' type='button' name='button'>Switch Direction</button>
        <p class='center no-margin' id='direction-text'>Current Direction: right</p>

      <hr>
      <div class='attack'>
        <p class='attack-title | center'>Fire ball</p>
        <div class='flex-box'>
            <p class='attack-des'>Dmg: 2</p>
            <p class='attack-des' >Cost: 4</p>
            <i class='attack-des fa-solid fa-fire'></i>
            <picture class='attack-img'>
              <img src='../../BlogPictures/MagicAttackPics/3S.png' alt=''>
            </picture>

        </div>

      </div>


    </div>

            
      
                
            

The code about lets me cut the screen into a main area and a padding area. I always like the look of having some space away from the screen when displaying my content. Next I split the content area into three columns an attack box, canvas, and an enemy box.

The code about lets me cut the screen into a main area and a padding area. I always like the look of having some space away from the screen when displaying my content. Next I split the content area into three columns an attack box, canvas, and an enemy box.

Attack Box

The next thing that I wanted to think about was the long box that is going to hold all the attacks. The main thought behind this was to have different cards of attack show up on the side for the player to use. I want the player to be able to see all the information in this box. Also the player will have to click on the attack to cast it. This being said this sort of what I came up with

                
                    
      
    <div class='long-box' id='attack-box'>

      <p class='center'>Attacks</p>

        <button class='direction-button' type='button' name='button'>Switch Direction</button>
        <p class='center no-margin' id='direction-text'>Current Direction: right</p>

      <hr>
      <div class='attack'>
        <p class='attack-title | center'>Fire ball</p>
        <div class='flex-box'>
            <p class='attack-des'>Dmg: 2</p>
            <p class='attack-des' >Cost: 4</p>
            <i class='attack-des fa-solid fa-fire'></i>
            <picture class='attack-img'>
              <img src='../../BlogPictures/MagicAttackPics/3S.png' alt=''>
            </picture>

        </div>

      </div>


    </div>

            
      
                
            

Now there a few things that I would like to mention with this so lets go top to bottom. First off you have the div that holds everything together and that's the long box this will be styled like a scroll to give a mystic feeling. Next I want the player to noice that this is the attack area so a title for that. Next I have a button and a paragraph element to show the direction the player is in. this will change the direction of the picture for later. Once we have all the it's time to build the cards.

Main Content

Now there a few things that I would like to mention with this so lets go top to bottom. First off you have the div that holds everything together and that's the long box this will be styled like a scroll to give a mystic feeling. Next I want the player to noice that this is the attack area so a title for that. Next I have a button and a paragraph element to show the direction the player is in. this will change the direction of the picture for later. Once we have all the it's time to build the cards.

                
                    
      
<div class='' id='canvas-area'>
  <div class='main-content-size' id='phone-attack-box'>

  </div>
  <canvas id='canvas' class='main-content-size' width='300' height='300'></canvas>
  <div class='stat-box | main-content-size'>
    <p class='center'>Stats</p>
    <hr>
  </div>
</div>

            
      
                
            

Now there a few things that I would like to mention with this so lets go top to bottom. First off you have the div that holds everything together and that's the long box this will be styled like a scroll to give a mystic feeling. Next I want the player to noice that this is the attack area so a title for that. Next I have a button and a paragraph element to show the direction the player is in. this will change the direction of the picture for later. Once we have all the it's time to build the cards.

The card will have the attack name on it and all the stats. So i have a title and then everything else is put within a flex box to show the damage, cost, a picture of the type and a picture of the direction of the attack.