3 năm trước cách đây · ec22b4ed46
--- a/img/cactus.png
+++ b/img/cactus.png
--- a/img/dino.jpg
+++ b/img/dino.jpg
--- a/index.html
+++ b/index.html
@@ -0,0 +1,18 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+	<meta charset="UTF-8">
			
 
				+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+	<title>Game</title>
			
 
				+	<link rel="stylesheet" href="style.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+	
			
 
				+	<div class="game">
			
 
				+		<div id="dino"></div>
			
 
				+		<div id="cactus"></div>
			
 
				+	</div>
			
 
				+
			
 
				+	<script src="script.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/script.js
+++ b/script.js
@@ -0,0 +1,24 @@
 
				+const dino = document.getElementById('dino');
			
 
				+const cactus = document.getElementById('cactus');
			
 
				+
			
 
				+document.addEventListener('keydown', function(event){
			
 
				+	jump();
			
 
				+});
			
 
				+
			
 
				+function jump(){
			
 
				+	if(dino.classList != 'jump'){
			
 
				+		dino.classList.add('jump');
			
 
				+	}
			
 
				+	setTimeout(function(){
			
 
				+		dino.classList.remove('jump');
			
 
				+	}, 300)
			
 
				+}
			
 
				+
			
 
				+let isAlive = setInterval(function(){
			
 
				+	let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue('top'));
			
 
				+	let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue('left'));
			
 
				+
			
 
				+	if(cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 140){
			
 
				+		alert('GAME OVER');
			
 
				+	}
			
 
				+},10)
			
--- a/style.css
+++ b/style.css
@@ -0,0 +1,57 @@
 
				+.game{
			
 
				+	width: 600px;
			
 
				+	height: 200px;
			
 
				+	border-bottom: 1px solid #000;
			
 
				+	margin: auto;
			
 
				+}
			
 
				+
			
 
				+#dino{
			
 
				+	width: 50px;
			
 
				+	height: 50px;
			
 
				+	background-image: url(img/dino.jpg);
			
 
				+	background-size: 50px 50px;
			
 
				+	position: relative;
			
 
				+	top: 150px;
			
 
				+}
			
 
				+
			
 
				+#cactus{
			
 
				+	width: 20px;
			
 
				+	height: 40px;
			
 
				+	background-image: url(img/cactus.png);
			
 
				+	background-size: 20px 40px;
			
 
				+	position: relative;
			
 
				+	top: 110px;
			
 
				+	left: 580px;
			
 
				+	animation: cactusMov 2s infinite linear;
			
 
				+}
			
 
				+
			
 
				+@keyframes cactusMov{
			
 
				+	0%{
			
 
				+		left: 580px;
			
 
				+	}
			
 
				+	100%{
			
 
				+		left: -20px;
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+.jump{
			
 
				+	animation: jump 0.3s linear;
			
 
				+}
			
 
				+
			
 
				+@keyframes jump{
			
 
				+	0%{
			
 
				+		top: 150px;
			
 
				+	}
			
 
				+	30%{
			
 
				+		top: 130px;
			
 
				+	}
			
 
				+	50%{
			
 
				+		top: 80px;
			
 
				+	}
			
 
				+	80%{
			
 
				+		top: 130px;
			
 
				+	}
			
 
				+	100%{
			
 
				+		left: 1500px;
			
 
				+	}
			
 
				+}