<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="scene">
<div class="sky">
<img style="width:200px; height:114px; position: relative; top: 239px; left: 700px;" id="rock" src="rock.svg" alt="rock in game">
</div>
<div class="earth">
<img src="turtle.svg" class="turtle" alt="turtle">
<div class="gamer" id="player" style="top:-115px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" viewBox="0 0 82.3 145" style="enable-background:new 0 0 82.3 145;transform-origin: 32% 2px 8px;" xml:space="preserve">
<style type="text/css">
.Gamer_st0 {
fill: #C9C3AD;
stroke: #201600;
stroke-width: 0.5;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.Gamer_st1 {
fill: #A0DD2A;
stroke: #201600;
stroke-width: 0.75;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.Gamer_st2 {
fill: #C9C3AD;
stroke: #201600;
stroke-width: 0.75;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.Gamer_st3 {
fill: #A0DD2A;
stroke: #201600;
stroke-width: 0.5;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.Gamer_st4 {
fill: #7BA514;
stroke: #201600;
stroke-width: 0.5;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.Gamer_st5 {
fill: #0A0A09;
stroke: #201600;
stroke-width: 0.5;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.Gamer_st6 {
fill: #0F0E0C;
stroke: #201600;
stroke-linecap: round;
stroke-miterlimit: 10;
}
</style>
<circle class="Gamer_st0" cx="37.1" cy="35.7" r="15.7" />
<path class="Gamer_st1 " id="gamer_Leg_two" d="M36.7,129.7L36.7,129.7c-3.8,0-6.9-3.1-6.9-6.9V101c0-3.8,3.1-6.9,6.9-6.9h0c3.8,0,6.9,3.1,6.9,6.9v21.7 C43.7,126.5,40.5,129.7,36.7,129.7z" />
<path class="Gamer_st1 " id="gamer_Leg_one" d="M36.7,129.7L36.7,129.7c-3.8,0-6.9-3.1-6.9-6.9V101c0-3.8,3.1-6.9,6.9-6.9h0c3.8,0,6.9,3.1,6.9,6.9v21.7 C43.7,126.5,40.5,129.7,36.7,129.7z" />
<path class="Gamer_st2" d="M36.6,93H36c-6.6,0-12-5.4-12-12V63.7c0-6.6,5.4-12,12-12h0.7c6.6,0,12,5.4,12,12V81C48.6,87.6,43.2,93,36.6,93 z" />
<path class="Gamer_st3" d="M30.1,31.3c5-0.4,10-0.6,15-0.9c2.2-0.1,4.4-0.3,6.5-0.4c0.1-0.7,0.1-1.4,0.1-2.2c-0.4-7.7-7.7-13.5-16.2-13.1 s-15.2,7-14.8,14.7c0,0.4,0.1,0.7,0.1,1.1C23.9,30.8,27,31,30.1,31.3z" />
<rect x="44.1" y="27.7" transform="matrix(0.9987 -5.184876e-002 5.184876e-002 0.9987 -1.4417 2.8019)" class="Gamer_st4" width="18.3" height="3" />
<rect x="18.9" y="28.4" transform="matrix(0.9987 -5.184876e-002 5.184876e-002 0.9987 -1.5327 1.9234)" class="Gamer_st4" width="34.9" height="4.2" />
<circle class="Gamer_st5" cx="47.8" cy="35.3" r="1.6" />
<path class="Gamer_st6" d="M49.5,42.7c0,0,1.2-0.4,1.5-0.1c0.1,0.2,0.1,0.3,0.1,0.3c0,0-0.2,0.3-0.2,0.3l0,0l-1.1,1.2 c-0.5,0.1-1,0.1-1.5,0.2c-0.8,0.2-1.6,0.3-2.4,0.5c-0.8,0-1.6,0.1-2.4,0.1c0.4-0.2,0.7-0.4,1.1-0.6l0.9-0.6 c-1.2,0.3-1.9,0.4-1.9,0.2c0-0.1,0.3-0.7,1-0.7c-0.4,0-0.8,0-1.2,0l0.6-0.4l1.2-0.3l-1.8-0.5C47.1,43,48.7,42.9,49.5,42.7z"
/>
<path class="Gamer_st1" d="M20.9,67.5c0.6-3.3,1.9-11,8.6-14.4c4.4-2.3,10.9-2.7,15.7,0c6.1,3.4,7.7,11,5.7,12.5c-0.6,0.4-2.5,1.1-3.9,0.5 c-0.2-0.1-0.4-0.1-0.5-0.3c-0.3-0.5,0.8-1.4,1.1-1.8c1.5-1.8-0.5-7.2-5.4-9.5c-3.3-1.6-7.5-1.6-10.7,0c-2.2,1.1-3.4,2.8-4.4,4.4 c-1.7,2.6-2.3,5.1-2.6,6.7c-0.1,0.6-0.3,1.5-0.4,2.6c-0.1,1.7-0.4,6.4,2.4,8.9c3.6,3.3,12.3,2.8,15.7-0.6c3.2-3.2,0.5-7.8,4.4-10.3 c0.2-0.1,2.6-1.6,4.3-0.9c1.3,0.5,1.8,2.1,1.1,13.3c-0.5,7.3-0.9,9.2-1.7,11.2c-1.6,4-3.8,6.6-4.3,7.1c-4,4.2-15.7,5.4-20.8-0.2 c-0.8-0.8-1.5-2-3-13.3C20.9,74.7,20.3,70.4,20.9,67.5z"
/>
<path class="Gamer_st1" d="M-9.7,132" />
<path class="Gamer_st2 " id="hand" d="M36.2,90.9L36.2,90.9c-2.5,0-4.5-2-4.5-4.5V62.8c0-2.5,2-4.5,4.5-4.5h0c2.5,0,4.5,2,4.5,4.5v23.5 C40.7,88.8,38.7,90.9,36.2,90.9z" />
</svg>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
var gamer = document.getElementById("player"),
legOne = document.getElementById("gamer_Leg_one"),
legTwo = document.getElementById("gamer_Leg_two"),
playerLeft = 20,
playerJump = -115,
hand = document.getElementById("hand"),
downUp, downLeft;
document.addEventListener('keydown', keyDown, false);
document.addEventListener("keyup", keyUp, false);
document.addEventListener("keypress", keyPress, false);
function keyDown(e) {
var keyID = e.keyCode || e.which,
keyChar = String.fromCharCode(keyID);
if (keyChar === "D") {
downLeft = true;
playerLeft += 20;
gamer.classList.remove("scaleX");
}
if (keyChar === "A") {
playerLeft -= 20;
gamer.classList.add("scaleX");
}
if (keyChar === "F") {
downUp = true;
}
if (downUp) {
playerJump -= 100;
downUp = false;
}
gamer.style.left = playerLeft + "px"; //Задаем стили движения влево
gamer.style.top = playerJump + "px"; //ПРЫЖОК
legOne.classList.add("gamer_Leg_one"); //Добовляем АНИМАЦИЮ ДВИЖЕНИЯ ПЕРВОЙ НОГИ
legTwo.classList.add("gamer_Leg_two"); //Добовляем АНИМАЦИЮ ДВИЖЕНИЯ ВТОРОЙ НОГИ
hand.classList.add("hand"); //ДОБАВЛЕНИЕ АНИМЦИИ РУКИ
}
function keyUp(e) {
var keyID = e.keyCode || e.which,
keyChar = String.fromCharCode(keyID); //Код отлова клавишь
legOne.classList.remove("gamer_Leg_one"); //УДАЛЯЕМ АНИМАЦИЮ ДВИЖЕНИЯ ПЕРВОЙ НОГИ
legTwo.classList.remove("gamer_Leg_two"); //УДАЛЯЕМ АНИМАЦИЮ ДВИЖЕНИЯ ВТОРОЙ НОГИ
hand.classList.remove("hand");
gamer.classList.remove("animJump");
if (keyChar === "F") { // ПРЫЖОК
downUp = false;
}
if (keyChar === "D") {
downLeft = false;
}
}
function keyPress(e) {
if (downUp) {
playerJump -= 100;
downUp = false;
}
}
function gamerCoord() {
var coord = gamer.getBoundingClientRect();
return {
top: coord.top,
left: coord.left,
bottom: coord.bottom,
right: coord.right
}
}
function rockCoord() { ///КООРДИНАТЫ КАМНЯ
var coord = rock.getBoundingClientRect();
return {
top: coord.top,
left: coord.left,
bottom: coord.bottom,
right: coord.right
};
}
gamerCoord();
/* Styles go here */
* {
margin: 0;
}
/*body{overflow: hidden;}*/
.scene {
position: absolute;
}
.sky {
background: #D3F1E5;
height: 570px;
width: 3000px;
}
.gamer {
width: 58px;
height: 111px;
position: absolute;
top: -115px;
left: 20px;
transition: 1s ease;
}
/*Игрок*/
.gamer svg {
position: relative;
top: 0px;
width: 72px;
height: 122px;
}
.scaleX {
transform: scaleX(-1);
}
.earth {
background: #6A6F4F;
height: 115px;
width: 3000px;
border-top: 20px solid #AFD683;
position: absolute;
bottom: 0px;
}
.animJump {
animation: gamer 1s ease;
}
@keyframes gamer {
50% {
transform: translateY(-100px);
}
100% {
transform: translateY(0px);
}
}
/*Две ноги вращения*/
.gamer_Leg_one {
animation: legone 1s ease infinite;
}
@keyframes legone {
50% {
transform: rotate(3deg);
}
100% {
transform: rotate(-1deg);
}
}
.gamer_Leg_two {
animation: legtwo 1s ease infinite;
}
@keyframes legtwo {
50% {
transform: rotate(-3deg);
}
100% {
transform: rotate(2deg);
}
}
.hand {
animation: handGamer .9s ease infinite;
transform-origin: 0% 0% 0px;
}
@keyframes handGamer {
30% {
transform: rotate(-5deg);
}
70% {
transform: rotate(10deg);
}
100% {
transform: rotate(5deg);
}
}
/*Две ноги вращения*/
.turtle {
width: 100px;
height: 100px;
position: relative;
float: right;
top: -80px;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 149.7 80.7" style="enable-background:new 0 0 149.7 80.7;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{opacity:9.000000e-002;fill:#636AAF;}
.st2{fill:#555F69;}
.st3{fill:#454F59;}
.st4{fill:#525A63;}
</style>
<path class="st0" d="M-70.6,78.1"/>
<path class="st1" d="M-583-23.9c0.9-0.5,13.7-7.5,29-6.7c44.9,2.2,71.6,69.3,48.4,72.5C-527.2,44.8-619.2-3.6-583-23.9z"/>
<polygon class="st2" points="51,77.7 56.9,64.1 61.8,44.9 103.7,46.3 100.3,71.4 "/>
<polyline class="st3" points="41.6,78.4 51,77.7 57.5,64.9 41.2,60.7 28.9,72.5 38.7,77.3 "/>
<polyline class="st4" points="43.4,33.3 41.2,60.7 57.5,64.9 62.9,45 "/>
<polygon class="st4" points="28.9,72.5 33,68.6 18,59.1 "/>
<polygon class="st2" points="18,59.1 33,68.6 41.6,60.8 43.8,33.5 31.7,26.8 18.4,38.2 "/>
<polygon class="st4" points="100.3,71.4 133.3,55.6 135.7,39.9 102.6,50.5 "/>
<polygon class="st3" points="31.7,26.8 43.2,35.4 62.8,44.9 103.2,50.4 135.7,39.9 99.5,23.7 60.2,21 "/>
<path class="st2" d="M55.9,64.1"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 151.5 87" style="enable-background:new 0 0 151.5 87;" xml:space="preserve">
<style type="text/css">
.st0{fill:#C9C3AD;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#141311;stroke:#000000;stroke-miterlimit:10;}
.st2{fill:#3A9B7F;stroke:#000000;stroke-miterlimit:10;}
.st3{fill:#408771;stroke:#000000;stroke-miterlimit:10;}
.st4{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<path class="st0" d="M115.1,52.1c1.1-0.2,1.2,1.5,3,2.2c1.3,0.5,1.8-0.2,5.5-0.2c1.8,0,2.4,0.1,2.8,0.4c0.8,0.5,1.7,1.5,1.7,2.9
c0,0.1,0,1.6-1,2.7c-0.8,0.9-1.9,1-2.9,1.2c-0.6,0.1-1.6,0.2-3.9-0.2c-2.3-0.4-3.4-0.6-4.2-1c-0.3-0.2-3.1-1.9-3-4.7
C113.2,54,114.1,52.3,115.1,52.1z"/>
<path class="st0" d="M22.5,27.2c1.4-1.4,0.5-2.8,2.3-4.8c0.3-0.3,1.1-1.1,2.3-1.7c2.7-1.2,6.5-0.7,8.6,1.6c1.2,1.4,1.5,2.9,1.7,3.9
c0.4,2.4-0.1,4-0.7,6.8c-1,4.5-1.5,6.8-1.2,9.2c0.1,0.8,0.8,5.2,4,8c1.2,1.1,2.6,1.7,4.6,2.7c2.7,1.3,3.9,1.4,4.4,2.7
c0.5,1.2,0,2.8-0.8,3.7c-1.6,1.7-4.5,1-6.2,0.6c-0.8-0.2-4.2-1.1-7.5-4.5c-2.1-2.2-3.3-4.6-5.6-9.6c-2-4.3-2.1-5.8-2.1-6.9
c0-2,0.5-2.8,0-3.5c-0.9-1.1-4.6,1.7-8.1,0.2c-0.1-0.1-2.7-1.2-3-3.3c-0.2-1.3,0.6-2.3,0.7-2.4C17.8,27.6,20.6,29.2,22.5,27.2z"/>
<path class="st1" d="M26.6,27.9c0.4,0.5,1.5,0.4,1.8-0.1c0.3-0.6-0.5-1.8-1.1-1.7C26.7,26.1,26.1,27.3,26.6,27.9z"/>
<path class="st0" d="M105.4,52.7c2.7,1.8,3.4,5,4.1,7.7c0.8,3.4,0.6,6.5,0.3,10c0,0,0.1,1.9-0.6,4.5c-0.5,2.2-0.9,2.3-1,2.3
c-0.5,0-1-1-2-2.8c-0.5-1-0.6-1.3-0.8-1.3c-0.9-0.1-1.7,4.4-2.5,4.3c-0.1,0-0.2-0.1-0.8-1.5c-0.8-2-0.9-2.5-1.1-2.5
c-0.7-0.1-1.3,4.3-2.2,4.3c-0.6,0-1.2-2-1.3-3.8c0-2,0.7-3,1.3-4.8c1-3.1,0.8-6,0.6-7.3c-0.8-5-4.5-6.4-3.8-8.3
C96.4,51.2,101.8,50.3,105.4,52.7z"/>
<path class="st0" d="M57.2,53.7c2.7,1.8,3.4,5,4.1,7.7c0.8,3.4,0.6,6.5,0.3,10c0,0,0.1,1.9-0.6,4.5c-0.5,2.2-0.9,2.3-1,2.3
c-0.5,0-1-1-2-2.8c-0.5-1-0.6-1.3-0.8-1.3c-0.9-0.1-1.7,4.4-2.5,4.3c-0.1,0-0.2-0.1-0.8-1.5c-0.8-2-0.9-2.5-1.1-2.5
c-0.7-0.1-1.3,4.3-2.2,4.3c-0.6,0-1.2-2-1.3-3.8c0-2,0.7-3,1.3-4.8c1-3.1,0.8-6,0.6-7.3c-0.8-5-4.5-6.4-3.8-8.3
C48.3,52.2,53.7,51.3,57.2,53.7z"/>
<path class="st2" d="M94.9,60c1.2,0.1,4.5,0.2,9.3,0.4c4.3,0.1,7.8,0.2,10.1,0.3c0-0.8,0.1-2.2,0.2-3.8c0.2-2.6,0.3-4.5,0.3-4.7
c0-18.8-16.4-34.1-36.7-34.1c-22.2,0-35.6,19.8-36.7,34.1c-0.2,3,0.1,5.6,0.5,7.6c13.1,0.6,23.3,0.5,30.3,0.3
C77.7,60,86,59.6,94.9,60z"/>
<path class="st3" d="M114.8,60.7H42.2c-1.6,0-3-1.3-3-3v-1.8c0-1.6,1.3-3,3-3h72.6c1.7,0,3,1.3,3,3v1.8
C117.8,59.3,116.5,60.7,114.8,60.7z"/>
<line class="st4" x1="60.6" y1="25" x2="60.6" y2="32.3"/>
<line class="st4" x1="81" y1="32.3" x2="75.6" y2="38"/>
<line class="st4" x1="65.5" y1="37.7" x2="76.2" y2="37.7"/>
<path class="st4" d="M71.7,19.2c2.8,0,5.5,0,8.3,0"/>
<line class="st4" x1="60.4" y1="32.2" x2="65.8" y2="37.9"/>
<line class="st4" x1="75.6" y1="19.1" x2="81" y2="24.8"/>
<line class="st4" x1="80.8" y1="25" x2="80.8" y2="32.3"/>
<path class="st4" d="M64.7,20.3c-1.4,1.5-2.9,3-4.3,4.5"/>
<line class="st4" x1="46.5" y1="38.3" x2="46.5" y2="45.6"/>
<line class="st4" x1="67" y1="45.7" x2="61.5" y2="52.6"/>
<line class="st4" x1="51.5" y1="52.2" x2="62.2" y2="52.2"/>
<line class="st4" x1="51.5" y1="32.6" x2="62.2" y2="32.6"/>
<line class="st4" x1="46.3" y1="45.5" x2="51.7" y2="52.4"/>
<line class="st4" x1="61.5" y1="32.4" x2="67" y2="38.2"/>
<line class="st4" x1="66.7" y1="38.3" x2="66.7" y2="45.6"/>
<line class="st4" x1="51.7" y1="32.4" x2="46.3" y2="38.2"/>
<line class="st4" x1="75.6" y1="38.7" x2="75.6" y2="46"/>
<line class="st4" x1="96.1" y1="46.1" x2="90.6" y2="53.2"/>
<line class="st4" x1="80.6" y1="52.8" x2="91.3" y2="52.8"/>
<line class="st4" x1="80.6" y1="33" x2="91.3" y2="33"/>
<line class="st4" x1="75.4" y1="45.9" x2="80.9" y2="53"/>
<line class="st4" x1="90.6" y1="32.8" x2="96.1" y2="38.6"/>
<line class="st4" x1="95.8" y1="38.7" x2="95.8" y2="46"/>
<line class="st4" x1="80.9" y1="32.8" x2="75.4" y2="38.6"/>
<line class="st4" x1="91.4" y1="25.4" x2="91.4" y2="32.7"/>
<path class="st4" d="M110,34.7c-1.2,1.2-2.3,2.5-3.5,3.7"/>
<line class="st4" x1="96.4" y1="38.1" x2="107.1" y2="38.1"/>
<line class="st4" x1="91.2" y1="32.6" x2="96.7" y2="38.3"/>
<path class="st4" d="M95,21.3c-1.2,1.3-2.5,2.6-3.7,4"/>
<line class="st4" x1="107.5" y1="39.1" x2="107.5" y2="46.4"/>
<line class="st4" x1="107.4" y1="46.3" x2="113.5" y2="52.8"/>
<path class="st4" d="M110.4,35.7c-1,1.1-2.1,2.2-3.1,3.3"/>
</svg>