Purple Port

Since we’ve been trying to learn React JS, I decided to make a website login using it!!

Made the login template

LoginRegister.jsx

import React from 'react'
import './LoginRegister.css';

const LoginRegister = () => {
    return (
        <div className='wrapper'>
            <div className="form-box-login">
                <form action="">
                    <h1>Login</h1>
                    <div className="input-box">
                        <input type="text"
                        placeholder='Username' required />
                    </div>
                    <div className="input-box">
                        <input type="password"
                        placeholder='Password' required />
                    </div>

                    <div className="remember-forgot">
                        <label><input type="checkbox" />Remember me</label>
                        <a href="#">Forgot Password?</a>
                    </div>

                    <button type="submit">Log in</button>

                    <div className="register-link">
                        <p>Don't have an account? <a
                            href="#">Register</a></p>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default LoginRegister

index.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body {
  font-family: "Poppins", sans-serif;
}

app.js

import LoginRegister from './components/LoginResgister/LoginRegister';

function App() {
  return (
    <div>
      <LoginRegister />
    </div>
  );
}

export default App;

I tweaked up app.js and took out all the sample code from index.css and put the stuff needed for the font we’re using. Then I added login inputs for username and password.

Username

<div className="input-box">
                        <input type="text"
                        placeholder='Username' required />
                    </div>

Password

added the ability to move the player’s car left/right using the arrow keys.

if event.type == KEYDOWN:
            
            if event.key == K_LEFT and player.rect.center[0] > left_lane:
                player.rect.x -= 100
            elif event.key == K_RIGHT and player.rect.center[0] < right_lane:
                player.rect.x += 100

result:

left lane

and right lane (also added other cars. i’ll get to that later)

Made the crash image pop up determining where the player crashed into the npc car

# check if there's a side swipe collision after changing lanes
            for vehicle in vehicle_group:
                if pygame.sprite.collide_rect(player, vehicle):
                    
                    gameover = True
                    
                    # place the player's car next to other vehicle
                    # and determine where to position the crash image
                    if event.key == K_LEFT:
                        player.rect.left = vehicle.rect.right
                        crash_rect.center = [player.rect.left, (player.rect.center[1] + vehicle.rect.center[1]) / 2]
                    elif event.key == K_RIGHT:
                        player.rect.right = vehicle.rect.left
                        crash_rect.center = [player.rect.right, (player.rect.center[1] + vehicle.rect.center[1]) / 2]

crashing into the left side of a car

crashing into the right side

and crashing into the car from behind

nice

list for the different car images:

image_filenames = ['pickup_truck.png', 'semi_trailer.png', 'taxi.png', 'van.png']

*FINISH LATER (or when you get home)

Made the screen green for da grass 🙂

 #draw the grass
    screen.fill(green)

so green

Added a huge gray line on the screen(it’s the road)

#draw the road
    pygame.draw.rect(screen, gray, road)

wow so cool

ANNNND made the edge markers of the road :))

# marker size
marker_width = 10
marker_height = 50

# draw edge markers
    pygame.draw.rect(screen, yellow, left_edge_marker)
    pygame.draw.rect(screen, yellow, right_edge_marker)

RESULT:

Added the lane markers and created the player’s car

line markers

lane_marker_move_y += speed *2
    if lane_marker_move_y >= marker_height * 2:
        lane_marker_move_y = 0
        
    for y in range(marker_height * -2, HEIGHT, marker_height * 2):
        pygame.draw.rect(screen, white, (left_lane + 45, 
        y + lane_marker_move_y, marker_width, marker_height))
        
        pygame.draw.rect(screen, white, (center_lane + 45,
        y + lane_marker_move_y, marker_width, marker_height))

player car (inherits from the Vehicle class)

class PlayerVehicle(Vehicle):
    
    def __init__(self, x, y):
        image = pygame.image.load('images//car.png')
        super().__init__(image, x, y)

vehicle class

class Vehicle(pygame.sprite.Sprite):
    def __init__(self, image, x, y):
        pygame.sprite.Sprite.__init__(self)

        # scale image down to fit in the lane
        image_scale = 45 / image.get_rect().width
        new_width = image.get_rect().width * image_scale
        new_height = image.get_rect().height * image_scale
        self.image = pygame.transform.scale(image, 
        (new_width, new_height))
        
        self.rect = self.image.get_rect()
        self.rect.center = [x, y]
    

RESULT

ok that’s it byeeee

So my main.py file for the racing game just pooped out for no reason and I can’t open it back up without getting an error. The only thing I am able to open is utils.py and the images. That’s it.

So, I copied the code from github and started off from where I think I left off.

Added the images for the game

main.py

GRASS = scale_image(pygame.image.load("imgs/grass.jpg"), 2.5)
TRACK = scale_image(pygame.image.load("imgs/track.png"), 0.9)

TRACK_BORDER = scale_image(pygame.image.load("imgs/track-border.png"), 0.9)

RED_CAR = scale_image(pygame.image.load("imgs/red-car.png"), 0.55)
GREY_CAR = scale_image(pygame.image.load("imgs/grey-car.png"), 0.55)

WIDTH, HEIGHT = TRACK.get_width(), TRACK.get_height()
WIN = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption("Racing Game!")

made a class called AbstractCar to initialize the velocity, angle and acceleration. PlayerCar inherits from this class.

main.py

class AbstractCar:
    def __init__(self, max_vel, rotation_vel):
        self.img = self.IMG
        self.max_vel = max_vel
        self.vel = 0
        self.rotation_vel = rotation_vel
        self.angle = 0
        self.x, self.y = self.START_POS
        self.acceleration = 0.1

    def rotate(self, left=False, right=False):
        if left:
            self.angle += self.rotation_vel
        elif right:
            self.angle -= self.rotation_vel

    def draw(self, win):
        blit_rotate_center(win, self.img, (self.x, self.y), self.angle)

    def move_forward(self):
        self.vel = min(self.vel + self.acceleration, self.max_vel)
        self.move()

    def move(self):
        radians = math.radians(self.angle)
        vertical = math.cos(radians) * self.vel
        horizontal = math.sin(radians) * self.vel

        self.y -= vertical
        self.x -= horizontal

    def reduce_speed(self):
        self.vel = max(self.vel - self.acceleration / 2, 0)
        self.move()

PlayerCar is MUCH shorter and only has the image of the car that we need and the start position of the car.

class PlayerCar(AbstractCar):
    IMG = GREY_CAR
    START_POS = (180, 200)

and a draw function that draws the images, and the player car on the screen.

def draw(win, images, player_car):
    for img, pos in images:
        win.blit(img, pos)

    player_car.draw(win)
    pygame.display.update()

made while loop function that starts and quits the game (when the user clicks the x) and also has the keys to control the player car.

while run:
    clock.tick(FPS)

    draw(WIN, images, player_car)

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False
            break

    keys = pygame.key.get_pressed()
    moved = False

    if keys[pygame.K_a]:
        player_car.rotate(left=True)
    if keys[pygame.K_d]:
        player_car.rotate(right=True)
    if keys[pygame.K_w]:
        moved = True
        player_car.move_forward()

    if not moved:
        player_car.reduce_speed()


pygame.quit()

result:

You can move it but these dang computers don’t have screen recording (curse you IT!!!!)