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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看