Skip to content

Instantly share code, notes, and snippets.

@kevinfjbecker

kevinfjbecker/vacuum-world.html

Created December 15, 2011 12:02
Show Gist options
  • Save kevinfjbecker/1480866 to your computer and use it in GitHub Desktop.
Save kevinfjbecker/1480866 to your computer and use it in GitHub Desktop.
Download ZIP
Vacuum World Robot in HTML5 Cavas
Raw
vacuum-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hoover</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<canvas id="vacuum-world" width="150" height="150"></canvas>
<script src="vacuum-world.js"></script>
</body>
</html>
Raw
vacuum-world.js
if (document.getElementById('vacuum-world')) {
var canvas = document.getElementById('vacuum-world');
var ctx = canvas.getContext('2d');
(function () {
(function () { // drawWheel
ctx.beginPath();
ctx.arc(50,50,5,0,2 * Math.PI, true);
ctx.stroke();
})();
(function () { // drawWheel
ctx.beginPath();
ctx.arc(60,50,5,0,2 * Math.PI, true);
ctx.stroke();
})();
(function () { // drawBody
ctx.beginPath();
ctx.moveTo(65,35);
// (cp1x, cp1y, cp2x, cp2y, x, y)
ctx.bezierCurveTo(65, 10, 45, 10, 45, 35);
ctx.lineTo(45,45);
ctx.lineTo(65,45);
ctx.lineTo(65,35);
ctx.stroke();
})();
(function () { // head
ctx.beginPath();
// bottom
ctx.moveTo(40,50.5);
ctx.lineTo(37.5,48.5);
ctx.lineTo(12,48.5);
ctx.lineTo(10,50.5);
ctx.lineTo(40,50.5);
// top
ctx.moveTo(35.5,48.5);
ctx.lineTo(32.5,43.5);
ctx.lineTo(18,43.5);
ctx.lineTo(15,48.5);
// hose
ctx.moveTo(30,43.5);
ctx.lineTo(46,27);
ctx.moveTo(33,43.5);
ctx.lineTo(46,30);
ctx.stroke();
})();
})();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment