style.css

*{ transition : all 0.2s ease 0s  }
body{
  padding: 0;
  margin: 0;
  font-family: verdana;
  line-height: 2;
  letter-spacing: 1.5px;
  font-size: 15px;
  background: #999 no-repeat;
  color: #fff;
 	overflow-y: hidden;

}
.onscreen {
  position: fixed;
  top: 0;
  width: 750px;
  height: 50px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.onscreen *{
  position: absolute;
}
span {
  top: 10px;
  left: 500px;
}
h5 {
  top: -17px;
  left: 180px;
}
.game {
  width: 1300px;
  height: 650px;
  background: #333;
  margin: 50px 50px 10px 50px;
  position: relative;
  border-radius: 15px;
  overflow: hidden;

}
.game * {
  position: absolute;
}
p {
  left: 10px;
  top: -20px;
  z-index: 5;
}
#healthbar {
  left: 50px;
  top: 13px;
  opacity: 0.9;
  background-color: #555;
  width: 200px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50px;
}
#healthfiller {
  border-radius: 50px;
  background-color: #5f5;
  width: 200px;
  height: 20px;
}
#healthbar_m {
  left: 270px;
  top: 13px;
  opacity: 0.9;
  background-color: #555;
  width: 200px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50px;
}
#healthfiller_m {
  border-radius: 50px;
  background-color: #f55;
  width: 200px;
  height: 20px;
}
.bomb {
  width: 100px;
  height: 100px;
  background: url(bomb.png) no-repeat;
  background-size: 100% auto;
 }
.player {
  transform: scaleX(1);
  z-index: 5;
  width: 100px;
  height: 100px;
  background: url(player.png) no-repeat;
  background-size: 100% auto;
 }
 .monster {
  z-index: 4;
  left: 400px;
  top: 50px;
  transform: scaleX(-1);
  width: 150px;
  height: 150px;
  background: url(monster.png) no-repeat;
  background-size: 100% auto;
 }
.laser {
  width: 100%;
  background: red;
  height: 3px;
}
.help {
  margin-left: 50px;
  margin-bottom: 20px;
}