Hey. I decided it was time for me to learn Java script, so this is where I will post some related things. I might as for occasional help, and just post about something I learned today. Another reason I am making a topic for this is so I can stay dedicated to it. I will try and give at least one daily update on this topic. If you have any advice, I would love to hear it! Just prepare for a lot of questions.
Make Code mayhem
I will be putting a hold on Make Code mayhem, but I won’t give up on that topic. I will create it but in java script. I won’t let your all’s amazing art go to waist!
my goals are:
Code a game in Make Code arcade with 100 percent Java Script.
You noticed that it still exists when switching to JavaScript, yes? It works the same way! Drag a code snippet into your code. You’ll just need to replace the placeholders with real values or variable names.
Can’t figure out how to write something in JavaScript? Create a blank project and build it in Blocks. Then, switch to JavaScript to see how your blocks have been translated.
You’re learning a new language. Start with your familiar language and translate slowly.
Build something simple, like a chase and collect game. (We call it Chase the Pizza in the tutorials.) Then keep enhancing it with skills that you already know in Blocks.
That’s a good idea! my first game in blocks was a gremlin chasing a person around, and the player had to survive a minute timer. I Will try and make something like that tomorrow. Thank you!
Highlighting a word or phrase will sort of soft highlight all other occurrences of that string. These highlights are also marked on the right scroll bar as little grey boxes. This is insanely helpful for finding other places where you’ve used a variable and jumping between them quickly.
Highlighting something and pressing ctrl D will highlight the next occurrence of that thing, and keep pressing it to highlight more. Then you can edit all those places at once!
Use comments. Just… please…
Look through the Explorer files! They are really cool!
Browser Events is the only extension you can’t make yourself, but you don’t have to make everything!
Look at other peoples’ code! But…
Credit others when you copy their code! It’s just good practice and will be a good habit later on.
It’s nothing crazy, just a difficult plat former with some secrets (Can you make it to the end?)
Most of it was made in blocks, but the significance is when I try to create another, I can look at the code in a Java script and copy it down into the new one.This is how I learned blocks with the make code arcade skill maps most notably the monkey one. @WoofWoof Could you explain these a tiny bit more?
The curly braces in C-style languages indicate statement blocks. They’re used to extend a single statement to include multiple statements.
For example, you can write a for() loop like this:
for (let i: number = 0; i < 10; i++)
console.log(`i == ${i}`);
You also can write it like this, which is safer:
for (let i: number = 0; i < 10; i++) {
console.log(`i == ${i}`)
}
Why are the curly braces better? Because now you can do this:
let sum: number = 0
for (let i: number = 0; i < 10; i++) {
console.log(`i == ${i}`)
sum += i
}
game.splash("The sum of the numbers 1 through 10 is", `${sum}`)
If you write the same code without the curly braces, then only the statement that appears after the for() declaration is considered part of the loop. Try it yourself to see the difference.
To make your code more readable, safer, and extensible (or extendable, depending on who you ask), always use curly braces with loops and decision structures.
You also can write multi-line comments (also known as block comments) like this:
/*
This is a comment
that spans multiple lines.
*/
The and logical operator in JavaScript (and C-based languages in general) is &&.
Think about the if-then-else block. The curly braces represent the beginning and end of each branch, where you drop blocks that run when the conditional (the “true/false” value – it’s often called a Boolean value) is true or false.
In Blocks, we call them containers, since they hold other blocks. Curly braces hold a collection of statements. (A statement in JavaScript is equivalent to a single block in Blocks.)
The parentheses represent the parameter list sent to a function … or the equivalent for things like an if() statement. It lists the “things” that the function needs in order to do its job.
(1) The little orange box shows the “soft highlight” I’m talking about, where it shows other places where the highlighted string is found. It’s not full highlighting is all that I meant.
(2) On the right scroll bar, you can see those little grey squares. That marks other places that soft highlights have occured. That means that down there in my code I must have used that variable/string.
(everything here might be a different color in other editor themes, idk, I don’t use other editor themes and can’t be bothered to check them)
My bad on this one. At least on Mac, it’s command+d, not control+d. You can see here I have highlighted the “redState” variable, then pressed command+d. This lets me edit both variables at the same time. Alternatively, if you wanted to rename a variable in the whole project, you could right click the variable and select the “rename symbol” option:
I believe “Change all occurrences” also changes that thing in comments as well, which can have weird results if it’s a variable that is a normal word you’ve used in your comments. Idk though. I use Rename Symbol out of habit and I don’t remember if there was ever a specific reason for starting that habit. There are also some other neat commands in this menu, namely “Go to Definition” which shows you a little pop up window with a list of all the places you’ve used the thing, which is cool!
Random rambling or something idk
I’m pretty sure you understand the curly braces thing, but this is my explanation because I just like making explanations for stuff, idk.
So first, you can use an “if” like this:
But any other code you want to also run inside that if statement will naturally go on the next line, which won’t work:
So to specify that we also want this other thing to happen inside that if statement, we use curly braces to denote that this other thing should also be part of the if statement:
Conveniently, the editor will usually automatically indent code like that, so that it’s easier to see what is inside the if statement and what is outside!
This code will run because the “&&” is an “and” and the “||” is an “or” and the parentheses are like parentheses in math where the stuff inside gets evaluated first. So the “(true || false”) bit will be “true” because one of the options is true, and in an “or” if one or both are true then it evaluates to true, and then next the “&&” is an “and” so since both sides are true it ends up being true and the code runs. The operations you should know about are…
“==” equal
“!=” not equal
“&&” and
“||” or
“<” less than (is the left less than the right)
“>” greater than
“<=” less than or equal
“>=” greater than or equal.
The rest are bitwise operators, which… you can look up on your own. They have to do with the actual 1s and 0s that make up a number, so you only need to use them if you’re doing something really complicated or you just want to look cool using “num >> 1” instead of “num / 2” (Looking at you @richard. I mean, it might be faster, I guess, technically. )
You’ll learn more about why num >> 1 is simpler for the computer than num / 2 with “generalized” numbers and operations when you take your computer architecture course, WoofWoof.
It’s the same reason why, in Blocks, we write negation as 0 - aNumber rather than -1 * aNumber, as typically done in mathematics. Addition is simpler for computers than multiplication with “generalized” numbers and operations.
Smart compilers, on the other hand, have a ton of shortcuts and optimizations that make some of these things irrelevant. JavaScript processors within web browsers aren’t always that smart, though.
I knowwwww I just enjoy bothering Richard
I also realized that num >> 1 truncates the value at the same time, which is neat. Also thanks for the = vs == edit, I forgot about that!
or Richard I guess.
Most of it was done with blocks.
)
