-
Notifications
You must be signed in to change notification settings - Fork 2
Javascript
An algorithm is a set of instructions to complete a task. You have seen many examples of these before, like recipes for baking a pie, or using FOIL to expand polynomials. Anything that can be described as a set of concrete steps is an algorithm.
Any app or program or game you have seen has many algorithms behind it which define the behavior of how they work. In order to write code to make them work, we first need to outline them in English and "translate" into something a computer can understand.
Computers can run algorithms, but you have to speak in their language. The key
takeaway: COMPUTERS DO EXACTLY WHAT YOU TELL THEM, NO MORE, NO LESS
If you tell a computer "draw a circle on the screen", it doesn't know where to
draw it, what color to draw it, how often to draw it, etc. So you need to tell
the computer all of the details. Lets try this out with an example. We'll be using
repl.it for basic Javascript testing.
Goal: We want to make a program that can ask for your name, greet you, and then hold a short conversation. Lets try writing out the steps in English.
- Introduce yourself
- Ask for their name
- Greet them by their name
- Ask a question
- Respond to their answer
Now this is enough information for a human to follow, but a computer will need more detail. Lets see if we can flesh it out into code:
// Introduce yourself
console.log("Hello world! My name is Phil");
// Ask for their name
var name = prompt("What is your name?");
// Greet them by name
console.log("Nice to meet you " + name + "!");
// Ask a question
var response = prompt("What is your favorite color?");
// Respond to their answer
console.log("Your favorite color is " + response + "?")
if (response.indexOf("green") != -1) {
console.log("Me too!");
} else {
console.log("My favorite is green");
}HTML is about structure, CSS is about presentation, and Javascript is about function. Javascript is the programming language of the web, and we'll be spending a lot of time with it this semester.
Javascript is less forgiving than HTML. It doesn't try and work around your mistakes. All of us are here to help you along here, so feel free to ask for help if you see a warning or error you don't understand or if things just aren't working. Brackets and Chrome will try and help you find these sorts of mistakes, but it takes some practice to learn how to decipher what they're saying.
Copy the following into a pong.html file in your username.github.io repository.
We'll be going over how this works and building it up from scratch.
<!doctype html>
<html>
<head>
<title>Dog Ball</title>
</head>
<body style="margin: 0; padding: 0">
<div style="position: absolute; width: 1000px; height: 800px; border: 1px black solid; margin: 0; padding: 0;"></div>
<img id="ball" style="position: absolute" src="https://media.giphy.com/media/90sGm2Ld0Z66Y/giphy.gif" width="200"/>
<script type="text/javascript">
var image = document.getElementById("ball");
var width = 1000;
var height = 800;
var x = 600;
var y = 200;
var xSpeed = 1;
var ySpeed = 1;
function gameStep() {
if (x + image.width > width || x < 0) {
xSpeed = -xSpeed;
}
if (y + image.height > height || y < 0) {
ySpeed = -ySpeed;
}
x = x + xSpeed;
y = y + ySpeed;
image.style.left = x + "px";
image.style.top = y + "px";
};
setInterval(gameStep, 5);
</script>
</body>
</html>Copy the following into a rockpaperscissors.html file in your username.github.io repository.
When you live preview it, you should see a basic game of Rock, Paper, Scissors.
Customize it how you see fit - you can change up the images, the text, and even add additional move types!
<!doctype html>
<html>
<head>
<title>Rock Paper Scissors</title>
<style>
.third {
width: 33%;
float: left;
}
</style>
</head>
<body>
<center><h1>Rock Paper Scissors</h1></center>
<select id="your_move" name="your_move">
<option value="rock">Rock</option>
<option value="paper">Paper</option>
<option value="scissors">Scissors</option>
</select>
<button id="submit">Submit</button>
<div>
<div id="yours" class="third">
<h3>You chose:</h3>
<div id="your_move_image"></div>
</div>
<div id="outcome" class="third">
<h2 id="outcome_text"></h2>
<div id="outcome_image"></div>
</div>
<div id="theirs" class="third">
<h3>They chose:</h3>
<div id="their_move_image"></div>
</div>
</div>
<script type="text/javascript">
/*
* CHANGE ME: these are the images we will use in the game
*/
var ROCK_IMAGE = "https://media.giphy.com/media/AjkKC77JZVCEg/giphy.gif";
var PAPER_IMAGE = "https://media.giphy.com/media/qan0r16ZJY2Qg/giphy.gif";
var SCISSORS_IMAGE = "https://media.giphy.com/media/4IL57vrZnSb1S/giphy.gif";
var WIN_IMAGE = "https://media.giphy.com/media/3o7qE7NNv8zuBubR9m/giphy.gif";
var LOSE_IMAGE = "https://media.giphy.com/media/3obiY2RsbUCnC/giphy.gif";
var TIE_IMAGE = "https://media.giphy.com/media/su57mR8vmAfss/giphy.gif";
// connect the function to the button.
document.getElementById("submit").onclick = playGame;
// this gets called when you click the button.
function playGame() {
// get the value that the user chose
var your_move = document.getElementById("your_move").value;
// choose a value for the computer
var their_move;
var randomValue = Math.random();
if (randomValue < 0.33) {
their_move = "rock";
} else if (randomValue < 0.66) {
their_move = "paper";
} else {
their_move = "scissors";
}
// see who wins!
var winner = checkMoves(your_move, their_move);
// draw all the images
if (your_move === "rock") {
setYourImage(ROCK_IMAGE);
} else if (your_move === "paper") {
setYourImage(PAPER_IMAGE);
} else if (your_move === "scissors") {
setYourImage(SCISSORS_IMAGE);
}
if (their_move === "rock") {
setTheirImage(ROCK_IMAGE);
} else if (their_move === "paper") {
setTheirImage(PAPER_IMAGE);
} else if (their_move === "scissors") {
setTheirImage(SCISSORS_IMAGE);
}
if (winner === "you") {
setOutcomeImage(WIN_IMAGE);
document.getElementById("outcome_text").innerHTML = "YOU WIN";
} else if (winner === "them") {
setOutcomeImage(LOSE_IMAGE);
document.getElementById("outcome_text").innerHTML = "YOU LOSE LOL";
} else if (winner === "tie") {
setOutcomeImage(TIE_IMAGE);
document.getElementById("outcome_text").innerHTML = "YOU TIED WITH THEM";
}
}
// this checks the moves and determines the winner.
// FIXME: use `return` to send back the winner for each possible pairing
// of moves.
function checkMoves(your_move, their_move) {
if (your_move === "rock" && their_move === "rock") {
return "tie";
} else if (your_move === "rock" && their_move === "paper") {
// FIXME: fill me in
} else if (your_move === "rock" && their_move === "scissors") {
// FIXME: fill me in
} else if (your_move === "paper" && their_move === "rock") {
// FIXME: fill me in
} else if (your_move === "paper" && their_move === "paper") {
// FIXME: fill me in
} else if (your_move === "paper" && their_move === "scissors") {
// FIXME: fill me in
} else if (your_move === "scissors" && their_move === "rock") {
// FIXME: fill me in
} else if (your_move === "scissors" && their_move === "paper") {
// FIXME: fill me in
} else if (your_move === "scissors" && their_move === "scissors") {
// FIXME: fill me in
}
}
// this sets the image for your move.
function setYourImage(image) {
var container = document.getElementById("your_move_image");
container.innerHTML = '<img width="100%" src="' + image + '">';
}
// this sets the image for their move.
function setTheirImage(image) {
var container = document.getElementById("their_move_image");
container.innerHTML = '<img width="100%" src="' + image + '">';
}
// this sets the image for the outcome.
function setOutcomeImage(image) {
var container = document.getElementById("outcome_image");
container.innerHTML = '<img width="100%" src="' + image + '">';
}
</script>
</body>
</html>