canvas实现射击小球消除消消乐游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：canvas实现射击小球消除消消乐游戏代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
</head>

<body translate="no">
  <div align='center'>
  <link rel="stylesheet" type="text/css"
    href="//repo.bfw.wiki/bfwrepo/images/customelement/bubblestyle.css">
  </link>
  <canvas id="game-canvas" style='maring:0 auto; background: #eee' width="480" height="320"></canvas>
  <script type='application/javascript'
    src="//repo.bfw.wiki/bfwrepo/images/customelement/grid.js">
  </script>
  <script type='application/javascript'
    src="//repo.bfw.wiki/bfwrepo/images/customelement/ball.js">
  </script>
  <script type='application/javascript'
    src="//repo.bfw.wiki/bfwrepo/images/customelement/shooter.js">
  </script>
  <script type='application/javascript'
    src="//repo.bfw.wiki/bfwrepo/images/customelement/manager.js">
  </script>

  </script>
</div>
 <script  >
//Game canvas and context
var canvas = document.getElementById("game-canvas");
var ctx = canvas.getContext("2d");
var rectangle = canvas.getBoundingClientRect();
var mouse = {};
var game_grid = null;

var game_width = canvas.width;
var game_height = canvas.height;
var fixed = false;

/*
window.addEventListener('resize', function (e) {
	game_width = canvas.width
	game_height = canvas.height
})
*/

var defaultZ = canvas.style.zIndex;

var initial_colors = ['red', 'blue', '#eddd2d', '#54e202'];
var add_colors = ['#00d8ff', 'magenta', '#c46907'];
var game_colors = initial_colors.slice(0);

mouse.x = 0;
mouse.y = 0;
mouse.down = 0;
mouse.prev_down = 0;
mouse.held = 0;

//setup mouse listener
document.addEventListener('mousemove', mouse_move, false);
canvas.addEventListener('mousedown', function (evt) {mouse.down = 1;}, false);
canvas.addEventListener('mouseup', function (evt) {mouse.down = 0;click_buttons(evt);}, false);
document.addEventListener('touchmove', touch_move, false);
canvas.addEventListener('touchstart', function (evt) {mouse.down = 1;touch_move(evt);}, false);
canvas.addEventListener('touchend', function (evt) {mouse.down = 0;click_buttons(evt);}, false);

//setup rescale listener
window.onresize = function (evt) {rescale();};

var delay = 10; //delay between frames, 10 ms
//Get start time
var prev_time = new Date().getTime();

//List of all things to draw on the screen.
var game_objects = {};
var object_layers = {};
var buttons = {};
var layers = [];
var added = 0;
var sf = 1;

//Max elapsed time per frame
var max_elapsed = 25;

//call setup function
setup();

function get_color()
{
  return game_colors[Math.floor(Math.random() * game_colors.length)];
}

function touch_move(e)
{
  var touch = e.touches[0];
  rectangle = canvas.getBoundingClientRect();
  var x = touch.clientX - rectangle.left;
  var y = touch.clientY - rectangle.top;
  mouse.x = x / sf;
  mouse.y = y / sf;
}

//function to track mouse movement
function mouse_move(e)
{
  rectangle = canvas.getBoundingClientRect();
  var x = e.clientX - rectangle.left;
  var y = e.clientY - rectangle.top;
  mouse.x = x / sf;
  mouse.y = y / sf;
}

function click_buttons(evt) {
  if (mouse.down == 0 && mouse.prev_down == 1) {
    button_ids = Object.keys(buttons);
    for (var index = 0; index < button_ids.length; index++) {
      button = buttons[button_ids[index]];
      if (button.intersect(mouse.x, mouse.y)) {
        button.fn();
      }
    }
  }
}

//Adds a button to the screen
function add_button(button, layer = 0)
{
  id = add_object(button, layer);
  buttons[id] = button;
  return id;
}

//Removes a button from the screen
function remove_button(id)
{
  console.log(id);
  if (id in buttons) {
    remove_object[id];
    delete buttons[id];
  }
}

//Adds an object and returns the object's id
function add_object(object, layer = 0)
{
  game_objects[added] = object;
  object.id = added;
  object.layer = layer;
  //check if the layer exists, if not create it
  if (!(layer in object_layers)) {
    object_layers[layer] = {};
    layers.push(layer);
    layers.sort(function (a, b) {
      aNum = parseInt(a);
      bNum = parseInt(b);
      if (aNum == bNum)
      return 0;
      if (aNum > bNum)
      return 1;
      return 0;
    });
  }
  //Add object to layer
  object_layers[layer][object.id] = 0;
  added += 1;
  return object.id;
}

//Removes an object from the draw hash table
function remove_object(id)
{
  //find object layer and delete it from layer
  for (var index = 0; index < layers.length; index++) {
    layer = layers[index];
    if (id in object_layers[layer]) {
      delete object_layers[layer][id];
    }
  }
  //remove object from game_objects
  return delete game_objects[id];
}

//resets the game
function reset()
{
  game_colors = initial_colors.slice(0);
  game_manager.remove_self();
  ball_.........完整代码请登录后点击上方下载按钮下载查看