Canvas 箭头和翻滚的箱体 - 踏得网

可以使用键盘操作箭头的运动，当箭头触碰到蓝色的箱体时，箱体被射破散架并呈现红色。

case,arrow

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1895
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var $window = $(window),
    $document = $(document),
    $canvas = $('canvas'),
    canvas = $canvas.get(0),
    context = canvas.getContext('2d'),
    keys = [],
    lastNow = null,
    delta = 0,
    rate = 1000 / 60,
    player = {
      x: 0,
      y: 0,
      vx: 0,
      vy: 0,
      rotation: 0,
      points: 0
    },
    enemies = [],
    destroyed = [],
    fires = [],
    points = [];

for (var i = 0; i < 256; ++i) {
  keys[i] = false;
}

$document
  .on('keyup', function(e) {
    keys[e.keyCode] = false;
    if (e.keyCode === 32) {
      fires.push({
        x: player.x,
        y: player.y,
        vx: Math.cos(player.rotation) * 8,
        vy: Math.sin(player.rotation) * 8,
        rotation: player.rotation
      });
    }
  })
  .on('keydown', function(e) {
    keys[e.keyCode] = true;
  });

$window.on('resize', function(e) {
  
  $canvas
    .attr('width', $window.width())
    .attr('height', $window.height());
  
}).trigger('resize');

function render(context) {
 
  context.fillStyle = 'rgba(0,0,0,0.3)';
  context.fillRect(0,0,canvas.width,canvas.height);
  //context.clearRect(0,0,canvas.width,canvas.height);
  
  context.save();
  context.strokeStyle = '#fff';
  context.translate(player.x, player.y);
  context.rotate(player.rotation);
  context.beginPath();
  context.moveTo(8, 0);
  context.lineTo(-8,8);
  context.lineTo(-8,-8);
  context.lineTo(8, 0);
  context.stroke();
  context.restore();
  
  var i, fire, enemy, destroy;
  for (i = 0; i < fires.length; i++) {
    fire = fires[i];
    context.save();
    context.strokeStyle = '#cf0';
    context.translate(fire.x, fire.y);
    context.rotate(fire.rotation);
    context.beginPath();
    context.moveTo(4, 0);
    context.lineTo(-4, 0);
    context.stroke();
    context.restore();
  }
  
  for (i = 0; i < enemies.length; i++) {
    enemy = enemies[i];
    context.save();
    context.translate(enemy.x,enemy.y);
    context.rotate(enemy.rotation);
    context.strokeStyle = '#0cf';
    context.beginPath();
    context.moveTo(enemy.size,0);
    context.lineTo(0,enemy.size);
    context.lineTo(-enemy.size,0);
    context.lineTo(0,-enemy.size);
    context.lineTo(enemy.size,0);
    context.stroke();
    context.restore();
  }
   
  for (i = 0; i < destroyed.length; i++) {
    destroy = destroyed[i];
    context.save();
    context.translate(destroy.x,destroy.y);
    context.rotate(destroy.rotation);
    context.globalAlpha = destroy.alpha;
    context.strokeStyle = '#f17';
    
    context.rotate(destroy.dr * destroy.a);
    context.translate(destroy.time,0);
    context.beginPath();
    context.moveTo(destroy.size,0);
    context.lineTo(0,destroy.size);
    context.stroke();
    
    context.rotate(destroy.dr * destroy.b);
    context.translate(destroy.time,0);
    context.beginPath();
    context.moveTo(0,destroy.size);
    context.lineTo(-destroy.size,0);
    context.stroke();
    
    context.rotate(destroy.dr * destroy.c);
    context.translate(destroy.time,0);
    context.beginPath();
    context.moveTo(-destroy.size,0);
    context.lineTo(0,-destroy.size);
    context.stroke();
    
    context.rotate(destroy.dr * destroy.d);
    context.translate(destroy.time,0);
    context.beginPath();
    context.moveTo(0,-destroy.size);
    context.lineTo(destroy.size,0);
    context.stroke();
    
    context.restore();
  }
  
  for (i = 0; i < points.length; i++) {
    var point = points[i];
    context.save();
    context.globalAlpha = point.alpha;
    context.translate(point.x,point.y);
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.font = '50px sans-serif';
    context.fillStyle = '#1f7';
    context.fillText('+5', 0,0);
    context.restore();
  }
  
  context.textAlign = 'left';
  context.textBaseline = 'top';
  context.font = '50px sans-serif';
  context.fillStyle = '#f17';
  context.fillText(player.points,20,20);
  
}

