Skip to content

Instantly share code, notes, and snippets.

@wismer

wismer/index.html

Created March 13, 2017 17:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wismer/40e9e2c807c8a348b0d1e2c9c6735a76 to your computer and use it in GitHub Desktop.
Save wismer/40e9e2c807c8a348b0d1e2c9c6735a76 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=40e9e2c807c8a348b0d1e2c9c6735a76
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tiny Turtle</title>
<script src="https://toolness.github.io/tiny-turtle/tiny-turtle.js"></script>
</head>
<body>
<h1>Tiny Turtle</h1>
<ul class='instructions'>
</ul>
<canvas></canvas>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
// Tiny Turtle Setup. Avoid modifying these lines of code!
var adjCanvasSize = document.getElementsByTagName('canvas')[0];
adjCanvasSize.width = 400;
adjCanvasSize.height = 400;
TinyTurtle.apply(window);
// Start writing code here
function square(){
forward(50);
right(90);
forward(50);
right(90);
forward(50);
right(90);
forward(50);
right(90);
forward(50);
}
// Type your function call below
function _square() {
var instructions = [50, 90, 50, 90, 50, 90, 50, 90, 50];
instructions.forEach(function(instruction, index) {
function animate() {
var step = 'step ' + (index + 1);
if (instruction === 50) {
forward(instruction);
step = '<li>' + step + ' forward(50) pixels!' + '</li>';
} else {
right(instruction);
step = '<li>' + step + ' right(90) degrees!' + '</li>';
}
$('.instructions').append(step);
stamp();
}
setTimeout(animate, index * 1500);
});
}
_square();
stamp();
Raw
styles.css
canvas {
border: 1px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment