js实现挡板游戏-html代码-BFW代码库

js实现挡板游戏

代码语言：html

所属分类：游戏

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

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

<style>
@import url(https://fonts.googleapis.com/css?family=Poiret+One);

body{
  overflow:hidden;
  width:100%; 
  margin:0;
  cursor:pointer;
}
</style>

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

<script >
window.requestAnimFrame = function () {
  return window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };
}();
var c, $;
var balls, planks;
var fps = 30;

function go(start) {
  c = document.getElementById("canv");
  $ = c.getContext("2d");
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  $.lineWidth = 10;
  balls = new Balls();
  planks = new Plank();
  if (start) {
    draw();
  }
}

function draw() {
  $.fillStyle = 'hsla(252, 95%, 85%, 1)';
  $.fillRect(0, 0, c.width, c.height);
  var t = "Detour".split("").join(String.fromCharCode(0x2004));
  $.font = "5em Poiret One";
  $.fillStyle = 'hsla(213, 95%, 15%, 1)';
  $.fillText(t, c.width / 2 - 180, c.height / 2);
  var t2 = "Drag To Draw Through Trail";
  $.font = "2em Poiret One";
  $.fillStyle = 'hsla(213, 95%, 15%, 1)';
  $.fillText(t2, c.width / 2 - 180, c.height / 2 + 100);
  balls.fr(balls, $, planks);
  planks.draw(planks, $);
  window.requestAnimFrame(draw);
}

function random(min, max) {
  return Math.random() * (max - min) + min;
};

var Ball = function () {
  this.x = c.width / 2;
  this.y = 0;
  this.r = random(2, 20);
  this.col = 'rgb(' + Math.floor(Math.random() * 130) + ',' + Math.floor(Math.random() * 80) + ',' + Math.floor(Math.random() * 256) + ')';
  this.g = 980;
  this.vx = 0;
  this.vy = 0;
  this.draw = function (it, $, planks) {
    if (!it.roll(it, planks)) {
      return false;
    }
    $.strokeStyle = "hsla(0,5%,5%,1)";
    $.fillStyle = it.col;
    $.beginPath();
    $.arc(it.x, it.y, it.r, 0, 360, false);
    $.fill();
    $.closePath();
    return true;
  };
  this.bounds = function (it, nx, ny) {
    var left = it.x > nx ? nx : it.x;
    var right = it.x > nx ? it.x : nx;
    var top = it.y > ny ? ny : it.y;
    var bottom = it.y > ny ? it.y : ny;
    return [left, top, right, bottom];
  };
  this.roll = function (it, planks) {
    it.vy += 1 / fps * it.g;
    var nY = it.y + 1 / fps * it.vy;
    var nX = it.x + 1 / fps * it.vx;
    var s = planks.size(planks);
    for (var i = 0; i < s; i++) {
      var _p = planks.planks[i];
      var b = (_p.ex - _p.sx) * (nY - it.y) - (_p.ey - _p.sy) * (nX - it.x);
      if (b == 0)
      continue;
      var ang = [it.x - _p.sx, it.y - _p.sy];
      var dr = ((nY - it.y) * ang[0] - (nX - it.x) * ang[1]) / b;
      var ds = ((_p.ey - _p.sy) * ang[0] - (_p.ex - _p.sx) * ang[1]) / b;
      if (dr > 0 && dr < 1 && ds > 0 && ds < 1) {

        var a = _p.ex == _p.sx ? 0 : (_p.ey - _p.sy) / (_p.ex - _p.sx);
        var b = -(a * _p.sx) - _p.sy;
        var a1 = nX == it.x ? 0 : (nY - it.y) / (nX - it.x);
        var b1 = a1 * it.x - it.y;
        var r = Math.sqrt(random(5, 7) / 10);
        if (a1 * a == -1) {
          it.vy *= -r;
          it.vx *= -r;
        } else {
          var a = _p.ex == _p.sx ? 0 : -1 / ((_p.ey - _p.sy) / (_p.ex - _p.sx));
          var b = -(a * _p.sx) + _p.sy;
          var p = [1, a + b];
          var p2 = [2, a * 2 + b];
          var w = Math.sqrt(Math.pow(p2[0] - p[0], 2) + Math.pow(p2[1] - p[1], 2));
          var ref = it.........完整代码请登录后点击上方下载按钮下载查看