Skip to content

Fix sprites position because the sprite image on static.codedojo.ru server was updated. #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MyMarvel wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix sprites position because the sprite image on static.codedojo.ru server was updated. #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
57 changes: 36 additions & 21 deletions src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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,
Expand Down Expand Up @@ -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
];
[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],
];
41 changes: 15 additions & 26 deletions src/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down