Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 3, 2015 21:55
Show Gist options
  • Save anonymous/a4ad85fb82f1810dbac0 to your computer and use it in GitHub Desktop.
Save anonymous/a4ad85fb82f1810dbac0 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 angle=0;
var x = 100;
var 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);
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawMonster(x, y, angle, 'green', 'yellow');
x = x + 1; angle = angle + 0.1;
requestId = requestAnimationFrame(animationLoop);
}
function start() {
// Start the animation loop, targets 60 frames/s
requestId = requestAnimationFrame(animationLoop);
}
function drawMonster(x, y, angle, headColor, eyeColor) {
// GOOD PRACTICE : SAVE CONTEXT AND RESTORE IT AT THE END
ctx.save();
// Moves the coordinate system so that the monster is drawn
// at position (x, y)
ctx.translate(x, y);
ctx.rotate(angle);
// head
ctx.fillStyle=headColor;
ctx.fillRect(0,0,200,200);
// eyes
ctx.fillStyle='red';
ctx.fillRect(35,30,20,20);
ctx.fillRect(140,30,20,20);
// interior of eye
ctx.fillStyle=eyeColor;
ctx.fillRect(43,37,10,10);
ctx.fillRect(143,37,10,10);
// Nose
ctx.fillStyle='black';
ctx.fillRect(90,70,20,80);
// Mouth
ctx.fillStyle='purple';
ctx.fillRect(60,165,80,20);
// GOOD PRACTICE !
ctx.restore();
}
</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 angle=0;
var x = 100;
var 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);
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawMonster(x, y, angle, 'green', 'yellow');
x = x + 1; angle = angle + 0.1;
requestId = requestAnimationFrame(animationLoop);
}
function start() {
// Start the animation loop, targets 60 frames/s
requestId = requestAnimationFrame(animationLoop);
}
function drawMonster(x, y, angle, headColor, eyeColor) {
// GOOD PRACTICE : SAVE CONTEXT AND RESTORE IT AT THE END
ctx.save();
// Moves the coordinate system so that the monster is drawn
// at position (x, y)
ctx.translate(x, y);
ctx.rotate(angle);
// head
ctx.fillStyle=headColor;
ctx.fillRect(0,0,200,200);
// eyes
ctx.fillStyle='red';
ctx.fillRect(35,30,20,20);
ctx.fillRect(140,30,20,20);
// interior of eye
ctx.fillStyle=eyeColor;
ctx.fillRect(43,37,10,10);
ctx.fillRect(143,37,10,10);
// Nose
ctx.fillStyle='black';
ctx.fillRect(90,70,20,80);
// Mouth
ctx.fillStyle='purple';
ctx.fillRect(60,165,80,20);
// GOOD PRACTICE !
ctx.restore();
}</script></body>
Raw
jsbin.cebobo.js
var canvas, ctx;
var x=100, y=100;
var angle=0;
var x = 100;
var 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);
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawMonster(x, y, angle, 'green', 'yellow');
x = x + 1; angle = angle + 0.1;
requestId = requestAnimationFrame(animationLoop);
}
function start() {
// Start the animation loop, targets 60 frames/s
requestId = requestAnimationFrame(animationLoop);
}
function drawMonster(x, y, angle, headColor, eyeColor) {
// GOOD PRACTICE : SAVE CONTEXT AND RESTORE IT AT THE END
ctx.save();
// Moves the coordinate system so that the monster is drawn
// at position (x, y)
ctx.translate(x, y);
ctx.rotate(angle);
// head
ctx.fillStyle=headColor;
ctx.fillRect(0,0,200,200);
// eyes
ctx.fillStyle='red';
ctx.fillRect(35,30,20,20);
ctx.fillRect(140,30,20,20);
// interior of eye
ctx.fillStyle=eyeColor;
ctx.fillRect(43,37,10,10);
ctx.fillRect(143,37,10,10);
// Nose
ctx.fillStyle='black';
ctx.fillRect(90,70,20,80);
// Mouth
ctx.fillStyle='purple';
ctx.fillRect(60,165,80,20);
// GOOD PRACTICE !
ctx.restore();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment