rAF - 01 Simple Bounce

by djwelsh

HTML

<div id="game"><canvas id="game-canvas" width="500" height="400"></canvas></div>
<div id="debug"></div>

CSS

#game-canvas {
    border: 1px solid #ccc;
    background-color: black;
}

JavaScript

var x = 10, y = 10;
var xDx = 1, yDy = 1;

var anim = null;
var canvas = null;
var ctx = null;

var xIncreasing = true;
var yIncreasing = true;

function updateAnimation() {
    var lastImage = ctx.getImageData(0,0,canvas.width,canvas.height);
    var pixelData = lastImage.data;
    
    var i;
    var len = pixelData.length;
    for (i = 3; i < len; i += 4) {
         pixelData[i] -= 3;
    }
    ctx.putImageData(lastImage,0,0);
    
    
    if (x > 500) xDx = Math.abs(xDx) * -1;
    else if (x < 0) xDx = Math.abs(xDx);
    
    x += xDx;
    
    if (y > 400) yDy = Math.abs(yDy) * -1;
    else if (y < 0) yDy = Math.abs(yDy);
    
    y += yDy;
    
    $('#debug').html('x : '+x+'<br>y : '+y+'');
    
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, 360, false);
    ctx.stroke();
    ctx.fill();
    
    requestAnimationFrame(updateAnimation);
}

$(function () {
    canvas = document.getElementById('game-canvas');
    ctx = canvas.getContext('2d');
    
    
    ctx.fillStyle = "orange";
    ctx.strokeStyle = "yellow";
    ctx.lineWidth = 3;
    
    requestAnimationFrame(updateAnimation);
    
});