#Identifier

113 messages · Page 1 of 1 (latest)

proven pollen
#

what am I looking at?

surreal glen
proven pollen
#

what is the code supposed to do?

surreal glen
proven pollen
#

ok...the code isn't really making sense. Were you testing it while writing it?

surreal glen
#

so whenever i make changes

#

it refreshed and updates the web

proven pollen
#

What's in the ball file?

surreal glen
proven pollen
#

Change the variable's name to something else

surreal glen
proven pollen
#

no

#

the other one

surreal glen
#

Okay.

#

But,

#

what line..?

#

?

proven pollen
#

The one that's giving the error?

surreal glen
proven pollen
#

what are you trying to do??

#

and who wrote that code?

surreal glen
surreal glen
proven pollen
surreal glen
#

it arent finish

proven pollen
#

run the code

surreal glen
proven pollen
surreal glen
#

im tryna get do this

#

but errors pop up

proven pollen
#

so, you are following a tutorial?

surreal glen
#

basically

proven pollen
#

can you send a link to it?

proven pollen
surreal glen
#

for hort

surreal glen
proven pollen
#

to the tutorial

surreal glen
#

https://www.youtube.com/watch?v=PeY6lXPrPaA&list=PLZlA0Gpn_vH8DWL14Wud_m8NeNNbYKOkj&index=64

YouTube
Web Dev Simplified
Beginner JavaScript Game Dev Project

Pong is the perfect beginner friendly game dev project. It has relatively simple logic which means you can focus on the basics of game dev without getting bogged down by complex logic.

📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/js-pong
JavaScript Modules Video: https://youtu.be/cRHQNNcYf6s
JavaScript Modules Arti...

▶ Play video
proven pollen
surreal glen
#

i do..

proven pollen
#

I am pretty sure it's not

surreal glen
#

there

proven pollen
#

still not

surreal glen
#

..

#

now i do

proven pollen
#

umm...no

#

Look, coding is less about copying code, but more about understanding it. You are not going to learn anything if you blindly copy the code

surreal glen
#

im just going through a tutorial

#

learning the basics of it

#

normally at the end i add comments on which part is which

#

and what it does

proven pollen
# surreal glen learning the basics of it

That's not the right way of learning it. Learn the basics first, and then you can watch someone build a project. You will understand it better and see how things fall in place.

surreal glen
#

this is what im mainly stuck on,

image.png
proven pollen
#

why are you making a request to a url?

#

Wait, what did you try to do?

surreal glen
#

I never made any request

proven pollen
surreal glen
#

its in

#

index.html

proven pollen
#

I can't help you if you don't know what you are doing wolfshrug

surreal glen
#

*need

surreal glen
proven pollen
#

Can you send all the files you have?

surreal glen
proven pollen
#

No, copy paste

surreal glen
# 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" type="module"></script>
    <title>Document</title>
</head>
<body>
    <div class="score">
        <div id="player-score">0</div>
        <div id="computer-score">0</div>
    </div>
    <div class="ball" id="ball"></div>
    <div class="paddle left" id="player-paddle"></div>
    <div class="paddle right" id="computer-paddle"></div>
</body>
</html>```
# 

*, *::after, *::before {
    box-sizing: border-box;
}

:root{
    --hue: 200;
    --saturation: 50%;
    --foreground-color: hsl(var(--hue), var(--saturation), 75%);
    --background-color: hsl(var(--hue), var(--saturation), 20%);
}

body{
    margin: 0;
    background-color: var(--background-color);
}


.paddle {
--position: 50;

    position: absolute;
    background-color: var(--foreground-color);
    top: calc(var(--position) * 1vh);
    transform: translate(-50%);
    width: 1vh;
    height: 10vh;
}

.paddle.left {
    left:1vw
}


.paddle.right {
    right:1vw
}

.ball {
    --x: 50;
    --y: 50;

    position: absolute;
    background-color: var(--foreground-color);
    left: calc(var(--x) * 1vw);
    top: calc(var(--y) * 1vh);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    width: 2.5vh;
    height: 2.5vh;
}

.score{
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 7vh;
    color: var(--foreground-color);
}

.score > * {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0 2vh;
    margin: 1vh 0;
    opacity: .5;
    border-right: .5vh solid var(--foreground-color);
}

.score > :first-child {
    text-align: right;
}```
# 

export default class ball {
    constructor(ballElem) {
        this.ballElem = ballElem
    }
}```
# 

import Ball from "./Ball";

const ball = new Ball(document.getElementById("ball"))

let lastTime
function update(time) {
    if (lastTime !=null) {
        const delta = time - lastTime
        //Update Code

    }
    console.log(delta)
    lastTime = time
    window.requestAnimationFrame(update)
}


window.requestAnimationFrame(update)```
proven pollen
#

ok...try closing your browser and launch a new live server

surreal glen
#

ok

proven pollen
#

import Ball from "./Ball"; should be import Ball from "./Ball.js";

surreal glen
#

another error

#

"Delta is not defined."

#

How would I define anything?

#

What do i need to do

proven pollen
#

That's one of the very first things one learns when they learn programming

surreal glen
#

I will watch a tutoral later

#

*tutorial

proven pollen
#

ok good luck

surreal glen
#

Delta..

#

First

#

Rq

proven pollen
#

No

#

This server is intended for people who want to learn

surreal glen
proven pollen
#

You can learn that by following the tutorial

surreal glen
#

I realized "console.log(delta) wasen't in the right spot.

#

@proven pollen

#

Now there is no errors, how do i make it output like

image.png
#

You can close this ticket now, I figured it out.

#

Thanks for the help.