圣诞节向圣诞树上发射礼物小游戏代码
代码语言: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