圣诞节向圣诞树上发射礼物小游戏代码

代码语言: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