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
<!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> |