|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>2dgame</title>
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/app.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="root">
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-6">
|
|
|
|
|
<div id="map" :style="'width: '+(map.length*32+2)+'px;'">
|
|
|
|
|
<div class="map-row" v-for="(row, rowNumber) in viewAbleMap">
|
|
|
|
|
<span class="map-tile" v-for="(tile, tileNumber) in row" :style="getTileStyle(tile)">
|
|
|
|
|
<img :src="getPlayerSprite()" alt="" v-if="rowNumber === 7 && tileNumber === 7" id="player">
|
|
|
|
|
<!-- <img :src="getNpcSprite(map[tile.mapX][tile.mapY])" alt="" v-if="map[tile.mapX][tile.mapY] && map[tile.mapX][tile.mapY].npc" class="npc">-->
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="text-container" v-if="currentMessage" :style="'width: '+(map.length*32-10)+'px;'">
|
|
|
|
|
{{ currentMessage.text }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-6">
|
|
|
|
|
<br>
|
|
|
|
|
<input class="form-control" type="text" v-model="importJson">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="hidden" id="imageLoad">
|
|
|
|
|
<img src="img/sprites/down_0.png"/>
|
|
|
|
|
<img src="img/sprites/down_1.png"/>
|
|
|
|
|
<img src="img/sprites/up.png"/>
|
|
|
|
|
<img src="img/sprites/up_0.png"/>
|
|
|
|
|
<img src="img/sprites/up_1.png"/>
|
|
|
|
|
<img src="img/sprites/left.png"/>
|
|
|
|
|
<img src="img/sprites/left_0.png"/>
|
|
|
|
|
<img src="img/sprites/left_1.png"/>
|
|
|
|
|
<img src="img/sprites/right.png"/>
|
|
|
|
|
<img src="img/sprites/right_0.png"/>
|
|
|
|
|
<img src="img/sprites/right_1.png"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.22.0/axios.min.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="js/jquery.js"></script>
|
|
|
|
|
<script src="js/vue.js"></script>
|
|
|
|
|
<script src="vue/app.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