function update(delta) {
  
  if (enemies.length < 10) {
    var rotation = Math.random() * Math.PI * 2;
    enemies.push({
      x: Math.random() * canvas.width,
      y: -50,
      vx: Math.cos(rotation) * 2,
      vy: Math.sin(rotation) * 2,
      size: 32 + (Math.random() * 32),
      rotation: rotation
    });
  }
  
  if (keys[37] === true) {
    player.rotation -= Math.PI * 0.01;
  }
  
  if (keys[39] === true) {
    player.rotation += Math.PI * 0.01;
  }
  
  if (keys[38] === true) {
    player.vx += Math.cos(player.rotation) * 0.1;
    player.vy += Math.sin(player.rotation) * 0.1;
  }
  
  player.x += player.vx;
  player.y += player.vy;
  
  if (player.x < 0)
    player.x = canvas.width + player.x;
  
  if (player.x > canvas.width)
    player.x = canvas.width - player.x;
  
  if (player.y < 0)
    player.y = canvas.height + player.y;
  
  if (player.y > canvas.height)
    player.y = canvas.height - player.y;
  
  var i, j, fire, enemy, destroy, dx, dy, d, point;
  for (i = fires.length - 1; i >= 0; --i) {
    fire = fires[i];
    fire.x += fire.vx;
    fire.y += fire.vy;
    if (fire.x < 0 || 
        fire.y < 0 ||
        fire.x > canvas.width ||
        fire.y > canvas.height) {
      fires.splice(i,1);
    }
 
  }
  
  for (i = enemies.length - 1; i >= 0; --i) {
    
    enemy = enemies[i];
    enemy.x += enemy.vx;
    enemy.y += enemy.vy;
    enemy.rotation += 0.1;
    
    dx = player.x - enemy.x;
    dy = player.y - enemy.y;
    
    d = Math.sqrt(dx * dx + dy * dy);
    if (d < enemy.size) {
      destroyed.push({
        x: enemy.x,
        y: enemy.y,
        vx: enemy.vx,
        vy: enemy.vy,
        rotation: enemy.rotation,
        time: 0,
        alpha: 1,
        size: enemy.size,
        dr: 0,
        drv: Math.random() * 0.007,
        a: Math.ceil(Math.random() - 0.5) * 2,
        b: Math.ceil(Math.random() - 0.5) * 2,
        c: Math.ceil(Math.random() - 0.5) * 2,
        d: Math.ceil(Math.random() - 0.5) * 2
      });
      
      enemies.splice(i,1);
        
      break;
    }
    
    for (j = fires.length - 1; j >= 0; --j) {
      
      fire = fires[j];
      
      dx = fire.x - enemy.x;
      dy = fire.y - enemy.y;
      
      d = Math.sqrt(dx * dx + dy * dy);
      if (d < enemy.size) {
        
        destroyed.push({
          x: enemy.x,
          y: enemy.y,
          vx: enemy.vx,
          vy: enemy.vy,
          rotation: enemy.rotation,
          time: 0,
          alpha: 1,
          size: enemy.size,
          dr: 0,
          drv: Math.random() * 0.007,
          a: Math.ceil(Math.random() - 0.5) * 2,
          b: Math.ceil(Math.random() - 0.5) * 2,
          c: Math.ceil(Math.random() - 0.5) * 2,
          d: Math.ceil(Math.random() - 0.5) * 2
        });
        
        points.push({
          x: enemy.x,
          y: enemy.y,
          alpha: 1,
          vy: 5
        });
        
        enemies.splice(i,1);
        fires.splice(j,1);
        
        player.points += 5;
        
        break;
      }
      
    }
    
    if (enemy.x < 0) {
      enemy.x = canvas.width + enemy.x;
    }
    
    if (enemy.x > canvas.width) {
      enemy.x = canvas.width - enemy.x;
    }
    
    if (enemy.y < 0) {
      enemy.y = canvas.height + enemy.y;
    }
    
    if (enemy.y > canvas.height) {
      enemy.y = canvas.height - enemy.y;
    }
    
  }
  
  
  for (i = destroyed.length - 1; i >= 0; --i) {
    
    destroy = destroyed[i];
    destroy.time += 0.1;
    destroy.x += destroy.vx;
    destroy.y += destroy.vy;
    destroy.rotation += 0.01;
    destroy.alpha -= 0.01;
    destroy.dr += destroy.drv;
    if (destroy.alpha < 0) {
      destroyed.splice(i,1);
      break;
    }
    
  }
  
  for (i = points.length - 1; i >= 0; --i) {
    point = points[i];
    point.y -= point.vy;
    point.vy *= 0.99;
    point.alpha -= 0.01;
    if (point.alpha < 0) {
      points.splice(i,1);
      break;
    }
    
  }
  
  return true;
  
}

function loop(now) {
  
  if (lastNow === null) {
    lastNow = now;
  }
  
  delta = (now - lastNow) / rate;  
  if (update(delta)) {
    render(context);
  }
  
  requestAnimationFrame(loop);
  
}

player.x = canvas.width * 0.5;
player.y = canvas.height * 0.5;

loop(0);

编译

CSS

HTML