A Pen by Secret Sam.

index.html

<form>
		<input type="text" id="bloco1" pattern="a" required autofocus />  
		<input type="text" id="bloco2" pattern="d" required />

		<div class="jogo">
			<div class="timberman"></div>

			<div class="fundo-direito">
				<div class="bloco"></div>
				<div class="bloco mata"></div>
				<div class="bloco"></div>
				<div class="bloco"></div>
				<div class="bloco mata"></div>
				<div class="bloco"></div>
				<div class="bloco"></div>
			</div>

			<div class="fundo-esquerdo">
				<div class="bloco"></div>
				<div class="bloco"></div>
				<div class="bloco"></div>
				<div class="bloco"></div>
				<div class="bloco"></div>
				<div class="bloco"></div>
				<div class="bloco"></div>
			</div>
		</div>
	</form>  

style.css

* {
  box-sizing: border-box;
}

html {
  width: 100vw;
  height: 100vh;
  background-color: #ccc;
}

form {
  width: 50%;
  background-color: black;
  position: relative;
  padding: 2em;
}

input {
  display: block;
  width: 50%;
}

.jogo {
  background-color: blue;
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  transition: padding-top 0s 99999s linear;
}

.timberman {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  position: absolute;
  top: 0;
  left: 0;
}

input:valid .jogo {
  transition: padding-top 0s linear;
  padding-top: 100px;
}

#bloco1:valid ~ .jogo .timberman, #bloco2:invalid ~ .jogo .timberman {
  right: calc(100% - 100px);
}

#bloco1:invalid ~ .jogo .timberman, #bloco2:valid ~ .jogo .timberman {
  left: calc(100% - 100px);
}

.bloco {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  border: 1px solid green;
}

.bloco.mata {
  background-color: red;
}

.fundo-direito {
  float: right;
}

.fundo-esquerdo {
  float: left;
}

uekjq.markdown

uekjq

A Pen by Secret Sam on CodePen.

License.