Create a gist now

Instantly share code, notes, and snippets.

@platzhersh /pacman.html Secret
Created Aug 23, 2012

What would you like to do?
HTML5 Canvas - Pacman Basic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML 5 Canvas - Pacman</title>
<style>
body {
background-color: #000;
color: white;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported</p>
</canvas>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// global variables
var posX = 0;
var posY = 0;
var radius = 20;
var angle1 = 0.25;
var angle2 = 1.75;
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// Drawing Pac Man
context.beginPath();
context.fillStyle = "Yellow";
context.strokeStyle = "Yellow";
context.arc(posX+radius,posY+radius,radius,angle1*Math.PI,angle2*Math.PI);
context.lineTo(posX+radius, posY+radius);
context.stroke();
context.fill();
}
renderContent();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment