Skip to content

Instantly share code, notes, and snippets.

@karolk

karolk/falling-letters.html

Last active June 15, 2022 12:57
Show Gist options
  • Save karolk/1069511 to your computer and use it in GitHub Desktop.
Save karolk/1069511 to your computer and use it in GitHub Desktop.
Download ZIP
Very simple html and JS game created as an assignment to a 14 yo aspiring programmer!
Raw
falling-letters.html
<!doctype html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//JS to explain
//literals var function = + a.b ()
//methods to explain
//String.charAt, String.fromCharCode
//Math.random, Math.floor
//setInterval
//jQuery to explain
//$.css, $.text, $.appendTo, $.remove, $.animate, $.on, $.first, $.width(), $.contains
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//breaking task into subtasks
//create a function returning a random number
function randomNumber(max) {
var randomNum = Math.random();
var numExpanded = randomNum * max;
var numFloored = Math.floor(numExpanded);
return numFloored;
}
//create a function returning a random letter
function randomLetter() {
var random0to25 = randomNumber(letters.length);
var randomLetter = letters.charAt(random0to25);
return randomLetter;
}
//create a function creating a span containing a random letter and attaching it to body
function createLetter() {
var span = $("<span/>");
span.css("position", "absolute");
span.css("top", 0);
randomPercent = randomNumber(100)+"%"; //concatenation
span.css("left", randomPercent);
span.text(randomLetter())
span.appendTo("body");
return span;
}
//explain how to animate an element
function makeLetterFall() {
var letterElement = createLetter();
letterElement.animate({"top":"95%"}, 5000); //any ideas how not to use {} here?
}
//handle keyup, find a letter and remove it
function removeTypedLetter(pressedKey) {
var typedLetter = String.fromCharCode(pressedKey.keyCode);
var letterElement = $("span:contains("+typedLetter+")").first();
letterElement.remove();
}
$(document).on("keyup", removeTypedLetter);
//make a new letter every second
setInterval(makeLetterFall, 1000);
</script>
Raw
introduction.md

What is a variable var

This is a way for the program to remember things for the future. Programmers use them to break difficult problems into steps. For example, how much is 13% of $450 minus $10 comission? This is how a programmer would break down the problem.

var seekedPercent = 0.13
var totalMoney = 450
var comission = 10

var seekedPercentOfMoney = seekedPercent * totalMoney
var finalResult =  seekedPercentOfMoney - comission

Notice that 1st 3 variables are used to store particular values, and last 2 are used to break up the actual calculation into smaller tasks. This hopefully makes it much easier than doing everything in 1 step.

===

What is a function?

You can think of functions as of formulas or recipes to do something in a few steps. You can give that recipe a name and use it as many time as you like. Let's have a look at an example:

function drawLine() {
  takePencil()
	pressToPaper()
	moveHand()
}

drawLine()
drawLine()

So as you see, a function drawLine is used to describe steps necessary to draw a line. But this is not all about function. They are really good at changing things you give to them into other things. Each function is a small machine, that can take some ingredients, do something with them, and return a product. Think of a simple multiplying machine.

function multiplyBy100(num) {
	return num * 100
}

multiplyBy100(2) => 200
multiplyBy100(-1.232) => -123.2

You can pass more arguments, just separate them with a comma:

function addTwoThings(a, b) {
	return a + b
}

addTwoThings(10, 20) => 30
addTwoThings(-1, 1) => 0
Copy link

ghost commented Dec 29, 2014

what if i don't want to use this animate function with arguments to directly fall letters from top to bottom ? How can i rewrite that function manually ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment