Data Types In JavaScript

There are six different data types in JavaScript: Strings, integers, floats (decimal numbers), Boolean, null (which is “None” in Python), undefined and Symbol.

Strings

Strings are words (or numbers) that are surrounded by quotation marks (“”).

Here’s an example of one in JavaScript:

const name = "Zende";

As you can see, the word Zende is the string because it has quotes around it.

Output:

*the variable const is used so that we can’t change the value of the variable. if we were to try to change the value of name, we would get an error message say we’re not allowed.

Numbers

Here’s an example of an integer:

const age = 16;

And example of a float:

const temp = 98.6;

BOOLEAN

Here’s an example of a boolean:

const hasKis = true;

This makes the variable true. if we were to type false, it will make it false.

Null

Null, which is the same as “None” in python, happens when a variable doesn’t exist yet.

Here’s an example:

const homeRoom = null;

Undefined

undefined happens when a variable exist, but isn’t defined in the program.

Here’s an example:

const kd = undefined;

Symbol

symbols variables that always have to be unique. They cannot be the same.

Here’s an example:

const id = Symbol('id');
const id2 = Symbol('id');

And those are all the data types.

More stuff to Zelda game 😁

This is a combination of what I did yesterday AND today. This blog post is gonna be big…

Made an offset to the camera!!!

class YSortCameraGroup(pygame.sprite.Group):
    def __init__(self):
        
        # general setup
        super().__init__()
        self.display_surface = pygame.display.get_surface()
        self.half_width = self.display_surface.get_size()[0] // 2
        self.half_height = self.display_surface.get_size()[1] // 2
        self.offset = pygame.math.Vector2()
    
    def custom_draw(self, player):
        
        # getting the offset
        self.offset.x = player.rect.centerx - self.half_width
        self.offset.y = player.rect.centery - self.half_height
        for sprite in self.sprites():
            offset_pos = sprite.rect.topleft - self.offset
            self.display_surface.blit(sprite.image, offset_pos)

The code creates where the camera will be “placed” on the screen. It then puts an offset – what kind of angle or area the camera – will be “placed”.

RESULT:

This only offsets the camera, but doesn’t make the camera move with the player… yet.

Added an overlap for collisions (and also made the camera move with the player).

changes the size of the rectangle (the collision) and makes it smaller or larger. The parameters “x” and “y” are the numbers that will increase or decrease the size of the hitbox.

“x” will be zero and “y” will be a certain number (-26 to be specific)

Also replaced (almost) every rect with hitbox.

Also changed the for loop in YSortCameraGroup class so that we have overlap on ALL rocks.

BEFORE:

for sprite in self.sprites():
	offset_pos = sprite.rect.topleft - self.offset
	self.display_surface.blit(sprite.image, offset_pos)

AFTER:

for sprite in sorted(self.sprites(), 
	key = lambda sprite: sprite.rect.centery):
	offset_pos = sprite.rect.topleft - self.offset
	self.display_surface.blit(sprite.image, offset_pos

RESULT:

Character overlaping behind the rock.

Character overlaping in front of the rock.

NOTE: I will add a short clip of the camera following the player, just not now (can’t screen record if the settings are blocked ˙◠˙).

PUTTING THE FLOOR MAP ON THE SCREEN (and putting the player in the middle of the map)!!!

Created the floor map of the game :

self.floor_surf = pygame.image.load('graphics//tilemap//ground.png')
self.floor_rect = self.floor_surf.get_rect(topleft = (0,0))

And drew the floor map.

floor_offset_pos = self.floor_rect.topleft - self.offset
self.display_surface.blit(self.floor_surf, floor_offset_pos)

Put the player in the middle of the map (idk if the numbers are temporary or not :/)

self.player = Player((2000,1430),
[self.visible_sprites],self.obstacle_sprites)

RESULT:

This was before I added that code to center the player.

ANNND this is after!!! There are no collisions on the plants or anything yet.

Zelda Game Problem :(

By Clear Code

The collision is currently NOT working (she keeps teleporting when you hit left). I’m trying to figure out the issue and it might be something about the vector class. I might try to figure it out at home.

UPDATE: I found out what was the problem:

I changed the “self” in the for loop and if statement to “sprite”. Self was what was making the player character teleport from one side of the screen to the other and then made the character disappear out of nowhere. Also the vector wasn’t the problem. It’s supposed to be there because we’re making a 2D game and it needs that for math or whatever (in depth info is on the pygame website Pygame Math)

Zelda type Game (with some Dark Souls Elements)

Making a python program of a Zelda type game!!!! (tutorial by Clear Code)

‘main.py’

import pygame, sys
from settings import *

class Game:
    def __init__(self):
        pygame.init()
        self.screen = pygame.display.set_mode((WIDTH, HEIGHT))
        pygame.display.set_caption('Zelda meets Dark Souls')
        self.clock = pygame.time.Clock()
        
    def run(self):
        while True:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    sys.exit()
            
            self.screen.fill('black')
            pygame.display.update()
            self.clock.tick(FPS)
            
if __name__ =='__main__':
    game = Game()
    game.run()

This is the main file (as it says in the name) that runs the game. It takes the parameters from both settings.py and debug.py. Basically the brain of the program.

‘settings.py’

WIDTH = 1280
HEIGHT = 720
FPS = 60
TILESIZE = 64

WORLD_MAP = [
['x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x'],
['x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', 'p', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', 'x', 'x', 'x', 'x', 'x', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x', 'x', 'x', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', ' ', ' ', ' ', ' ', 'x', ' ', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', ' ', ' ', ' ', 'x', 'x', 'x', 'x', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', ' ', ' ', ' ', ' ', 'x', 'x', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'x'],
['x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x']]

The settings and world map for the game. These can be changed at any time by just changing the values.

‘debug.py’

import pygame
pygame.init()
font = pygame.font.Font(None, 30)

def debug(info,y = 10, x = 10):
    display_surface = pygame.display.get_surface()
    debug_surf = font.render(str(info), True, 'White')
    debug_rect = debug_surf.get_rect(topleft = (x,y))
    pygame.draw.rect

This is for the window and everything.

Files that were added:

‘level.py’

import pygame
from settings import *
from tile import Tile
from player import Player

class Level:
    def __init(self):
        # Get the display surface
        self.display_surface = pygame.display.get_surface()
        
        '''Sprite group setup'''
        self.visible_sprites = pygame.sprite.Group()
        self.obsracles_sprites = pygame.sprite.Group()

        # sprite setup
        self.create_map()
        
    def create_map(self):
        for row_index,row in enumerate(WORLD_MAP):
            for col_index,col in enumerate(row):
                x = col_index * TILESIZE
                y = row_index * TILESIZE
                if col == 'x':
                    Tile((x,y),[self.visible_sprites])
                    
    
    def run (self):
        '''Update and draw the game'''
        self.visible_sprites.draw(self.display_surface)

Basically the core of this program. Will have all the sprites for the level (player.py and tile.py are important too, but if the levels don’t work, nor will the other files…)

’tile.py’

import pygame
from settings import *

class Tile(pygame.sprite.Sprite):
    def __init__(self, pos, groups):
        super().__init__(groups)
        self.image = pygame.image.load('../graphics/test/rock.png').convert_alpha()
        self.rect = self.image.get_rect(topleft = pos)

Will have all the info for the tiles (the x’s in settings.py) implemented in the game. Levels will display the sprites using ‘visible_sprites’.

‘player.py’

import pygame
from settings import *

class Player(pygame.sprite.Sprite):
    def __init__(self, pos, groups):
        super().__init__(groups)
        self.image = pygame.image.load('../graphics/test/player.png').convert_alpha()
        self.rect = self.image.get_rect(topleft = pos)

Same as tile.py, but with the player character. Level.py will also display the sprites there.

Result:

*Still a WIP