para/project-2021-07-17
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add map

Browse source
This commit is contained in:
Zutatensuppe 2021-07-18 21:09:47 +02:00
parent c57aeacc98
commit 0cd89ae0eb
12 changed files with 42160 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/bridge_sprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 215 B

BIN
src/assets/grass2_sprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 140 B

BIN
src/assets/grass_sprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 B

BIN
src/assets/map.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/shore_sprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 117 B

BIN
src/assets/water2_sprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 114 B

BIN
src/assets/water_sprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 129 B

BIN
src/assets/wood_sprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 140 B

3
src/index.html
View file

@ -6,7 +6,8 @@
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
</head> </head>
<body> <body>
<script src="lib/pixi/pixi.v5.3.10.min.js"></script> <script src="lib/pixi/pixi.v5.3.10.js"></script>
<!-- <script src="lib/pixi/pixi.v5.3.10.min.js"></script> -->
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

1
src/lib/pixi/pixi.js.map Normal file
View file

File diff suppressed because one or more lines are too long

41997
src/lib/pixi/pixi.v5.3.10.js Normal file
View file

File diff suppressed because it is too large Load diff

190
src/main.js
View file

@ -15,6 +15,8 @@ const app = new PIXI.Application({
document.body.appendChild(app.view); document.body.appendChild(app.view);
var container = new PIXI.Container(); var container = new PIXI.Container();
var mapContainer = new PIXI.Container();
var staticsContainer = new PIXI.Container();
var hud = new PIXI.Container(); var hud = new PIXI.Container();
var endC = new PIXI.Container(); var endC = new PIXI.Container();
endC.visible = false endC.visible = false
@ -27,6 +29,8 @@ const PLAYER_ANIM_SPEED_STILL_2 = .1
const resources = PIXI.loader.resources const resources = PIXI.loader.resources
var player, state, objects, maxX, lastKey, PTS_WATER, PTS_COWS, END_TXT var player, state, objects, maxX, lastKey, PTS_WATER, PTS_COWS, END_TXT
var HALF_PLAYER_WIDTH = 25
var HALF_PLAYER_HEIGHT = 25
var playerCharging var playerCharging
var attackAnims var attackAnims
var lanterns var lanterns
@ -53,6 +57,14 @@ PIXI.loader
.add("assets/charging6.png") .add("assets/charging6.png")
.add("assets/charging7.png") .add("assets/charging7.png")
.add("assets/charging8.png") .add("assets/charging8.png")
.add("assets/map.png")
.add("assets/grass_sprite.png")
.add("assets/grass2_sprite.png")
.add("assets/water_sprite.png")
.add("assets/water2_sprite.png")
.add("assets/wood_sprite.png")
.add("assets/bridge_sprite.png")
.add("assets/shore_sprite.png")
.load(setup); .load(setup);
@ -77,20 +89,90 @@ function createAttackAnim (player, size) {
return attackAnim return attackAnim
} }
const MAP_GRASS = 0
const MAP_BRIDGE = 1
const MAP_WATER = 2
const MAP_WOOD = 3
const MAP_SHORE = 4
const MAP_WATER_2 = 5
const MAP_GRASS_2 = 6
function parseMap () {
let sprite = new PIXI.Sprite(resources['assets/map.png'].texture)
let renderer = PIXI.autoDetectRenderer();
let renderTexture = PIXI.RenderTexture.create({
width: sprite.width,
height: sprite.height,
});
renderer.render(sprite, renderTexture);
let map = []
let pixels = renderer.extract.pixels(renderTexture)
for (let i = 0; i < sprite.width * sprite.height; i++) {
let [r,g,b,a] = [
pixels[i*4 + 0],
pixels[i*4 + 1],
pixels[i*4 + 2],
pixels[i*4 + 3],
]
if (r === 106 && g === 190 && b === 48) {
map.push(MAP_GRASS)
} else if (r === 102 && g === 57 && b === 49) {
map.push(MAP_BRIDGE)
} else if (r === 99 && g === 155 && b === 255) {
map.push(MAP_WATER)
} else if (r === 50 && g === 60 && b === 57) {
map.push(MAP_WOOD)
} else if (r === 238 && g === 195 && b === 154) {
map.push(MAP_SHORE)
} else if (r === 91 && g === 110 && b === 225) {
map.push(MAP_WATER_2)
} else if (r === 75 && g === 105 && b === 47) {
map.push(MAP_GRASS_2)
} else {
console.log(r,g,b,a)
}
}
return [map, sprite.width, sprite.height]
}
var map, mapWidth, mapHeight, mapSprites
function setup () { function setup () {
[map, mapWidth, mapHeight] = parseMap()
const cowTexture = resources['assets/cow.png'].texture const cowTexture = resources['assets/cow.png'].texture
const waterTexture = resources['assets/water.png'].texture const waterTexture = resources['assets/water.png'].texture
const vodkaguyTexture = resources['assets/vodkaguy.png'].texture const vodkaguyTexture = resources['assets/vodkaguy.png'].texture
const grassTexture = resources['assets/grass.png'].texture const grassTexture = resources['assets/grass.png'].texture
PTS_WATER = new PIXI.Text('0/20', {fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); PTS_WATER = new PIXI.Text('', {fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'});
PTS_COWS = new PIXI.Text('0/20', {fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); PTS_COWS = new PIXI.Text('', {fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'});
END_TXT = new PIXI.Text('YOU WIN!!!', {fontFamily : 'Arial', fontSize: 24, fill : 0xffff00, align : 'center'}); END_TXT = new PIXI.Text('YOU WIN!!!', {fontFamily : 'Arial', fontSize: 24, fill : 0xffff00, align : 'center'});
END_TXT.visible = false END_TXT.visible = false
attackAnims = [] attackAnims = []
const mapToSprite = {
[MAP_GRASS]: 'assets/grass_sprite.png',
[MAP_GRASS_2]: 'assets/grass2_sprite.png',
[MAP_WATER]: 'assets/water_sprite.png',
[MAP_WATER_2]: 'assets/water2_sprite.png',
[MAP_WOOD]: 'assets/wood_sprite.png',
[MAP_BRIDGE]: 'assets/bridge_sprite.png',
[MAP_SHORE]: 'assets/shore_sprite.png',
}
mapSprites = []
for (let i in map) {
const s = new PIXI.Sprite(resources[mapToSprite[map[i]]].texture)
s.x = TARGET_AREA_WIDTH + (i % mapWidth) * s.width
s.y = Math.floor(i / mapWidth) * s.width
s.type = map[i]
mapSprites.push(s)
mapContainer.addChild(s)
}
playerCharging = new PIXI.AnimatedSprite([ playerCharging = new PIXI.AnimatedSprite([
resources['assets/charging1.png'].texture, resources['assets/charging1.png'].texture,
resources['assets/charging2.png'].texture, resources['assets/charging2.png'].texture,
@ -223,14 +305,15 @@ function setup () {
objects = [] objects = []
maxX = 0 maxX = 0
const cows = 20
const waters = 20 const offset = 30
for (let i = 0; i < cows; i++) { let i = 0
const cow = new PIXI.Sprite(cowTexture) let cow
do {
cow = new PIXI.Sprite(cowTexture)
cow.anchor.x = 0.5 cow.anchor.x = 0.5
cow.anchor.y = 0.5 cow.anchor.y = 0.5
const offset = 30
cow.x = player.x + player.width + i * (cow.width + offset) cow.x = player.x + player.width + i * (cow.width + offset)
cow.y = Math.floor(Math.random() * (HEIGHT - cow.height) + cow.height/2) cow.y = Math.floor(Math.random() * (HEIGHT - cow.height) + cow.height/2)
@ -245,14 +328,16 @@ function setup () {
objects.push(cow) objects.push(cow)
maxX = Math.max(maxX, cow.x + cow.width) maxX = Math.max(maxX, cow.x + cow.width)
} i++
} while ((cow.x + cow.width + offset) < (TARGET_AREA_WIDTH + mapWidth * 10))
for (let i = 0; i < waters; i++) { i = 0
const water = new PIXI.Sprite(waterTexture) let water
do {
water = new PIXI.Sprite(waterTexture)
water.anchor.x = 0.5 water.anchor.x = 0.5
water.anchor.y = 0.5 water.anchor.y = 0.5
const offset = 30
water.x = player.x + player.width + i * (water.width + offset) water.x = player.x + player.width + i * (water.width + offset)
water.y = Math.floor(Math.random() * (HEIGHT - water.height) + water.height/2) water.y = Math.floor(Math.random() * (HEIGHT - water.height) + water.height/2)
@ -266,9 +351,10 @@ function setup () {
objects.push(water) objects.push(water)
maxX = Math.max(maxX, water.x + water.width) maxX = Math.max(maxX, water.x + water.width)
} i++
} while ((water.x + water.width + offset) < (TARGET_AREA_WIDTH + mapWidth * 10))
maxX = TARGET_AREA_WIDTH + mapWidth * 10
grass.x = maxX grass.x = maxX
// 0 TAW maxX // 0 TAW maxX
@ -300,8 +386,8 @@ function setup () {
top.y = top.height /2 top.y = top.height /2
lanterns.push(bottom) lanterns.push(bottom)
lanterns.push(top) lanterns.push(top)
container.addChild(bottom) staticsContainer.addChild(bottom)
container.addChild(top) staticsContainer.addChild(top)
} }
container.addChild(player) container.addChild(player)
@ -391,6 +477,8 @@ function setup () {
quad = new PIXI.Mesh(geometry, shader); quad = new PIXI.Mesh(geometry, shader);
quad.position.set(400, 300) quad.position.set(400, 300)
app.stage.addChild(mapContainer);
app.stage.addChild(staticsContainer);
app.stage.addChild(container); app.stage.addChild(container);
app.stage.addChild(quad); app.stage.addChild(quad);
app.stage.addChild(hud); app.stage.addChild(hud);
@ -512,6 +600,7 @@ function attack(name, ...args) {
container.addChild(anim) container.addChild(anim)
} }
} }
function play(delta) { function play(delta) {
const _now = now() const _now = now()
// check if any tap was ended // check if any tap was ended
@ -541,6 +630,9 @@ function play(delta) {
} while (player.taps.length > 0) } while (player.taps.length > 0)
} }
let playerXBefore = player.x
let playerYBefore = player.y
// move only allowed when not tapping // move only allowed when not tapping
// if (!tapping) { // if (!tapping) {
player.x += player.vx player.x += player.vx
@ -574,25 +666,59 @@ function play(delta) {
} else { } else {
player.removeChild(playerCharging) player.removeChild(playerCharging)
} }
// }
if (player.x - HALF_PLAYER_WIDTH < TARGET_AREA_WIDTH) {
container.x = -(player.x + player.width/2 - WIDTH/2) player.x = TARGET_AREA_WIDTH + HALF_PLAYER_WIDTH
if (player.x - player.width/2 < TARGET_AREA_WIDTH) {
player.x = TARGET_AREA_WIDTH + player.width/2
} }
if (player.y - player.height/2 < 0) { if (player.y - HALF_PLAYER_HEIGHT < 0) {
player.y = player.width/2 player.y = HALF_PLAYER_HEIGHT
} }
if (player.x + player.width/2 > maxX) { if (player.x + HALF_PLAYER_WIDTH > maxX) {
player.x = maxX - player.width/2 player.x = maxX - HALF_PLAYER_WIDTH
} }
if (player.y + player.height/2 > HEIGHT) { if (player.y + HALF_PLAYER_HEIGHT > HEIGHT) {
player.y = HEIGHT - player.width/2 player.y = HEIGHT - HALF_PLAYER_HEIGHT
} }
let playerRect = {
x: player.x - player.width / 4,
y: player.y - player.height / 4,
width: HALF_PLAYER_WIDTH,
height: HALF_PLAYER_HEIGHT,
}
for (let s of mapSprites) {
if (s.type === MAP_WATER && hitTestRectangle(playerRect, s)) {
// player overlaps with the tile
let tmp = {
x: player.x - player.width / 4,
y: playerYBefore - player.height / 4,
width: HALF_PLAYER_WIDTH,
height: HALF_PLAYER_HEIGHT,
}
if (!hitTestRectangle(tmp, s)) {
player.y = playerYBefore
} else {
let tmp = {
x: playerXBefore - player.width / 4,
y: player.x - player.height / 4,
width: HALF_PLAYER_WIDTH,
height: HALF_PLAYER_HEIGHT,
}
if (!hitTestRectangle(tmp, s)) {
player.x = playerXBefore
} else {
player.y = playerYBefore
player.x = playerXBefore
}
}
}
}
container.x = -(player.x + HALF_PLAYER_WIDTH - WIDTH/2)
mapContainer.x = container.x
staticsContainer.x = container.x
for (const c of objects) { for (const c of objects) {
if (c.type === 'cow') { if (c.type === 'cow') {
for (const w of objects) { for (const w of objects) {
@ -694,6 +820,8 @@ function play(delta) {
let ptsWater = 0 let ptsWater = 0
let ptsCows = 0 let ptsCows = 0
let totalWater = 0
let totalCows = 0
for (const obj of objects) { for (const obj of objects) {
if (obj.ticks > 0) { if (obj.ticks > 0) {
obj.rotation += Math.min(obj.ticks, 10) * obj.vrot obj.rotation += Math.min(obj.ticks, 10) * obj.vrot
@ -718,6 +846,7 @@ function play(delta) {
if (obj.type === 'cow') { if (obj.type === 'cow') {
totalCows ++
if (obj.x > maxX) { if (obj.x > maxX) {
ptsCows ++ ptsCows ++
} }
@ -730,6 +859,7 @@ function play(delta) {
} }
if (obj.type === 'water') { if (obj.type === 'water') {
totalWater ++
if (obj.x < TARGET_AREA_WIDTH) { if (obj.x < TARGET_AREA_WIDTH) {
ptsWater ++ ptsWater ++
} }
@ -740,11 +870,11 @@ function play(delta) {
} }
} }
PTS_WATER.text = `${ptsWater}/20` PTS_WATER.text = `${ptsWater}/${totalWater}`
PTS_COWS.text = `${ptsCows}/20` PTS_COWS.text = `${ptsCows}/${totalCows}`
} }
if (ptsWater >= 20 && ptsCows >= 20) { if (ptsWater >= totalWater && ptsCows >= totalCows) {
state = end state = end
} }