Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 3, 2015 21:49
Show Gist options
  • Save anonymous/2de64ee127122464eac9 to your computer and use it in GitHub Desktop.
Save anonymous/2de64ee127122464eac9 to your computer and use it in GitHub Desktop.
Download ZIP
Click listener version 1 // source http://jsbin.com/cebobo
Raw
index.html
<body onload="init();">
<canvas id="myCanvas" width="400" height="400">
Your browser does not support the canvas tag.
</canvas>
<script id="jsbin-javascript">
var canvas, ctx;
var x=100, y=100;
var incrementX = 0;
function init() {
canvas = document.getElementById('myCanvas');
ctx=canvas.getContext('2d');
window.addEventListener('keydown', handleKeydown, false);
window.addEventListener('keyup', handleKeyup, false);
requestId = requestAnimationFrame(animationLoop);
}
function handleKeydown(event) {
if (event.keyCode === 37) {
//left key
incrementX = -1;
} else if (event.keyCode === 39) {
// right key
incrementX = 1;
}
}
function handleKeyup(event) {
incrementX = 0;
}
function animationLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, y, 10, 10);
x += incrementX;
requestId = requestAnimationFrame(animationLoop);
}
function start() {
// Start the animation loop, targets 60 frames/s
requestId = requestAnimationFrame(animationLoop);
}
</script>
<script id="jsbin-source-html" type="text/html">
<body onload="init();">
<canvas id="myCanvas" width="400" height="400">
Your browser does not support the canvas tag.
</canvas>
</body>
</script>
<script id="jsbin-source-javascript" type="text/javascript"> var canvas, ctx;
var x=100, y=100;
var incrementX = 0;
function init() {
canvas = document.getElementById('myCanvas');
ctx=canvas.getContext('2d');
window.addEventListener('keydown', handleKeydown, false);
window.addEventListener('keyup', handleKeyup, false);
requestId = requestAnimationFrame(animationLoop);
}
function handleKeydown(event) {
if (event.keyCode === 37) {
//left key
incrementX = -1;
} else if (event.keyCode === 39) {
// right key
incrementX = 1;
}
}
function handleKeyup(event) {
incrementX = 0;
}
function animationLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, y, 10, 10);
x += incrementX;
requestId = requestAnimationFrame(animationLoop);
}
function start() {
// Start the animation loop, targets 60 frames/s
requestId = requestAnimationFrame(animationLoop);
}
</script></body>
Raw
jsbin.cebobo.js
var canvas, ctx;
var x=100, y=100;
var incrementX = 0;
function init() {
canvas = document.getElementById('myCanvas');
ctx=canvas.getContext('2d');
window.addEventListener('keydown', handleKeydown, false);
window.addEventListener('keyup', handleKeyup, false);
requestId = requestAnimationFrame(animationLoop);
}
function handleKeydown(event) {
if (event.keyCode === 37) {
//left key
incrementX = -1;
} else if (event.keyCode === 39) {
// right key
incrementX = 1;
}
}
function handleKeyup(event) {
incrementX = 0;
}
function animationLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, y, 10, 10);
x += incrementX;
requestId = requestAnimationFrame(animationLoop);
}
function start() {
// Start the animation loop, targets 60 frames/s
requestId = requestAnimationFrame(animationLoop);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment