2d game with map data
https://luna-development.net/2dgame/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
2.4 KiB
55 lines
2.4 KiB
4 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Abby</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>
|