javascript – Is it worth making an isometric game using css3 for graphics?

Question:

I wanted to make an isometric strategy like Travian for myself and perhaps for my friends, but I have no desire to study canvas now, so I am thinking of using CSS3 for the graphic part.

There are several examples that can be used for further development, such as:

https://codepen.io/joshnh/pen/IchEz

.cube,
.cube:after,
.cube:before {
    box-shadow: inset 0 0 0 .25em hsla(0,0%,0%,.1);
    content: '';
    float: left;
    height: 3em;
    position: absolute;
    width: 3em;
}
/* Top */
.cube {
    background-color: #f66;
    position: relative;
    -webkit-transform: translateZ(3em);
    -webkit-transform-style: preserve-3d;
    -webkit-transition: .25s;
}
/* Left */
.cube:after {
    background-color: #e55;
    -webkit-transform: rotateX(-90deg) translateY(3em);
    -webkit-transform-origin: 100% 100%;
}
/* Right */
.cube:before {
    background-color: #d44;
    -webkit-transform: rotateY(90deg) translateX(3em);
    -webkit-transform-origin: 100% 0;
}

http://codepen.io/Jordan/pen/snjJi

#plane div{
  float:left;
  background:#f6f6f6;
  transform-origin: 97% 97%;
  position:relative;
  box-shadow:.125em .125em .5em rgba(0,0,0,.09);
}

.tall{
  background:white !important;
  transform: translateZ(1em);
  transform-style: preserve-3d;
}
.tall:before, .tall:after{
  content:"";
  background:darkcyan;
  position: absolute;
  transform-origin: 100% 100%;
}
.tall:before{
  transform:rotateX(-90deg) translateY(1em);
  box-shadow:inset 0em -.125em .25em rgba(0,0,0,.1);
}

.tall:after{
  transform:rotateY(90deg) translateX(1em);
  box-shadow:inset -.125em 0em .25em rgba(0,0,0,.1);
}

I refer more to the first implementation option, but there is a question, will this not be a big load on the browser and RAM? Should I do it this way? What pitfalls can I come across?

Answer:

I do not know what you are talking about, not about the game itself, not about its mechanics, but I know one thing – some games are really easier to make in html + css , no matter how funny it sounds. I personally created games on flash and on canvas and css and can assure that games where there are no characters, like puzzles, text quests, perhaps primitive puzzles, board games are better and faster and cheaper to make on html + css .

You must understand that in games the main thing is logic, and logic is javascript and it doesn't matter what to work with. And given the fact that desktop or mobile applications are wrapped in chromium it allows you to use css to the fullest – variables, functions, and others.

Even if there are some overhead effects with a limited, small area of ​​action, then it is better to do them on canvas , and then work with it as with an html element.

Post Views: 0
Scroll to Top