Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Oil Barrel Game</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="container">
		<h1>Oil Barrel Game</h1>
		<p id="score">Score: 0</p>
		<div id="player"></div>
		<div id="barrels"></div>
		<button id="start-button">Click to start</button>
	</div>
	<script src="game.js"></script>
</body>
</html>






<style>
body {
	margin: 0;
	padding: 0;
	background-color: #7EC850;
}

#container {
	width: 600px;
	margin: 0 auto;
	text-align: center;
}

h1 {
	color: white;
	font-size: 50px;
	font-weight: bold;
	margin-top: 50px;
}

#score {
	color: white;
	font-size: 30px;
}

#player {
	width: 50px;
	height: 50px;
	background-color: white;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

#barrels {
	position: absolute;
	bottom: 50px;
}

.barrel {
	width: 50px;
	height: 50px;
	background-image: url('https://imgur.com/1g1iYZK');
	background-size: cover;
	display: inline-block;
	margin-right: 20px;
}

#start-button {
	font-size: 30px;
	margin-top: 50px;
	padding: 10px 20px;
	border-radius: 10px;
	background-color: white;
	color: #7EC850;
	cursor: pointer;
}

</style>






<script>
var player = document.getElementById("player");
var barrels = document.getElementById("barrels");
var scoreText = document.getElementById("score");
var startButton = document.getElementById("start-button");
var score = 0;
var gameOn = false;

startButton.onclick = function() {
  startGame();
};

function startGame() {
  gameOn = true;
  startButton.style.display = "none";
  var moveBarrels = setInterval(function() {
    createBarrel();
    moveDown();
  }, 1000);

  var checkCollision = setInterval(function() {
    if (gameOn) {
      if (isCollision()) {
        endGame();
        clearInterval(moveBarrels);
        clearInterval(checkCollision);
      }
    }
  }, 50);

  var updateScore = setInterval(function() {
    if (gameOn) {
      score += 10;
      scoreText.innerHTML = "Score: " + score;
      if (score > 1000) {
        endGame();
        clearInterval(moveBarrels);
        clearInterval(checkCollision);
        clearInterval(updateScore);
        scoreText.innerHTML = "END";
      }
    }
  }, 500);
}

document.onkeydown = function(event) {
  if (event.keyCode == 37 && gameOn) {
    moveLeft();
  } else if (event.keyCode == 39 && gameOn) {
    moveRight();
  }
};

function moveLeft() {
  var left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
  if (left > 0) {
    player.style.left = left - 10 + "px";
  }
}

function moveRight() {
  var left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
  if (left < 550) {
    player.style.left = left + 10 + "px";
  }
}
document.body.onclick = function() {
  startGame();
}
function checkCollision() {
  for (var i = 0; i < barrels.length; i++) {
    if (character.x < barrels[i].x + barrel.width && character.x + character.width > barrels[i].x && character.y < barrels[i].y + barrel.height && character.y + character.height > barrels[i].y) {
      clearInterval(interval);
      ctx.fillStyle = "red";
      ctx.font = "bold 30px Arial";
      ctx.fillText("Game Over", canvas.width/2 - 80, canvas.height/2);
    }
  }
}
if (score > 1000) {
  clearInterval(interval);
  ctx.fillStyle = "green";
  ctx.font = "bold 30px Arial";
  ctx.fillText("END", canvas.width/2 - 40, canvas.height/2);
}

</script>
Editor is loading...