Initialisation Map

2017-12-08 21:14:29 +01:00 · 2017-12-08 21:14:29 +01:00 · d639fda0b0
parent 9d86626f5f
commit d639fda0b0
4 changed files with 48 additions and 55 deletions
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -0,0 +1,39 @@
+body{
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    background: #232323;
+}
+
+.header{
+    text-align: center;
+}
+
+.header h1{
+    display: inline-block;
+    font-size: 42px;
+    padding-top: 15px;
+    padding-bottom: 20px;
+    color: #fff;
+}
+
+.map{
+    width: 1170px;
+    height: 658px;
+    border: solid 3px red;
+    background: url(../img/bg_sand.png) repeat;
+    position: absolute;
+    left: 0; 
+    right: 0; 
+    margin-left: auto; 
+    margin-right: auto;
+}
+
+.block{
+    height: 20px;
+    width: 20px;
+    background: green;
+    position: absolute;
+    left: 50px;
+    top: 50px;
+}
--- a/assets/img/bg_alpha.png
+++ b/assets/img/bg_alpha.png
--- a/assets/img/bg_sand.png
+++ b/assets/img/bg_sand.png
--- a/index.html
+++ b/index.html
@ -1,63 +1,17 @@
 <html>
 <head>
    <meta charset="UTF-8">
-    <title>Tank Breaker</title>
+    <title>de_tank</title>
    <link rel="stylesheet" href="./assets/css/style.css">

-    <style>
-        body {
-            margin:0;
-        }
-        
-        div.jeu {
-            width: 1170px;
-            height: 658px;
-        }
-        
-        canvas {
-            width: 100%;
-            height: 100%;
-            background: #eee;
-        }
-    </style>
 </head>
 <body>
-    <div class="jeu"></div>
-    
-    <script src="./assets/js/script.js"></script>
-   
-    <script>
-        var keys = {
-            'player1': ['z','q','s','d'],
-            'player2': ['ArrowUp','ArrowLeft','ArrowDown','ArrowRight']
-        };
-        
-        window.addEventListener("keydown", function(e){
-            console.log(e.key);
-        });
-        
-        var game = document.getElementById("game");
-        
-        function startGame() {
-            myGamePiece = new component(30, 30, "red", 10, 120);
-            myGamePiece.gravity = 0.05;
-            myScore = new component("30px", "Consolas", "black", 280, 40, "text");
-            myGameArea.start();
-        }
-
-        var myGameArea = {
-            canvas : document.createElement("canvas"),
-            start : function() {
-                this.canvas.width = 480;
-                this.canvas.height = 270;
-                this.context = this.canvas.getContext("2d");
-                document.body.insertBefore(this.canvas, document.body.childNodes[0]);
-                this.frameNo = 0;
-            },
-            clear : function() {
-                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-            }
-        }
-    </script>
+<section class="header">
+    <h1>de_tank</h1>
+</section>
+<section class="map">
+    <div class="block"></div>
+</section>
 </body>
+<script src="assets/js/script.js"></script>
 </html>