LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Log

Show me what you can do.

Thread must always move diagonally on the front side and vertically on the back, and to adiacent points only.

CSS
@import url(https://fonts.googleapis.com/css?family=Rubik);

body {margin: 0px; padding: 0px;width: 800px; font-family: 'Rubik', Arial;}

/* Controls */
.controls {position:fixed; z-index:30; top:0; padding:20px;}
.colors a {display:inline-block; width:30px; height:30px; border-radius:3px; box-shadow: inset 0px 0px 5px rgba(0,0,0,.5); border:3px solid #e2e2e2;}
.white {background-color:#fff;}
.black {background-color:#000;}
.red {background-color:#f00;}
.yellow {background-color:#ff0;}
.blue {background-color:#00f;}
.colors .active {border: 3px solid yellow;}
button { font-family: 'Rubik', Arial; }

#cursor {
	border: 3px solid yellow;
	width: 7px;
	height: 7px;
	position: absolute;
	top: 120px;
	left: 40px;
	z-index: 30;
	border-radius: 10px;
	pointer-events:none;
}


#info {
	position: fixed;
	bottom:0;
	z-index: 30;
	width:100%;
}
#info p {
	background-color: rgba(255, 255, 255, 0.3);
	width: 294px;
	margin-left: 130px;
	padding: 20px;
	border-radius: 10px;
	margin-top: 6px;
}
#guida {
	width: 110px;
	height: 110px;
	border-radius: 55px;
	border: 1px solid #AAA;
	display:block;
	position: fixed;
  bottom: 10px;
  left: 10px;
}


#disegno {position: absolute;
z-index: 10;
top: 82px;
left: 161px;
opacity: 0.3;}

#log {position:absolute; top:0; right:0; background:#e0e0e0; padding:20px; z-index:30; display:none;}


#opponent {position:absolute; width:800px;}
#avatar {
	background: url('https://cdn.pbrd.co/images/YfyvKDt.png') no-repeat 0 -220px;
	position: absolute;
	top: 12px;
	left: 675px;
	z-index: 40;
	width: 110px;
	height: 110px;
	border-radius: 55px;
}
#avatar.ok {
	background-position:0px 0px;
}
#avatar.no {
	background-position:0px -110px;
}

canvas {
  position:absolute; z-index:20; }
#filo {z-index:22; pointer-events:none;}
#points {
	position: absolute;
	right: 150px;
	top: 45px;
	font-size: 16px;
	z-index: 20;
	background: white;
	padding: 10px 15px;
	border-radius: 10px;
	box-shadow: 0px 1px 3px #999;
	text-align: right;
}
#points.ok {color:green;}
#points.no {color:red;}

#bg {position:absolute; width:100%; height:100%; top:0; left:0; z-index:10; opacity:.8; background:url('https://cdn.pbrd.co/images/YfBgLnB.png') #e0e0e0 -1px -1px;
}

button {
  padding: 7px;
  border-radius: 4px;
  font-family: 'Raleway', arial;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.2);
}

/* Animazione punteggio */
/*
http://www.dreamstime.com/splashpage-colldet12439
*/
JS
$(function() {

  // Console Log
  function cl($m) {
    console.log($m);
  }

  // Utility Console Log
  var sp = ', ';
  var br = '
'; var first = true; var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x, y, oldX, oldY; var fronte = false; var st = 40; // S-pessore T-rama : Distanza tra i buchi in cui far passare il filo var story = []; // Impostazione filo var filo = { w: 5, color: '#fff', cap: 'round', join: 'round', shColor: 'rgba(0,0,0,.4)', shBlur: 8, shOffX: 2, shOffY: 2, dash: [0] }; var filoRetro = { w: 5, color: 'rgba(0,0,0,.07)', //dash : [5, 10] // Tratteggiato dash: [0] }; function setFiloFronte($context) { $context.strokeStyle = filo.color; $context.setLineDash(filo.dash); $context.lineWidth = filo.w; } function setFiloRetro($context) { $context.strokeStyle = filoRetro.color; $context.setLineDash(filoRetro.dash); $context.lineWidth = filoRetro.w; } function toggleFronteRetro($context) { if (fronte) { setFiloFronte($context); } else { setFiloRetro($context); } } function initContext() { context.lineWidth = filo.w; context.lineCap = filo.cap; context.lineJoin = filo.join; context.strokeStyle = filo.color; context.shadowColor = filo.shColor; context.shadowBlur = filo.shBlur; context.shadowOffsetX = filo.shOffX; context.shadowOffsetY = filo.shOffY; } function drawBG() { var imageObj = new Image(); imageObj.onload = function() { var pattern = context.createPattern(imageObj, 'repeat'); context.rect(0, 0, canvas.width, canvas.height); context.fillStyle = pattern; context.fill(); }; imageObj.src = 'img/foro.png'; } function log($t) { document.getElementById("log").innerHTML = $t; } function clearCanvas() { context.clearRect(0, 0, canvas.width, canvas.height); first = true; fronte = false; } function points() { var oldX = story[story.length - 2][0]; var newX = story[story.length - 1][0]; var oldY = story[story.length - 2][1]; var newY = story[story.length - 1][1]; var deltaX = Math.abs(oldX - newX); var deltaY = Math.abs(oldY - newY); function good() { cl('good') $('#points').text('Well done, kiddo!').attr('class', 'ok'); $('#avatar').attr('class', 'ok'); } function bad() { $('#points').text('Oh, not like that...').attr('class', 'no'); $('#avatar').attr('class', 'no'); } if (fronte) { if (deltaX === st && deltaY === st) { good(); } else { bad(); } } else { if (deltaX === 0 && deltaY === st) { good(); } else { bad(); } } } /* Event assignments */ $('canvas').on('click', function(event) { x = (Math.round(event.pageX / st)) * st; y = (Math.round(event.pageY / st)) * st; story.push([x, y]); // Primo click if (first) { first = false; } else { context.beginPath(); context.moveTo(oldX, oldY); context.lineTo(x, y); // Inverte il verso del filo toggleFronteRetro(context); // Disegna il tratto context.stroke(); // Calcola il punteggio points(); } // Update vars oldX = x; oldY = y; fronte = !fronte; //log(+ x + ', ' + y); }).on('mousemove', function(event) { var x = (Math.round(event.pageX / st)) * st - 5; var y = (Math.round(event.pageY / st)) * st - 4; $('#cursor').css({ 'left': x + 'px', 'top': y + 'px' }); }); $('#endPath').on('click', function(event) { first = true; }); $('.colors a').on('click', function(event) { filo.color = $(this).css('background-color') $('.colors a').removeClass('active'); $(this).addClass('active'); }); $('#reset').on('click', function(event) { clearCanvas(); }); $('#replay').on('click', function(event) { clearCanvas(); fronte = false; setFiloFronte(context); for (i = 0; i < (story.length - 1); i++) { context.beginPath(); context.moveTo(story[i][0], story[i][1]); context.lineTo(story[i + 1][0], story[i + 1][1]); context.stroke(); toggleFronteRetro(context); fronte = !fronte; } //setTimeout(function(){ /* for(i=1; i' + myLine.a + ', ' + myLine.a1 + ', ' + myLine.b); }); //drawRectangle(myRectangle, contextFilo); $(function() { //drawLine(myLine, contextFilo); animateLine(myLine, canvasFilo, contextFilo); }); // wait one second before starting animation /*setTimeout(function () { var startTime = (new Date()).getTime(); //animate(myRectangle, canvasFilo, contextFilo, startTime); animateLine(myLine, canvasFilo, contextFilo, startTime); }, 1000);*/ initContext(); });
Host Instantly Drag and Drop Website Builder

 

Description

An experiment made for testing HTML Canvas drawing.
Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID