Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Jogos: indo além do
simples CSS
Fernanda Bernardo
Fernanda Bernardo
Engenheira de Software @Elo7
Mentora @Training Center
@Help4Papers
http://fernandabernardo.com.br
@Feh_B...
GIFS ❤❤❤
Repositório:
http://bit.ly/2c2RsV1
Palestra:
http://bit.ly/2cbNs6h
Repositório:
http://bit.ly/2eLXyeP
Palestra:
http://bit.ly/2xDU5qq
Porque só CSS?
Divertido
Desafio
Aprendizado
We
CSS
Como representar
os elementos
básicos do jogo?
cursor: url('images/bob.png'), default;
.container {
}
<div class=“container”>
</div>
width: 100vw;
height: 100vh;
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
}
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
}
VW
VH
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
}
Viewport Width
Viewport Height
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
}
vmax
vmin
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
}
cursor: default;pointer;url('images/bo...
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
box-sizing: border-box;
}
vw, vh, vmin, vmax
cursor
box-sizing
vw, vh, vmin, vmax
cursor
box-sizing
<div class=“container”>
</div>
<div class=“container”>
<main class=“game">
</main>
</div> .container {
position: relative;
}
.game {
background: url('ima...
Porque um bob esponja
no espaço?
?
E os inimigos?
<main class=“game”>
</main>
<div class="inimigo"></div>
.inimigo {
}
width: 20px;
height: 20px;
border-radius: 50%;
backgr...
vw, vh, vmin, vmax
cursor
box-sizing
animation
vw, vh, vmin, vmax
cursor
box-sizing
animation
<main class=“game”>
</main>
<div class="inimigo"></div>
<div class="inimigo"></div>
<div class="inimigo"></div>
<div class...
<main class=“game”>
</main>
<div class="inimigo" id="i1"></div>
<div class="inimigo" id="i2"></div>
<div class="inimigo" i...
#i1 {
left: 9%;
}
#i2 {
left: 23%;
}
#i3 {
left: 37%;
}
#i4 {
left: 65%;
}
#i5 {
left: 90%;
}
E como deixar os
inimigos mais dinâmicos?
#i1 { animation-duration: 6s;
animation-iteration-count: 2;}
#i2 { animation-duration: 5s;
animation-iteration-count: 2;}
...
E se tiver mais inimigos?
#i6, #i7, #i8, #i9, #i10 {
animation-delay: 10s;
background-color: red;
}
Como esconder?
.inimigo {
z-index: -1;
animation-fill-mode: backwards;
}
Como esconder?
.inimigo {
z-index: -1;
animation-fill-mode: backwards;
}
@keyframes moving {
0% { z-index: -1; }
1% { z-in...
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
<main class=“game”>
</main>
[...]
<div class=“oops">
Game Over :(
</div>
.oops {
display: none;
position: absolute;
top: 0...
.oops {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index: 10;...
.oops {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index: 10;...
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
O que vamos
conquistar?
<main class=“game”>
</main>
<div class="inimigo" id="i1"></div>
[...]
<div class="inimigo" id="i5"></div>
<main class=“game”>
</main>
<div class="inimigo" id="i1"></div>
[...]
<div class="inimigo" id="i5"></div>
<input class=“co...
.coin {
width: 20px;
height: 20px;
background-color: yellow;
border-radius: 50%;
position: absolute;
left: 9%;
-webkit-app...
<main class=“game”>
<div class="inimigo" id="i1"></div>
<div class="inimigo" id="i2"></div>
<div class="inimigo" id="i3"><...
Como contar
os pontos?
.game {
counter-reset: pontos;
}
.game:after {
content: counter(pontos) ‘/2';
}
.coin:checked {
counter-increment: pontos;...
.game {
counter-reset: pontos;
}
.game:after {
content: counter(pontos) ‘/2';
}
.coin:checked {
counter-increment: pontos;...
.game {
counter-reset: blah;
}
.game:after {
content: counter(blah) ‘/2';
}
.coin:checked {
counter-increment: blah;
}
.coin:checked {
counter-increment: pontos;
}
.coin:checked {
counter-increment: pontos;
visibility: hidden;
}
display: none; ???Visibility
hidden X
Display
none
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
Como vence?
<main class=“game”>
[...]
<div class="venceu">
Venceu! :)
</div>
</main>
.venceu {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: green;
top: 0;
left: 0;
}
#c1:ch...
#c1:checked ~ #c2:checked
~ .venceu {
display: block;
}
Mais moedas?
~ #c3:checked
~ #c4:checked ~ #c5:checked
<main class=“game”>
[...]
<input class="coin"
type="checkbox" id="c1"></input>
[...]
<input class="coin"
type="checkbox" i...
<main class=“game”>
[...]
<input class="coin" tabindex="-1"
type="checkbox" id=“c1"></input>
[...]
<input class="coin” tab...
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex
<main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
</main>
<main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
</main>
#pa...
#pause-button ~ .inimigo,
#pause-button ~ .coin {
animation-play-state: running;
}
<main class=“game”>
<input type="checkb...
<main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
<div class=...
.pause-container {
display: none;
background-color: black;
opacity: 0.7;
}
#pause-button:checked ~ .pause-container {
disp...
.pause-container
.pause-container:before
Como colocar
instruções?
<div class="container">
<input id="intro" type="checkbox">
<section class="intro">
<h2>Space Game</h2>
<p>Jogo só com CSS,...
div .container
input #intro
section .intro
h2
p
label for=intro
.intro {
width: 100%;
height: 100%;
position: absolute;
to...
<section class="rules">
<div>
<h3>Regras</h3>
<ul>
<li>Mova seu personagem com o mouse</li>
<li>Clique nas moedas para col...
#intro:checked + #rules:checked ~ .rules {
display: none;
}
http://fernandabernardo.com.br/space-game/
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex
• http://minocernota.com/articles/pure_css_game/
• http://codepen.io/vaielab/full/yoKEF/
• http://dabblet.com/gist/2076449...
http://fernandabernardo.com.br
@Feh_Bernardo
bit.ly/front-basico
40% desconto
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Jogos 3.0
Upcoming SlideShare
Loading in …5
×

Jogos 3.0

625 views

Published on

Há quem pense que o CSS serve somente para aplicar estilos a determinados elementos, e realmente seu principal objetivo é esse! Mas alguém já pensou que seria possível capturar eventos, como um evento de clique por exemplo, e gerar algum tipo de animação com isso? E falar que com isso é possível criar um jogo? Neste talk explicarei como criar um jogo simples, sem uma linha de javascript, usando apenas HTML e CSS. Além de muitas de suas funcionalidades: pseudo-elementos, pseudo-classes, animations, entre outras.

Published in: Technology
  • Be the first to comment

Jogos 3.0

  1. 1. Jogos: indo além do simples CSS Fernanda Bernardo
  2. 2. Fernanda Bernardo Engenheira de Software @Elo7 Mentora @Training Center @Help4Papers http://fernandabernardo.com.br @Feh_Bernardo
  3. 3. GIFS ❤❤❤
  4. 4. Repositório: http://bit.ly/2c2RsV1 Palestra: http://bit.ly/2cbNs6h
  5. 5. Repositório: http://bit.ly/2eLXyeP Palestra: http://bit.ly/2xDU5qq
  6. 6. Porque só CSS?
  7. 7. Divertido
  8. 8. Desafio
  9. 9. Aprendizado
  10. 10. We CSS
  11. 11. Como representar os elementos básicos do jogo?
  12. 12. cursor: url('images/bob.png'), default; .container { } <div class=“container”> </div> width: 100vw; height: 100vh;
  13. 13. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
  14. 14. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } VW VH
  15. 15. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } Viewport Width Viewport Height
  16. 16. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } vmax vmin
  17. 17. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } cursor: default;pointer;url('images/bob.png'), default;
  18. 18. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; box-sizing: border-box; }
  19. 19. vw, vh, vmin, vmax cursor box-sizing
  20. 20. vw, vh, vmin, vmax cursor box-sizing
  21. 21. <div class=“container”> </div>
  22. 22. <div class=“container”> <main class=“game"> </main> </div> .container { position: relative; } .game { background: url('images/fundo.jpg'); position: absolute; }
  23. 23. Porque um bob esponja no espaço?
  24. 24. ?
  25. 25. E os inimigos?
  26. 26. <main class=“game”> </main> <div class="inimigo"></div> .inimigo { } width: 20px; height: 20px; border-radius: 50%; background-color: white; position: absolute; left: 9%; animation-name: moving; animation-duration: 6s; @keyframes moving { 0% { top: 0; } 100% { top: calc(100% - 25px); } }
  27. 27. vw, vh, vmin, vmax cursor box-sizing animation
  28. 28. vw, vh, vmin, vmax cursor box-sizing animation
  29. 29. <main class=“game”> </main> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div>
  30. 30. <main class=“game”> </main> <div class="inimigo" id="i1"></div> <div class="inimigo" id="i2"></div> <div class="inimigo" id="i3"></div> <div class="inimigo" id="i4"></div> <div class="inimigo" id="i5"></div>
  31. 31. #i1 { left: 9%; } #i2 { left: 23%; } #i3 { left: 37%; } #i4 { left: 65%; } #i5 { left: 90%; }
  32. 32. E como deixar os inimigos mais dinâmicos?
  33. 33. #i1 { animation-duration: 6s; animation-iteration-count: 2;} #i2 { animation-duration: 5s; animation-iteration-count: 2;} #i3 { animation-duration: 7s; animation-iteration-count: 2;} #i4 { animation-duration: 12s; animation-iteration-count: 1;} #i5 { animation-duration: 10s; animation-iteration-count: 1;}
  34. 34. E se tiver mais inimigos? #i6, #i7, #i8, #i9, #i10 { animation-delay: 10s; background-color: red; }
  35. 35. Como esconder? .inimigo { z-index: -1; animation-fill-mode: backwards; }
  36. 36. Como esconder? .inimigo { z-index: -1; animation-fill-mode: backwards; } @keyframes moving { 0% { z-index: -1; } 1% { z-index: 2; } 100% { z-index: 2; } }
  37. 37. vw, vh, vmin, vmax cursor box-sizing animation z-index
  38. 38. vw, vh, vmin, vmax cursor box-sizing animation z-index
  39. 39. <main class=“game”> </main> [...] <div class=“oops"> Game Over :( </div> .oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; }
  40. 40. .oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; } .inimigo:hover ~ .oops { display: block; }
  41. 41. .oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; } .inimigo:hover ~ .oops { display: block; } .oops:hover { display: block; }
  42. 42. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores
  43. 43. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores
  44. 44. O que vamos conquistar?
  45. 45. <main class=“game”> </main> <div class="inimigo" id="i1"></div> [...] <div class="inimigo" id="i5"></div>
  46. 46. <main class=“game”> </main> <div class="inimigo" id="i1"></div> [...] <div class="inimigo" id="i5"></div> <input class=“coin” type="checkbox" id="c1"> </input>
  47. 47. .coin { width: 20px; height: 20px; background-color: yellow; border-radius: 50%; position: absolute; left: 9%; -webkit-appearance: none; animation-name: moving; animation-duration: 6s; } .coin:checked { visibility: hidden; }
  48. 48. <main class=“game”> <div class="inimigo" id="i1"></div> <div class="inimigo" id="i2"></div> <div class="inimigo" id="i3"></div> <input class="coin" type="checkbox" id=“c1"> </input> <div class="inimigo" id="i4"></div> <input class=“coin" type="checkbox" id=“c2"> </input> <div class="inimigo" id="i5"></div> </main>
  49. 49. Como contar os pontos?
  50. 50. .game { counter-reset: pontos; } .game:after { content: counter(pontos) ‘/2'; } .coin:checked { counter-increment: pontos; }
  51. 51. .game { counter-reset: pontos; } .game:after { content: counter(pontos) ‘/2'; } .coin:checked { counter-increment: pontos; }
  52. 52. .game { counter-reset: blah; } .game:after { content: counter(blah) ‘/2'; } .coin:checked { counter-increment: blah; }
  53. 53. .coin:checked { counter-increment: pontos; }
  54. 54. .coin:checked { counter-increment: pontos; visibility: hidden; } display: none; ???Visibility hidden X Display none
  55. 55. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter
  56. 56. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter
  57. 57. Como vence?
  58. 58. <main class=“game”> [...] <div class="venceu"> Venceu! :) </div> </main>
  59. 59. .venceu { display: none; position: absolute; width: 100%; height: 100%; background-color: green; top: 0; left: 0; } #c1:checked ~ #c2:checked ~ .venceu { display: block; }
  60. 60. #c1:checked ~ #c2:checked ~ .venceu { display: block; } Mais moedas? ~ #c3:checked ~ #c4:checked ~ #c5:checked
  61. 61. <main class=“game”> [...] <input class="coin" type="checkbox" id="c1"></input> [...] <input class="coin" type="checkbox" id=“c2"></input> [...] </main>
  62. 62. <main class=“game”> [...] <input class="coin" tabindex="-1" type="checkbox" id=“c1"></input> [...] <input class="coin” tabindex="-1" type="checkbox" id=“c2"></input> [...] </main>
  63. 63. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
  64. 64. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
  65. 65. <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] </main>
  66. 66. <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] </main> #pause-button + label { background-image: url('images/pause.png'); } #pause-button:checked + label { background-image: url('images/play.png'); }
  67. 67. #pause-button ~ .inimigo, #pause-button ~ .coin { animation-play-state: running; } <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] </main> #pause-button:checked ~ .inimigo, #pause-button:checked ~ .coin { animation-play-state: paused; }
  68. 68. <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] <div class="pause-container"></div> </main>
  69. 69. .pause-container { display: none; background-color: black; opacity: 0.7; } #pause-button:checked ~ .pause-container { display: block; }
  70. 70. .pause-container .pause-container:before
  71. 71. Como colocar instruções?
  72. 72. <div class="container"> <input id="intro" type="checkbox"> <section class="intro"> <h2>Space Game</h2> <p>Jogo só com CSS, sem Javascript ;D</p> <label for=“intro">Play!</label> </section> [… .game] </div>
  73. 73. div .container input #intro section .intro h2 p label for=intro .intro { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 15; } label[for=“intro"] { padding: 1em; font-size: 1.2em; background-color: purple; border-radius: 5px; margin: 1em 25%; display: inline-block; border: 1px solid purple; } #intro:checked ~ .intro { display: none; }
  74. 74. <section class="rules"> <div> <h3>Regras</h3> <ul> <li>Mova seu personagem com o mouse</li> <li>Clique nas moedas para coletá-las</li> <li>Fuja dos tiros</li> </ul> <label for="rules">Entendi :)</label> </div> </section>
  75. 75. #intro:checked + #rules:checked ~ .rules { display: none; }
  76. 76. http://fernandabernardo.com.br/space-game/
  77. 77. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
  78. 78. • http://minocernota.com/articles/pure_css_game/ • http://codepen.io/vaielab/full/yoKEF/ • http://dabblet.com/gist/2076449 • http://ryan-kahn.com/static/onlyCSS/ • http://fernandabernardo.com.br/piano-tiles/ • https://github.com/FernandaBernardo/timberman-css Biografia
  79. 79. http://fernandabernardo.com.br @Feh_Bernardo
  80. 80. bit.ly/front-basico 40% desconto

×