I wanted to make for myself and maybe for my acquaintances an isometric strategy like Travian, but I don’t have a desire to study the canvas now, so I’m 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 version of the implementation, but there is a question, will it not be a big load on the browser and RAM? Should I do this way? What pitfalls can I meet?

    2 answers 2

    I don’t 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 do on html + css , no matter how funny it sounds. I personally created games both on flash and on canvas and on css and I can assure you that games where there are no characters, like puzzles, text quests, perhaps primitive puzzles, board games are better and faster and cheaper to do on html + css .

    You should understand that in games the main logic, and the logic is javascript and it doesn’t matter with what to work. And given that desktop applications or mobiles are wrapped in chromium it allows you to use css for the full - variables, functions, and others.

    Even if there are some overhead effects with a limited-small scope, it’s better to do them on the canvas , and then work with it as with the html element.

    • Good answer, but please do not need to wrap technology names in tags предназначенные для выделения кода - Kromster
    • @Kromster Isn't it okay? It seems that even moderators always highlight unallocated keywords. Maybe they do it differently? - user220409
    • Apparently they did not read meta.ru.stackoverflow.com/questions/1328 - Kromster

    Absolutely not worth it. It will be damn, it's just awfully difficult to steer all this through js, and to type everything up so that it works not only in the browser. The demo that you showed as an example is just a demo, for the development of css games is not intended from the word at all. Learn canvas and WebGL, on one CSS you precisely will not leave far.