From fcb52b80abf800b00510122ea533b4ccd61a9e4d Mon Sep 17 00:00:00 2001 From: Nikita Petrov Date: Sat, 17 Sep 2022 20:19:04 +0300 Subject: [PATCH] Fix sprites position because the sprite image on static.codedojo.ru server was updated. --- README.md | 10 +++++++-- src/constants.js | 57 ++++++++++++++++++++++++++++++------------------ src/view.js | 41 +++++++++++++--------------------- 3 files changed, 59 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 6e41b6e..ffeb279 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,11 @@ # Battle City -Спрайт: https://static.codedojo.ru/projects/battlecity/sprite.png +## Installation -Спасибо @vrobik за прозрачный спрайт. +Download a sprite file from https://static.codedojo.ru/projects/battlecity/sprite.png (thanks @vrobik for it) and place it under assets/ subfolder, so you should have something like battlecity/assets/sprite.png + +Then make the project's folder be accessible from any web server, like apache/nginx/whatever. For example, you can install a 'Live Server' extention for VS Code, and then do a right click inside the index.html -> Open with Live Server + +## Troubleshooting + +If you got a CORS policy error in console, you need to use a web server instead of just opening the file in the browser (the path should be like http://whatever, not file://whatever) diff --git a/src/constants.js b/src/constants.js index 61c8e03..8632eb8 100644 --- a/src/constants.js +++ b/src/constants.js @@ -31,8 +31,8 @@ export const BASE_POSITION = [6 * UNIT_SIZE, 12 * UNIT_SIZE]; export const BASE_WIDTH = UNIT_SIZE; export const BASE_HEIGHT = UNIT_SIZE; export const BASE_SPRITES = [ - [8 * UNIT_SIZE, 8 * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE], - [9 * UNIT_SIZE, 8 * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE] + [11 * UNIT_SIZE, 7.5 * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE], + [12 * UNIT_SIZE, 7.5 * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE] ]; export const BRICK_WALL_SPRITES = [ @@ -42,18 +42,18 @@ export const BRICK_WALL_SPRITES = [ [11 * UNIT_SIZE, 4 * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE], // bottom 8/16 [12 * UNIT_SIZE, 4 * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE], // left 8/16 [8 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // 1/4 - [13 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top left 3/4 - [13.5 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top right 3/4 - [13.5 * UNIT_SIZE, 4.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom right 3/4 - [13 * UNIT_SIZE, 4.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom left 3/4 - [14 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top 2/4 - [14.5 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // right 2/4 - [14.5 * UNIT_SIZE, 4.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom 2/4 - [14 * UNIT_SIZE, 4.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // left 2/4 - [15 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top left 1/4 - [15.5 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top right 1/4 - [15.5 * UNIT_SIZE, 4.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom right 1/4 - [15 * UNIT_SIZE, 4.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom left 1/4 + [8.5 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top left 3/4 + [9 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top right 3/4 + [9.5 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom right 3/4 + [10 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom left 3/4 + [12 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top 2/4 + [11.5 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // right 2/4 + [11 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom 2/4 + [10.5 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // left 2/4 + [12.5 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top left 1/4 + [13 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top right 1/4 + [13.5 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom right 1/4 + [14 * UNIT_SIZE, 4 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom left 1/4 ]; export const BRICK_WALL_SPRITE_MAP = { '0': 5, @@ -131,10 +131,25 @@ export const TANK_EXPLOSION_SPRITES = [ ]; export const STEEL_WALL_SPRITES = [ - [8 * UNIT_SIZE, 5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // 1/4 - [8 * UNIT_SIZE, 5 * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE], // full - [9 * UNIT_SIZE, 5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top - [10 * UNIT_SIZE, 5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // right - [11 * UNIT_SIZE, 5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom - [12 * UNIT_SIZE, 5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE] // left -]; \ No newline at end of file + [8 * UNIT_SIZE, 6.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // 1/4 + [8 * UNIT_SIZE, 6.5 * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE], // full + [9 * UNIT_SIZE, 6.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // top + [10 * UNIT_SIZE, 6.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // right + [11 * UNIT_SIZE, 6.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // bottom + [12 * UNIT_SIZE, 6.5 * UNIT_SIZE, TILE_SIZE, TILE_SIZE] // left +]; + +export const STAGE_NUMBER_SPRITES = [ + [23.5 * UNIT_SIZE, 11.5 * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE], // flag + [19 * UNIT_SIZE, 5.25 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // stage number +]; + +export const PLAYER1_LIVES_SPRITES = [ + [23.5 * UNIT_SIZE, 8.5 * UNIT_SIZE, UNIT_SIZE, TILE_SIZE], // 1P + [23.5 * UNIT_SIZE, 9 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // tank icon + [19.5 * UNIT_SIZE, 5.25 * UNIT_SIZE, TILE_SIZE, TILE_SIZE], // number +]; + +export const ENEMY_TANK_ICONS_SPRITES = [ + [18 * UNIT_SIZE, 5.5 * UNIT_SIZE, TILE_SIZE, UNIT_SIZE], +]; diff --git a/src/view.js b/src/view.js index 32a34f6..3d91882 100644 --- a/src/view.js +++ b/src/view.js @@ -1,4 +1,11 @@ -import { NUMBER_OF_UNITS, UNIT_SIZE, TILE_SIZE } from './constants.js'; +import { + NUMBER_OF_UNITS, + UNIT_SIZE, + TILE_SIZE, + STAGE_NUMBER_SPRITES, + ENEMY_TANK_ICONS_SPRITES, + PLAYER1_LIVES_SPRITES, +} from './constants.js'; const PLAYFIELD_X = UNIT_SIZE; const PLAYFIELD_Y = UNIT_SIZE; @@ -110,14 +117,11 @@ export default class View { for (let i = 0, x = 0, y = 0; i < enemyTanks.length; i++) { this.context.drawImage( this.sprite.image, - UNIT_SIZE * 18, - UNIT_SIZE * 5.5, - TILE_SIZE, - TILE_SIZE, + ...ENEMY_TANK_ICONS_SPRITES[0], PANEL_X + x * TILE_SIZE + 16, PANEL_Y + y * TILE_SIZE + 16, TILE_SIZE, - TILE_SIZE + UNIT_SIZE ); if (x === 1) { @@ -132,10 +136,7 @@ export default class View { renderPlayer1Lives(player1) { this.context.drawImage( this.sprite.image, - UNIT_SIZE * 16, - UNIT_SIZE * 6, - UNIT_SIZE, - TILE_SIZE, + ...PLAYER1_LIVES_SPRITES[0], PANEL_X + TILE_SIZE, PANEL_Y + PANEL_HEIGHT * 0.5, UNIT_SIZE, @@ -144,10 +145,7 @@ export default class View { this.context.drawImage( this.sprite.image, - UNIT_SIZE * 16, - UNIT_SIZE * 6.5, - TILE_SIZE, - TILE_SIZE, + ...PLAYER1_LIVES_SPRITES[1], PANEL_X + TILE_SIZE, PANEL_Y + PANEL_HEIGHT * 0.5 + TILE_SIZE, TILE_SIZE, @@ -156,10 +154,7 @@ export default class View { this.context.drawImage( this.sprite.image, - UNIT_SIZE * 19.5, - UNIT_SIZE * 5, - TILE_SIZE, - TILE_SIZE, + ...PLAYER1_LIVES_SPRITES[2], PANEL_X + TILE_SIZE * 2, PANEL_Y + PANEL_HEIGHT * 0.5 + TILE_SIZE, TILE_SIZE, @@ -170,10 +165,7 @@ export default class View { renderStageNumber(stage) { this.context.drawImage( this.sprite.image, - UNIT_SIZE * 18, - UNIT_SIZE * 6, - UNIT_SIZE, - UNIT_SIZE, + ...STAGE_NUMBER_SPRITES[0], PANEL_X + TILE_SIZE, PANEL_Y + PANEL_HEIGHT * 0.75, UNIT_SIZE, @@ -182,10 +174,7 @@ export default class View { this.context.drawImage( this.sprite.image, - UNIT_SIZE * 19, - UNIT_SIZE * 5, - TILE_SIZE, - TILE_SIZE, + ...STAGE_NUMBER_SPRITES[1], PANEL_X + TILE_SIZE * 2, PANEL_Y + PANEL_HEIGHT * 0.75 + UNIT_SIZE, TILE_SIZE,