Add Direction Tank

assets/css/style.css

@@ -27,13 +27,46 @@ body{
     right: 0; 
     margin-left: auto; 
     margin-right: auto;
+    overflow: hidden;
 }
 
-.block{
-    height: 20px;
-    width: 20px;
-    background: green;
+.tank1{
+    height: 36px;
+    width: 70px;
+    background: url(../img/tank_green.png) no-repeat;
+    position: absolute;
+    border: solid 1px red;
+}
+
+.tank2{
+    height: 36px;
+    width: 70px;
+    background: url(../img/tank_orange.png) no-repeat;
     position: absolute;
     left: 50px;
-    top: 50px;
+    top: 100px;
 }
+
+.bullet{
+    height: 6px;
+    width: 6px;
+    background: #fff;
+    position: absolute;
+    left: 70px;
+    top: 15px;
+}
+
+
+.directionLeft{
+    transform: rotate(180deg);
+}
+.directionRight{
+    transform: rotate(0deg);
+}
+.directionUp{
+    transform: rotate(-90deg);
+}
+.directionDown{
+    transform: rotate(90deg);
+}
+

assets/js/script.js

@@ -1,42 +1,70 @@
-function move(event) {
-    var k = event.keyCode,
-        chrId = document.querySelector('.block'),
-        chr = {
-            updown: function () {
-                var y = parseInt(getComputedStyle(chrId).top);
-                if (k == 38) {
-                    y -= 10;
-                    if ( y == -10 ){
-                        y += 10;
-                    }
-                } else if (k == 40) {
-                    y += 10;
-                    if ( y == 460 ){
-                        y -= 10;
-                    }
-                }
-                return y;
-            },
+/* BASE */
 
-            leftright: function () {
-                var x = parseInt(getComputedStyle(chrId).left);
-                if (k == 37) {
-                    x -= 10;
-                    if ( x == -10 ){
-                        x += 10;
-                    }
-                } else if (k == 39) {
-                    x += 10;
-                    if ( x == 1160 ){
-                        x -= 10;
-                    }
-                }
-                return x;
-            }
-        };
+var map_height = 460;
+var map_width = 1170;
+document.body.addEventListener("keydown", checkKey);
 
-    chrId.style.top = (chr.updown()) + "px";
-    chrId.style.left = (chr.leftright()) + "px";
+/* Tank 1 */
+
+var tank1 = document.querySelector('.tank1');
+var tank1_direction = 'right';
+var tank1_top = 0;
+var tank1_left = 0;
+
+var tank1_key_up = '90'; // Z
+var tank1_key_down = '83'; // S
+var tank1_key_left = '81'; // Q
+var tank1_key_right = '68'; // D
+
+
+function checkKey(){
+    var keyPressed = event.keyCode;
+    
+    if(keyPressed == tank1_key_up || keyPressed == tank1_key_down || keyPressed == tank1_key_left || keyPressed == tank1_key_right){
+        tank1_checkDirection();
+        tank1_changeDirection();
+    }
+    
+    function tank1_checkDirection(){
+
+        if(keyPressed == tank1_key_up){
+            tank1_direction = 'up';
+        }
+        else if (keyPressed == tank1_key_down){
+            tank1_direction = 'down';
+        }
+        else if (keyPressed == tank1_key_left){
+            tank1_direction = 'left';
+        }
+        else if (keyPressed == tank1_key_right){
+            tank1_direction = 'right';
+        }
+    }
+
+    function tank1_changeDirection(){
+        if(tank1_direction == 'left'){
+            tank1.classList.remove('directionUp');
+            tank1.classList.remove('directionDown');
+            tank1.classList.remove('directionRight');
+            tank1.classList.add('directionLeft');
+        }
+        else if (tank1_direction == 'right'){
+            tank1.classList.remove('directionUp');
+            tank1.classList.remove('directionDown');
+            tank1.classList.remove('directionLeft');
+            tank1.classList.add('directionRight');
+        }
+        else if (tank1_direction == 'up'){
+            tank1.classList.remove('directionDown');
+            tank1.classList.remove('directionRight');
+            tank1.classList.remove('directionLeft');
+            tank1.classList.add('directionUp');
+        }
+        else if (tank1_direction == 'down'){
+            tank1.classList.remove('directionUp');
+            tank1.classList.remove('directionRight');
+            tank1.classList.remove('directionLeft');
+            tank1.classList.add('directionDown');
+        }
+    }
 }
-
-document.addEventListener('keydown', move);

index.html

@@ -10,7 +10,10 @@
     <h1>de_tank</h1>
 </section>
 <section class="map">
-    <div class="block"></div>
+    <div class="tank1">
+        <div class="bullet"></div>
+    </div>
+    <div class="tank2"></div>
 </section>
 </body>
 <script src="assets/js/script.js"></script>