Skip to content

Instantly share code, notes, and snippets.

@0xsven
Created August 15, 2011 13:42
Show Gist options
  • Select an option

  • Save 0xsven/1146773 to your computer and use it in GitHub Desktop.

Select an option

Save 0xsven/1146773 to your computer and use it in GitHub Desktop.
test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>HTML5 Pong</title>
</head>
<script>
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
var imgObj = new Image();
imgObj.src = "http://datastoreonline.de/trollface.jpg";
function init()
{
context= myCanvas.getContext('2d');
setInterval(draw,10);
}
function draw()
{
context.clearRect(0,0, 500,500);
context.beginPath();
context.fillStyle="#0000ff";
context.drawImage(imgObj, x, y, 80, 80);
context.closePath();
context.fill();
// Boundary Logic
if( x<0 || x>420) dx=-dx;
if( y<0 || y>420) dy=-dy;
x+=dx;
y+=dy;
}
</script>
<body onLoad="init();">
<canvas id="myCanvas" width="500" height="500" >
</canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment