-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
135 lines (102 loc) · 4.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html>
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pixi/tilemap@latest/dist/pixi-tilemap.umd.js"></script>
<script src="//rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
</head>
<body>
<script>
var resolutionX = 800;
var resolutionY = 600;
var tileSizeX = 128;
var tileSizeY = 128;
var stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);
var app = new PIXI.Application(resolutionX, resolutionY);
document.body.appendChild(app.view);
var groundTiles;
var playerTankSprite;
var playerOffsetX = (resolutionX / 2 - 24);
var playerOffsetY = (resolutionY / 2 - 24);
var player = {
x: 0,
y: 0
};
const loader = PIXI.Loader.shared;
loader
.add([
"imgs/imgGround.png",
"imgs/imgTanks.png",
"imgs/imgBuildings.png"
])
.load(setup);
function setup() {
// Create our tile map based on the ground texture
groundTiles = new PIXI.tilemap.CompositeRectTileLayer(0, PIXI.utils.TextureCache['imgs/imgGround.png']);
drawTiles();
app.stage.addChild(groundTiles);
// Place a tank in the middle of the texture the tank sprite never moves
// Instead we move the tile map around the player in out game loop
var tankTexture = new PIXI.Texture(
PIXI.utils.TextureCache['imgs/imgTanks.png'],
new PIXI.Rectangle(0 * 48, 0, 48, 48)
);
playerTankSprite = new PIXI.Sprite(tankTexture);
playerTankSprite.x = playerOffsetX;
playerTankSprite.y = playerOffsetY;
app.stage.addChild(playerTankSprite);
gameLoop();
}
function drawTiles() {
var numberOfTiles = parseInt(resolutionX / tileSizeX) + 10;
// We need to calculate this in order to prevent the tile looking "jumpy" when it's redrawn
var groundOffsetX = player.x % 128; // Number of tank tiles on x axis
var groundOffsetY = player.y % 128; // Number of tank tiles on y axis
for (var i = -numberOfTiles; i <= numberOfTiles; i++) {
for (var j = -numberOfTiles; j <= numberOfTiles; j++) {
groundTiles.addFrame('imgs/imgGround.png', i * tileSizeX, j * tileSizeY);
}
}
// We'll use these later to animate the building
var animateX = 1;
var animateY = 0;
/**
* We'll draw the building off the players viewport to start to give it the impression we're driving past
* @type {number}
*/
var buildingTexture = new PIXI.Texture(
PIXI.utils.TextureCache['imgs/imgBuildings.png'],
new PIXI.Rectangle(0, 0, 144, 144, 144)
);
groundTiles.addFrame(buildingTexture, (2 * 128), (4 * 128) * -1, animateX, animateY);
groundTiles.position.set(playerOffsetX + player.x - groundOffsetX, playerOffsetY + player.y - groundOffsetY);
}
var tick = new Date().getTime();
var tileAnim = 0;
var tileAnimationTick = 0;
function gameLoop() {
stats.begin();
tick = new Date().getTime();
if (player.y % (10 * tileSizeY) === -0) {
console.log("redrawing");
drawTiles();
}
// Make it look like the tank is driving forwards by moving the tiles
player.y -= 4;
groundTiles.pivot.set(player.x, player.y);
app.renderer.plugins.tilemap.tileAnim[0] = tileAnim * 144;
if (tick > tileAnimationTick) {
tileAnimationTick = tick + 300;
tileAnim = tileAnim + 1;
if (tileAnim >= 3) {
tileAnim = 0;
}
}
stats.end();
requestAnimationFrame(gameLoop);
}
</script>
</body>
</html>