Skip to content

Instantly share code, notes, and snippets.

@SindreSvendby

SindreSvendby/index.html

Created March 13, 2015 14:33
Show Gist options
  • Save SindreSvendby/09f74f7ba0bcd1a1e69a to your computer and use it in GitHub Desktop.
Save SindreSvendby/09f74f7ba0bcd1a1e69a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://static.jsbin.com/js/vendor/traceur.js"></script>
</head>
<body>
<canvas id="court" width="400" height="800" style="border:1px solid #000000;"></canvas>
<script id="jsbin-javascript">
/*
If you've just translated to JS, make sure traceur is in the HTML panel.
This is terrible, sorry, but the only way we could get around race conditions.
Hugs & kisses,
Dave xox
*/
try{window.traceur = top.traceur;}catch(e){}
// jsbin
var courtWidth = 9;
var courtHeight = 18;
var frontPos = 8.5;
var leftPos = 1.5;
var midlePos = 4.5;
var rightPos = 7.5;
var backMiddlePos = 2;
var backSides = 4.5;
var startPos2 =[leftPos, frontPos];
var startPos3 =[midlePos, frontPos];
var startPos4 =[rightPos, frontPos];
var startPos5 =[rightPos, backSides];
var startPos6 =[midlePos, backMiddlePos];
var startPos1 =[leftPos, backSides];
var c = document.getElementById("court");
var ctx = c.getContext("2d");
var canvasWitdth = 400;
var canvasHeight = 800;
var oneMeterInPx = canvasHeight / courtHeight;
function drawLine(x1, x2, y1, y2) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function drawLineAcrossCanvas(meters) {
drawLine(0, canvasWitdth, meters * oneMeterInPx, meters * oneMeterInPx);
}
function drawPlayer(meterX, meterY) {
ctx.beginPath();
ctx.arc(meterX * oneMeterInPx, meterY * oneMeterInPx, 15, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "#000";
ctx.fill();
}
drawLineAcrossCanvas(6);
drawLineAcrossCanvas(9);
drawLineAcrossCanvas(12);
drawPlayer.apply(null, traceur.runtime.spread([true, startPos1]));
drawPlayer.apply(null, traceur.runtime.spread([true, startPos2]));
drawPlayer.apply(null, traceur.runtime.spread([true, startPos3]));
drawPlayer.apply(null, traceur.runtime.spread([true, startPos4]));
drawPlayer.apply(null, traceur.runtime.spread([true, startPos5]));
drawPlayer.apply(null, traceur.runtime.spread([true, startPos6]));
</script>
<script id="jsbin-source-javascript" type="text/javascript">const courtWidth = 9;
const courtHeight = 18;
const frontPos = 8.5;
const leftPos = 1.5;
const midlePos = 4.5;
const rightPos = 7.5;
const backMiddlePos = 2
const backSides = 4.5
const startPos2 = [leftPos,frontPos];
const startPos3 = [midlePos,frontPos];
const startPos4 = [rightPos,frontPos];
const startPos5 = [rightPos, backSides ];
const startPos6 = [midlePos,backMiddlePos];
const startPos1 = [leftPos,backSides];
var c = document.getElementById("court");
var ctx = c.getContext("2d");
const canvasWitdth = 400;
const canvasHeight = 800;
const oneMeterInPx = canvasHeight/courtHeight;
function drawLine(x1,x2,y1,y2) {
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
}
function drawLineAcrossCanvas(meters) {
drawLine(0,canvasWitdth, meters*oneMeterInPx, meters*oneMeterInPx);
}
function drawPlayer(meterX,meterY) {
ctx.beginPath();
ctx.arc(meterX*oneMeterInPx,meterY*oneMeterInPx,15,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle = "#000";
ctx.fill();
}
drawLineAcrossCanvas(6)
drawLineAcrossCanvas(9)
drawLineAcrossCanvas(12)
drawPlayer(...startPos1)
drawPlayer(...startPos2)
drawPlayer(...startPos3)
drawPlayer(...startPos4)
drawPlayer(...startPos5)
drawPlayer(...startPos6)
</script></body>
</html>
Raw
jsbin.qoricu.js
/*
If you've just translated to JS, make sure traceur is in the HTML panel.
This is terrible, sorry, but the only way we could get around race conditions.
Hugs & kisses,
Dave xox
*/
try{window.traceur = top.traceur;}catch(e){}
// jsbin
var courtWidth = 9;
var courtHeight = 18;
var frontPos = 8.5;
var leftPos = 1.5;
var midlePos = 4.5;
var rightPos = 7.5;
var backMiddlePos = 2;
var backSides = 4.5;
var startPos2 =[leftPos, frontPos];
var startPos3 =[midlePos, frontPos];
var startPos4 =[rightPos, frontPos];
var startPos5 =[rightPos, backSides];
var startPos6 =[midlePos, backMiddlePos];
var startPos1 =[leftPos, backSides];
var c = document.getElementById("court");
var ctx = c.getContext("2d");
var canvasWitdth = 400;
var canvasHeight = 800;
var oneMeterInPx = canvasHeight / courtHeight;
function drawLine(x1, x2, y1, y2) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function drawLineAcrossCanvas(meters) {
drawLine(0, canvasWitdth, meters * oneMeterInPx, meters * oneMeterInPx);
}
function drawPlayer(meterX, meterY) {
ctx.beginPath();
ctx.arc(meterX * oneMeterInPx, meterY * oneMeterInPx, 15, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "#000";
ctx.fill();
}
drawLineAcrossCanvas(6);
drawLineAcrossCanvas(9);
drawLineAcrossCanvas(12);
drawPlayer.apply(null, traceur.runtime.spread([true, startPos1]));
drawPlayer.apply(null, traceur.runtime.spread([true, startPos2]));
drawPlayer.apply(null, traceur.runtime.spread([true, startPos3]));
drawPlayer.apply(null, traceur.runtime.spread([true, startPos4]));
drawPlayer.apply(null, traceur.runtime.spread([true, startPos5]));
drawPlayer.apply(null, traceur.runtime.spread([true, startPos6]));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment