圣诞节向圣诞树上发射礼物小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：圣诞节向圣诞树上发射礼物小游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
<style>
canvas {
    position: absolute;
    border: 1px solid rgb(80, 180, 255);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}
#canvasSnowBackground {
    background: rgb(80, 180, 255);
}
button{
	font-size:large;
	font-family:Arial;
	color: white;
	background: white;
	cursor:pointer;
  padding: 0px 30px;
  border-radius: 10px;
  border: 1px solid rgba(80,180,255,0);
  background: rgb(80, 180, 255);
  transition: 0.3s;
  justify-content: space-between;
}
button:hover {
  background: rgb(255, 255, 255);
  color: rgb(80, 180, 255);
   border: 1px solid rgba(80,180,255,1);
}
#overlay{
	text-align:center;
	font-size:x-large;
	position: absolute;
	left: 50%;
	top: calc(50% + 340px);
	transform: translate(-50%, -50%);
	justify-content: space-between;
  width: 480px;
}
#overlay > button, #overlay > span {
  justify-content: space-between;
}
#overlay > span {
  line-height: 50px;
  font-size: 20px;
	font-family:Arial;
}
</style>


</head>
<body onload="main()">
    <canvas id="canvasSnowBackground"></canvas>
    <canvas id="canvasTreeBranches"></canvas>
    <canvas id="canvasSnowForeground"></canvas>
    <canvas id="canvasGame"></canvas>



  
      <script >
var G = [0, 0.8];
var particles = [];
var segments = [];
var boards = [];

function scale(vector, value) {
  let newVector = [];
  for (let i = 0; i < vector.length; i++) {
    newVector[i] = vector[i] * value;
  }
  return newVector;
}

function distance(v1, v2) {
  let dist = 0;
  for (let i = 0; i < v1.length; i++) {
    dist += Math.pow(v1[i] - v2[i], 2);
  }
  return Math.sqrt(dist);
}

function createHangingBoards(topLeft, size, str) {

  for (let i = 0; i < str.length; i++) {
    let x = topLeft[0] + size * 3.5 * i;
    let y = topLeft[1];
    console.log(x, y);
    if (str.charAt(i) == " ") {
      continue;
    }
    let board = createHangingBoard(
    [x, y],
    size,
    str.charAt(i));

    particles.add(board.p);
    segments.add(board.s);
    boards.add(board.b);
  }

}

function createHangingBoard(location, size, letter) {
  let links = 8;
  let p = [];
  let s = [];
  let b = [];
  let angle = 0.2;
  //support
  for (let i = 0; i < links; i++) {
    let isFixed = true;
    if (i > 0) {
      isFixed = false;
    }
    p.push(new Particle([location[0] - size + i * size * 0.6, location[1]], isFixed));
    p.push(new Particle([location[0] + size + i * size * 0.6, location[1]], isFixed));
    if (i > 0) {
      s.push(new Segment(p[p.length - 1], p[p.length - 3]));
      s.push(new Segment(p[p.length - 2], p[p.length - 4]));
    }
  }
  p.push(new Particle([location[0] - size + (links - 1) * size * 0.6, location[1] + 4 * size * 0.6], false));
  p.push(new Particle([location[0] + size + (links - 1) * size * 0.6, location[1] + 4 * size * 0.6], false));
  s.push(new Segment(p[p.length - 1], p[p.length - 2], true));
  s.push(new Segment(p[p.length - 4], p[p.length - 3], true));
  s.push(new Segment(p[p.length - 1], p[p.length - 3], true));
  s.push(new Segment(p[p.length - 2], p[p.length - 4], true));
  s.push(new Segment(p[p.length - 1], p[p.length - 4], true));
  b.push(new Board([
  p[p.length - 1], p[p.length - 2], p[p.length - 4], p[p.length - 3]],
  letter));



  return { p: p, s: s, b: b };
}

Array.prototype.add = function (elements) {
  for (let i = 0; i < elements.length; i++) {
    this.push(elements[i]);
  }
};

class Board {
  constructor(particles, letter) {
    this.particles = particles;
    this.letter = letter;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.fillStyle = "white";
    ctx.moveTo(...this.particles[0].location);
    for (let i = 1; i < this.particles.length; i++) {
      ctx.lineTo(...this.particles[i].location);
    }
    ctx.fill();
    let center = averageParticleLocations(this.particles);
    let angle = Math.atan2(
    this.particles[0].location[1] - this.particles[1].location[1],
    this.particles[0].location[0] - this.particles[1].location[0]);


    ctx.save();
    ctx.translate(...center);
    ctx.rotate(angle);
    ctx.font = "20px Arial";
    ctx.fillStyle = "black";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    ctx.fillText(this.letter,
    0, 0);
    ctx.restore();
  }}


function averageParticleLocations(particles) {
  let avg = [0, 0];
  for (let i = 0; i < particles.length; i++) {
    avg[0] += particles[i].location[0];
    avg[1] += particles[i].location[1];
  }
  avg[0] /= particles.length;
  avg[1] /= particles.length;
  return avg;
}
class Segment {
  constructor(particleA, particleB, isHidden) {
    this.isHidden = isHidden;
    this.particleA = particleA;
    this.particleB = particleB;
    this.length = distance(particleA.location,
    particleB.location);
  }

  update() {
    let newLength = subtract(this.particleA.location,
    this.particleB.location);
    let magn = magnitude(newLength);

    let diff = magn - this.length;
    let norm = normalize(newLength);
    if (!this.particleA.isFixed && !this.particleB.isFixed) {
      this.particleA.location = add(
      this.particleA.location, scale(norm, -diff * 0.5));

      this.particleB.location = add(
      this.particleB.location, scale(norm, diff * 0.5));

    } else if (!this.particleA.isFixed) {
      this.particleA.location = add(
      this.particleA.location, scale(norm, -diff));

    } else {
      this.particleB.location = add(
      this.particleB.location, scale(norm, diff));

    }

  }

  draw(ctx) {
    if (this.isHidden) {
      return;
    }
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;
    const sub = subtract(this.particleA.location,
    this.particleB.location);
    const norm = normalize(sub);
    const delta = magnitude(sub) * 0.1;
    const start = add(this.particleA.location,
    scale(norm, +delta));
    const end = add(this.particleB.location,
    scale(norm, -delta));

    const startOffset1 = add(start, scale(flip(norm), delta * 3));
    const startOffset2 = add(start, scale(flip(norm), -delta * 3));
    const endOffset1 = add(end, scale(flip(norm), delta * 3));
    const endOffset2 = add(end, scale(flip(norm), -delta * 3));
    ctx.moveTo(...start);
    ctx.bezierCurveTo(...startOffset1,
    ...endOffset1, ...end);
    ctx.bezierCurveTo(...endOffset2,
    ...startOffset2, ...start);
    ctx.stroke();
  }}

class Particle {
  constructor(location, isFixed) {
    this.isFixed = isFixed;
    this.location = location;
    if (Math.random() < 0.2) {
      this.oldLocation =
      [location[0] + (Math.random() - 0.5) * 12,
      location[1] + (Math.random() - 0.5) * 12];
    } else {
      this.oldLocation = location;
    }
    this.radius = 2;
  }
  update(forces) {
    if (this.isFixed) {
      return;
    }
    let vel = subtract(this.location, this.oldLocation);
    let newLocation = add(this.location, vel);
    for (let i = 0; i < forces.length; i++) {
      newLocation = add(newLocation, forces[i]);
    }
    this.oldLocation = this.location;
    this.location = newLocation;
  }
  draw(ctx) {
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 10;
    if (this.color != null) {
      ctx.fillStyle = this.color;
    }
    ctx.arc(...this.location, this.radius, 0, Math.PI * 2);
    //ctx.stroke();
  }}



function updateSegments(segments) {
  for (let i = 0; i < segments.length; i++) {
    segments[i].update();
  }
}

function updateParticles(particles, forces) {
  for (let i = 0; i < particles.length; i++) {
    particles[i].update(forces);
  }
}

function drawObjects(objects, ctx) {
  for (let i = 0; i < objects.length; i++) {
    objects[i].draw(ctx);
  }
}

function normalize(v) {
  return scale(v, 1 / magnitude(v));
}

function magnitude(v) {
  let magn = 0;
  for (let i = 0; i < v.length; i++) {
    magn += v[i] * v[i];
  }
  return Math.sqrt(magn);
}

function flip(v) {
  let newV = [v[1], v[0]];
  return newV;
}
function subtract(v1, v2) {
  let newV = [];
  for (let i = 0; i < v1.length; i++) {
    newV[i] = v1[i] - v2[i];
  }
  return newV;
}

function add(v1, v2) {
  let newV = [];
  for (let i = 0; i < v1.length; i++) {
    newV[i] = v1[i] + v2[i];
  }
  return newV;
}
function average(v1, v2) {
  let newV = [];
  for (let i = 0; i < v1.length; i++) {
    newV[i] = (v1[i] + v2[i]) / 2;
  }
  return newV;
}


function getNearestParticle(particles, location) {
  let minDist = Number.MAX_VALUE;
  let nearestParticle = null;
  for (let i = 0; i < particles.length; i++) {
    let dist = distance(particles[i].location,
    location);
    if (dist < minDist) {
      minDist = dist;
      nearestParticle = particles[i];
    }
  }
  return nearestParticle;
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return [
  Math.round(CANVAS_SIZE * (evt.clientX - rect.left) / (rect.right - rect.left)),
  Math.round(CANVAS_SIZE * (evt.clientY - rect.top) / (rect.bottom - rect.top))];

}


const CANVAS_WIDTH = 480;
const CANVAS_HEIGHT = 620;

let snowBgCanvas;
let branchCanvas;
let snowFgCanvas;
let gameCanvas;

let crosshair = {
  image: new Image(),
  x: CANVAS_WIDTH / 2,
  y: CANVAS_HEIGHT / 2,
  size: CANVAS_WIDTH * 0.1 };

crosshair.image.src = "//repo.bfw.wiki/bfwrepo/image/5fe1a9f824a09.png";

let images = [];
for (let i = 1; i <= 8; i++) {
  images.push(new Image());
}
images[0].src = "//repo.bfw.wiki/bfwrepo/image/5fe1a9bd4341d.png";
images[1].src = "//repo.bfw.wiki/bfwrepo/image/5fe1a9d7e76ed.png";
images[2].src = "//repo.bfw.wiki/bfwrepo/image/5fe1aa108ec9f.png";
images[3].src = "//repo.bfw.wiki/bfwrepo/image/5fe1aa2a0aa4b.png";
images[4].src = "//repo.bfw.wiki/bfwrepo/image/5fe1aa4316cdb.png";
images[5].src = "//repo.bfw.wiki/bfwrepo/image/5fe1aa6004efb.png";
images[6].src = "//repo.bfw.wiki/bfwrepo/image/5fe1aab30521e.png";
images[7].src = "//repo.bfw.wiki/bfwrepo/image/5fe1aa9f781b0.png";
let next = 3;
let score = 0;

let items = [];

let gameOver = true;
let time = 0;
let endTime = 0;
let roundDuration = 20; //seconds

const AUDIO_CONTEXT = new (AudioContext || webkitAudioContext || window.webkitAudioContext)();

const keys = {
  DO: 261.6,
  RE: 293.7,
  MI: 329.6,
  FA: 349.2,
  SOL: 392.0,
  LA: 440.0,
  SI: 493.9,
  DO2: 523.2 };


let advice = false;

function initializeCanvas(canvasID) {
  const canvas = document.getElementById(canvasID);
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;
  return canvas;
}

snowBgCanvas = initializeCanvas('canvasSnowBackground');
branchCanvas = initializeCanvas('canvasTreeBranches');
snowFgCanvas = initializeCanvas('canvasSnowForeground');
gameCanvas = initializeCanvas('canvasGame');
gameCanvas.style.cursor = "none";

addEventListeners(gameCanvas);

createHangingBoards(
[20, -35],
CANVAS_WIDTH * 0.0186,
"Merry Christmas");

const treeLocation = [CANVAS_WIDTH * 0.5, CANVAS_HEIGHT * 0.95];
drawBranches(branchCanvas, treeLocation, 100, 0, 20);
drawLeaves(branchCanvas);
setInterval(function () {
  updateGame(gameCanvas);

  updateParticles(particles, [G]);
  updateSegments(segments);
  let ctx = gameCanvas.getContext("2d");
  drawObjects(particles, ctx);
  drawObjects(segments, ctx);
  drawObjects(boards, ctx);

  handleSnowflakes(snowBgCanvas);
  drawSnowBackground(snowBgCanvas);
}, 1000 / 60);
drawSnowForeground(snowFgCanvas);


function startGame() {
  gameOver = false;
  advice = false;
  endTime = roundDuration + new Date().getTime() / 1000;
  items = [];
  score = 0;
}

function updateTime(canvas) {
  time = endTime - new Date().getTime() / 1000;
  if (time <= 0) {
    gameOver = true;

    jingleBells();
  }

  let ctx = canvas.getContext("2d");
  ctx.beginPath(.........完整代码请登录后点击上方下载按钮下载查看