Home Explore Help
Sign In
kurashov1307
/
game_javascript
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

my_game

Evgeny 3 years ago
commit
ec22b4ed46
5 changed files with 99 additions and 0 deletions
Unified View Show Diff Stats
  1. BIN
      img/cactus.png
  2. BIN
      img/dino.jpg
  3. 18 0
      index.html
  4. 24 0
      script.js
  5. 57 0
      style.css

BIN
img/cactus.png
View File


BIN
img/dino.jpg
View File


+ 18 - 0
index.html
View File 

@@ -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>

+ 24 - 0
script.js
View File 

@@ -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)

+ 57 - 0
style.css
View File 

@@ -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;
 
+	}
 
+}