Blockly Turtle: JavaScript

The levels with Blockly Turtle, when completed, show the equivalent JavaScript code but provide no method for applying it. This resource provides a webpage with a JavaScript user input area, that calls functions similar to those in Blockly. For example, to 'move forward by 100'. The JavaScript function is 'moveForward(100)'.) This will allow learners to create the same drawings that they have made with Blockly whilst learning to code such things as for loops and variables with text based coding. I have found these resources to be a hugely engaging way to introduce children to text based coding.

Dave Salt (Primary/Elementary Teacher)

This resource allows you to translate drawings made with Blockly Games Turtle from block based coding into JavaScript:

A 'squiral' drawn with block based coding using Blockly

The same drawing achieved with JavaScript

Google Blockly: https://blockly.games/?

JavaScript Turtle: https://primary-apps.com/turtle/

The following code will allow you to embed your drawings into a Google Site. Add the JavaScript in the section marked towards the end of the code. The code also allows learners to create functions and call those functions from html buttons, so that users can control inputs on their webpage.

Code to embed in a Google Site: https://www.w3schools.com/code/tryit.asp?filename=G12ERU6CUOH6

<!DOCTYPE html>

function moveForward(Length,myColor,penSize){

ctx.beginPath();

ctx.moveTo(newX,newY);

Length = Length + extraLength;

newX = newX + Math.cos(Ang) * Length ;

newY = newY - Math.sin(Ang) * Length;

ctx.strokeStyle = myColor;

ctx.lineWidth=2;

ctx.lineWidth=penSize;

ctx.lineTo(newX,newY);

ctx.stroke();

}

function turn(Turndeg){

Turndeg = eval(Turndeg / -57.2958);

Ang = eval(Ang + Turndeg);

}

function grow(Growth){

extraLength = extraLength + Growth;

}

function clearGrow(){extraLength = 0;}

function center(){newX = 400;newY = 400;}

function jump(jumpX,jumpY){newX=jumpX;newY=jumpY;}

function showGrid(){

ctx.beginPath();

ctx.moveTo(0,100);

ctx.lineTo(800,100);

ctx.moveTo(0,200);

ctx.lineTo(800,200);

ctx.moveTo(0,300);

ctx.lineTo(800,300);

ctx.moveTo(0,400);

ctx.lineTo(800,400);

ctx.moveTo(0,500);

ctx.lineTo(800,500);

ctx.moveTo(0,600);

ctx.lineTo(800,600);

ctx.moveTo(0,700);

ctx.lineTo(800,700);

ctx.moveTo(100,0);

ctx.lineTo(100,800);

ctx.moveTo(200,0);

ctx.lineTo(200,800);

ctx.moveTo(300,0);

ctx.lineTo(300,800);

ctx.moveTo(400,0);

ctx.lineTo(400,800);

ctx.moveTo(500,0);

ctx.lineTo(500,800);

ctx.moveTo(600,0);

ctx.lineTo(600,800);

ctx.moveTo(700,0);

ctx.lineTo(700,800);

ctx.lineWidth=0.25;

ctx.stroke()}

</script>

</head>

<canvas id="myCanvas" width="800" height="800" style="border:2px solid #000000;background:white;display:block;

margin-left:auto; margin-right:auto">

</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var newX = 400;

var newY = 400;

var Ang = 0;

var Length;

var Turndeg;

var Growth;

var extraLength = 0;

var mycolor;

var penSize;

var Ang = eval(Ang / 57.2958);

var Turndeg = eval(Turndeg / 57.2958);

var jumpX

var jumpY

ctx.moveTo(newX,newY);

//////////////////////////////////////////

/////////////// JAVASCRIPT/////////////// //////////////////////////////////////////

//// USE: moveForward(length,"color",thickness)

//// USE: turn(degrees)

//// USE: jump()

//// the code below draws a 'squiral'

distance = 0

for(i=0;i<60;i++){

moveForward(distance,"black",1)

turn(91)

distance = distance + 4

}

//////////////////////////////////////////

/////////////// JAVASCRIPT/////////////// //////////////////////////////////////////

</script><br>

<input type="button" value="do something"

onClick="">

<input type="button" value="do something else"