update v2

master
sundowndev 2017-12-09 00:48:52 +01:00
commit aaa697c579
6 changed files with 259 additions and 60 deletions

View File

@ -3,6 +3,7 @@ body{
padding: 0;
font-family: sans-serif;
background: #232323;
user-select: none;
}
.header{
@ -17,23 +18,32 @@ body{
color: #fff;
}
.map{
width: 1170px;
height: 460px;
border: solid 3px red;
background: url(../img/bg_sand.png) repeat;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
.container{
max-width: 1140px;
margin: auto;
}
.block{
height: 20px;
width: 20px;
background: green;
position: absolute;
left: 50px;
top: 50px;
.map{
text-align: center;
background: url(../img/bg_sand.png) repeat;
display: inline-block;
padding-top: 7px;
padding-bottom: 3px;
}
.line{
display: inline-block;
}
.col{
height: 50px;
width: 50px;
border: solid 0px #000;
display: inline-block;
}
.line-3 > .col-12{
background: url(../img/tank_bg.png) no-repeat;
background-position: 0px 0px;
}

BIN
assets/img/tank_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/img/tank_green.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
assets/img/tank_orange.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -34,42 +34,6 @@ function move(event) {
x++;
setPosition();
}
// chr = {
// updown: function () {
// var y = parseInt(getComputedStyle(player).top);
// if (k == 'ArrowUp' || k == 'z') {
// y -= 10;
// if ( y == -10 ){
// y += 10;
// }
// } else if (k == 'ArrowDown' || k == 's') {
// y += 10;
// if ( y == 460 ){
// y -= 10;
// }
// }
// return y;
// },
//
// leftright: function () {
// var x = parseInt(getComputedStyle(player).left);
// if (k == 'ArrowLeft' || k == 'q') {
// x -= 10;
// if ( x == -10 ){
// x += 10;
// }
// } else if (k == 'ArrowRight' || k == 'd') {
// x += 10;
// if ( x == 1160 ){
// x -= 10;
// }
// }
// return x;
// }
// };
//
// player.style.top = (chr.updown()) + "px";
// player.style.left = (chr.leftright()) + "px";
}
document.addEventListener('keydown', move, false);

View File

@ -1,17 +1,242 @@
<html>
<head>
<meta charset="UTF-8">
<title>de_tank</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<section class="header">
<h1>de_tank</h1>
</section>
<section class="map">
<div id="block1" class="block"></div>
</section>
<section class="header">
<h1>de_tank</h1>
</section>
<div class="container">
<section class="map">
<div class="line line-1">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-2">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-3">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-4">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-5">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-6">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-7">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-8">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-9">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-10">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
</section>
</div>
</body>
<script src="assets/js/script.js"></script>
</html>