Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Canvas - Ping Pong
<canvas id="canvas" width="100" height="100"></canvas>
<div class="wrap">
<label for="speed"><b>SpeedX:</b></label>
<input type="number" id="speedX" class="btn" value="5">
<span>&nbsp;|&nbsp;</span>
<label for="speed"><b>SpeedY:</b></label>
<input type="number" id="speedY" class="btn" value="5">
</div>
<div class="wrap">
<button id="stop" class="btn">Stop</button>
<button id="run" class="btn">Run</button>
</div>
(function () {
'use strict';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Rectangle
var rect = {
x: 0,
y: 75,
width: 30,
height: 30
};
var animId = null;
var direction = {
right: true,
bottom: true
};
var speed = {
x: 5,
y: 5,
haste: 10,
hasteX: 5,
hasteY: 10
};
// Set dimensions
function setCanvasDimensions() {
var width = $(document).width() / 1.1;
var height = $(document).height() / 1.5;
canvas.width = width;
canvas.height = height;
}
// Re-Draw
function drawRect() {
ctx.beginPath();
ctx.rect(
rect.x,
rect.y,
rect.width,
rect.height);
ctx.fillStyle = '#E74C3C';
ctx.fill();
}
function handleEdge() {
if (rect.x + rect.width >= canvas.width || rect.x < 0) {
direction.right = !direction.right;
speed.hasteX = speed.x + speed.haste;
}
if (rect.y + rect.height >= canvas.height || rect.y < 0) {
direction.bottom = !direction.bottom;
speed.hasteY = speed.y + speed.haste;
}
}
function handleHaste() {
if (speed.hasteX > speed.x) {
speed.hasteX--;
}
if (speed.hasteY > speed.y) {
speed.hasteY--;
}
}
// Clear the Canvas
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// Trigger Re-Draw
function render() {
var speedX = speed.hasteX > speed.x ? speed.hasteX : speed.x;
var speedY = speed.hasteY > speed.y ? speed.hasteY : speed.y;
handleEdge();
handleHaste();
if (direction.right) {
rect.x = rect.x + speedX;
} else {
rect.x = rect.x - speedX;
}
if (direction.bottom) {
rect.y = rect.y + speedY;
} else {
rect.y = rect.y - speedY;
}
drawRect(rect);
}
// Setup the animation
function animate() {
animId = window.requestAnimationFrame(animate);
clear();
render();
}
// Stop the animation
function stop(id) {
if (id) {
window.cancelAnimationFrame(id);
}
}
// Debounce helper for window resize
function debounceResize(delay, callback) {
var timeout;
$(window).on('resize orientationChanged', function () {
clearTimeout(timeout);
timeout = setTimeout(callback, delay);
});
}
/**
* Button click handlers
*/
debounceResize(20, function () {
setCanvasDimensions();
});
$('#stop').on('click', function (e) {
e.preventDefault();
stop(animId);
});
$('#run').on('click', function (e) {
e.preventDefault(animId);
stop(animId);
animate();
});
$('#speedX').on('change', function (e) {
speed.x = parseInt(e.target.value, 10);
});
$('#speedY').on('change', function (e) {
speed.y = parseInt(e.target.value, 10);
});
/**
* Init
*/
(function () {
setCanvasDimensions();
animate();
}());
}());
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: #333;
color: white;
}
canvas {
background: beige;
display: block;
margin: 0 auto;
}
.wrap {
margin-top: 20px;
text-align: center;
}
.btn {
cursor: pointer;
border: 0;
border-radius: 10px;
font-size: 1.1em;
font-weight: bold;
width: 150px;
height: 30px;
}
input.btn {
width: 50px;
cursor: default;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment