Untitled

dabblet.css

.tabuleiro {
	background: black;
	width: 600px;
	height: 600px;
	margin: 0 auto;
}

.pac-man {  
	width: 0px;
	height: 0px;
	border: 30px solid yellow;
	position: relative;
	top: 25px;
	left: 30px;
	border-radius: 30px;
}

.pac-man-mouth {
	border-right: 30px solid transparent;
	-webkit-animation: come 1s infinite;
}

@-webkit-keyframes come {
  0% {
	-web-kit-transform: rotate(90deg);	
  }
  25% {

  }
  50% {

  }
  75 {

  }
  100% { 

  }
}

.barreira:before {
	content: "";
	width: 10px;
	height: 400px;
	border: 1px dotted red;
	box-shadow: 0px 0px 10px 1px white;
	margin-left: -170px;
	margin-top: 200px;
	display: block;
}
.barreira {
	width: 10px;
	height: 400px;
	border: 1px dotted red;
	box-shadow: 0px 0px 10px 1px white;
	margin-left: 300px;
	margin-top: -60px;
}
.barreira:after {
	content: "";
	width: 10px;
	height: 400px;
	border: 1px dotted red;
	box-shadow: 0px 0px 10px 1px white;
	margin-left: 180px;
	margin-top: -400px;
	display: block;
}

.fantasma {
	width: 40px;
	height: 40px;
	background: lightblue;
	border: 3px solid lightblue;
	border-radius: 20px 20px 10px 10px;
	margin-left: 525px;
	margin-top: 50px;
}

.fantasma:after, .fantasma:before{
	content: "";
	display:inline-block;
	width: 15px;
	height: 15px;
	background: black;
	border-radius: 10px 0px 10px 10px;
	position: relative;
	transform: rotate(180deg);
	top: 33px;
	left: 5px;
}

dabblet.html

<div class="tabuleiro">
	<div class="pac-man pac-man-mouth"></div>
	<div class="barreira"></div>
	<div class="fantasma"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}