HTML5 Canvas Ultimate Flash Killer

Instructions: Just point and shoot!

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="320"></canvas>
    <script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();

function getMousePos(canvas, evt) {
        // get canvas position
        var obj = canvas;
        var top = 0;
        var left = 0;
        while(obj.tagName != 'BODY') {
          top += obj.offsetTop;
          left += obj.offsetLeft;
          obj = obj.offsetParent;
        }

// return relative mouse position
        var mouseX = evt.clientX - left + window.pageXOffset;
        var mouseY = evt.clientY - top + window.pageYOffset;
        return {
          x: mouseX,
          y: mouseY
        };
      }
      function animate(canvas, particles, imageObj, mouse, lastTime, crossHairRadius) {
        context = canvas.getContext('2d');

// update
        var date = new Date();
        var time = date.getTime();
        var timeDiff = time - lastTime;
        updateParticles(canvas, particles, timeDiff, mouse, crossHairRadius);

// clear
        context.clearRect(0, 0, canvas.width, canvas.height);

// draw
        drawParticles(canvas, particles, imageObj);
        drawCrossHair(canvas, mouse, crossHairRadius);

// request new frame
        requestAnimFrame(function() {
          animate(canvas, particles, imageObj, mouse, time, crossHairRadius);
        });
      }
      function drawCrossHair(canvas, mouse, crossHairRadius) {

if(mouse.pos.x && mouse.pos.y) {
          var context = canvas.getContext('2d');

var mouseX = mouse.pos.x;
          var mouseY = mouse.pos.y;

context.globalAlpha = 0.5;
          context.beginPath();
          context.arc(mouseX, mouseY, crossHairRadius, 0, 2 * Math.PI, false);
          context.fillStyle = 'blue';
          context.fill();

context.globalAlpha = 1;
          context.moveTo(mouseX, mouseY - crossHairRadius - 10);
          context.lineTo(mouseX, mouseY + crossHairRadius + 10);
          context.strokeStyle = 'black';
          context.lineWidth = 4;
          context.stroke();

context.beginPath();
          context.moveTo(mouseX - crossHairRadius - 10, mouseY);
          context.lineTo(mouseX + crossHairRadius + 10, mouseY);
          context.strokeStyle = 'black';
          context.lineWidth = 4;
          context.stroke();
        }
      }
      function drawParticles(canvas, particles, imageObj) {
        var context = canvas.getContext('2d');

if(particles && imageObj.src) {
          for(var n = 0; n < particles.length; n++) {
            var particle = particles[n];
            context.drawImage(imageObj, particle.imgX, particle.imgY, 10, 10, particle.x, particle.y, 10, 10);
          }
        }
      }
      function updateParticles(canvas, particles, timeDiff, mouse, crossHairRadius) {
        if(mouse.down) {
          for(var n = 0; n < particles.length; n++) {
            var particle = particles[n];

var radius = Math.sqrt(Math.pow(particle.x - mouse.pos.x, 2) + Math.pow(particle.y - mouse.pos.y, 2));

if(radius <= crossHairRadius) {
              var vx = ((Math.random() * 10) - 5) * timeDiff / 10;
              var vy = ((Math.random() * 10) - 5) * timeDiff / 10;

particle.vx = vx;
              particle.vy = vy;
              particle.isLocked = false;
              particle.isRolling = false;
            }
          }

mouse.down = false;
        }

for(var n = 0; n < particles.length; n++) {
          var particle = particles[n];
          var floorFriction = 0.003 * timeDiff;
          var gravity = 0.005 * timeDiff;
          var collisionDamper = 3;

if(!particle.isLocked) {
            particle.x += particle.vx;
            particle.y += particle.vy;

if(particle.isRolling) {
              if(particle.vx > 0) {
                particle.vx -= floorFriction;
                if(particle.vx <= 0) {
                  particle.isLocked = true;
                }
              }
              else {
                particle.vx += floorFriction;
                if(particle.vx > 0) {
                  particle.isLocked = true;
                }
              }

if(particle.x > canvas.width - 10) {
                particle.vx *= -1;
              }
              else if(particle.x < 0) {
                particle.vx *= -1;
              }
            }
            else {
              particle.vy += gravity;

if(particle.x > canvas.width - 10) {
                particle.x = canvas.width - 10;
                particle.vx /= collisionDamper;
                particle.vx *= -1;
              }
              if(particle.x < 0) {
                particle.x = 0;
                particle.vx /= collisionDamper;
                particle.vx *= -1;
              }

if(particle.y > canvas.height - 10) {
                particle.y = canvas.height - 10;
                particle.vy /= collisionDamper;
                particle.vy *= -1;
              }
              if(particle.y < 0) {
                particle.y = 2;
                particle.vy /= collisionDamper;
                particle.vy *= -1;
              }

//if particle is about to roll on floor ...
              if(Math.abs(particle.vy) < 0.5 && particle.y > canvas.height - 13) {

particle.y = canvas.height - 10;
                particle.vy = 0;
                particle.isRolling = true;
              }
            }
          }
        }
      }
      var canvas = document.getElementById('myCanvas');
      var crossHairRadius = 25;

// init particles
      var particles = [];
      for(var n = 0; n < 30; n++) {
        for(var i = 0; i < 30; i++) {
          var imgX = n * 10;
          var imgY = i * 10;
          particles.push({
            x: imgX + 139,
            y: imgY,
            imgX: imgX,
            imgY: imgY,
            vx: 0,
            vy: 0,
            isRolling: false,
            isLocked: true
          });
        }
      }

var mouse = {
        pos: {},
        down: false
      };

canvas.addEventListener('click', function() {
        mouse.down = true;
      }, false);

canvas.addEventListener('mousemove', function(evt) {
        var pos = getMousePos(canvas, evt);
        mouse.pos.x = pos.x;
        mouse.pos.y = pos.y;
      });

canvas.addEventListener('mouseout', function(evt) {
        mouse.pos = {};
      });
      // start animation when image loads
      var imageObj = new Image();
      imageObj.onload = function() {
        var date = new Date();
        var time = date.getTime();
        animate(canvas, particles, imageObj, mouse, time, crossHairRadius);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/flash.jpg';

</script>
  </body>
</html>

< Flash Killer >

More Examples

Modified on January 29th, 2013 by Eric Rowell