Skip to content

Instantly share code, notes, and snippets.

@cmoscardi
Created May 22, 2017 00:02
Show Gist options
  • Save cmoscardi/01a9b257f06d89f5319a8028511e08bb to your computer and use it in GitHub Desktop.
Save cmoscardi/01a9b257f06d89f5319a8028511e08bb to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=01a9b257f06d89f5319a8028511e08bb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tiny Turtle</title>
<script src="https://toolness.github.io/tiny-turtle/tiny-turtle.js"></script>
</head>
<body>
<div id="intro">
<img src="https://s3.amazonaws.com/joldic/turtle-1021521_640.png" />
<h1>Tiny Turtle</h1>
</div>
<canvas></canvas>
<script>
var adjCanvasSize = document.getElementsByTagName('canvas')[0];
adjCanvasSize.width = 400;
adjCanvasSize.height = 400;
TinyTurtle.apply(window);
</script>
</body>
</html>
{"enabledLibraries":["jquery"]}
function moveForward(){
forward(10);
stamp();
}
function turnRight(){
right(90);
stamp();
}
function turnLeft(){
left(90);
stamp();
}
function onKeyDown(event){
var key = event.key;
// if the key === 'w', call the moveForward function
// if the key === 'a', call the turnLeft function
// if the key === 'd', call the turnRight function
if(key === "w"){
moveForward();
}
if(key === "a"){
turnLeft();
}
if(key === "d"){
turnRight();
}
}
$("body").keydown(onKeyDown);
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: -webkit-radial-gradient(#b4e391, green);
background: -o-radial-gradient(#b4e391, green);
background: -moz-radial-gradient(#b4e391, green);
background: radial-gradient(#b4e391, green);
}
#intro {
position: relative;
display: flex;
align-items: flex-end;
}
h1 {
color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: 400;
letter-spacing: .1em;
}
img {
height: 100px;
}
canvas {
background: white;
border: 5px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment