canvas游戏火烧像素效果-html代码-BFW代码库

canvas游戏火烧像素效果

代码语言：html

所属分类：动画

代码描述：canvas游戏火烧像素效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
  background: #000;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
</style>

</head>
<body translate="no">
<canvas></canvas>

<script >
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d');

var game = {
  bkg: 'rgba(0,0,0,0.1)',
  cellColor: '#fd3',
  fireColor: '#f92',
  evilColor: '#f40',
  size: 7,
  cols: 10,
  rows: 10,
  cellCount: 100,
  frame: 0,
  dragging: false,
  cells: [],

  start: function () {
    canvas.width = innerWidth;
    canvas.height = innerHeight;

    game.cols = Math.floor(canvas.width / game.size);
    game.rows = Math.floor(canvas.height / game.size);

    game.cellCount = Math.floor(game.cols * game.rows);

    for (var i = 0; i < game.cellCount; i++) {
      var cell = game.createCell(i);
      game.cells.push(cell);
    }

    if (!game.frame) game.loop();
  },

  loop: function () {
    ctx.fillStyle = game.bkg;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    game.cells.forEach(function (cell) {
      cell.draw();
    });

    game.frame = requestAnimationFrame(game.loop);
  },

  createCell: function (i) {
    var x = Math.floor(i % game.cols) * game.size;
    var y = Math.floor(i / game.cols) * game.size;

.........完整代码请登录后点击上方下载按钮下载查看