js实现一个圣诞来人过桥小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现一个圣诞来人过桥小游戏代码，按住鼠标左键生长桥梁，松掉左键，放桥过桥

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

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

<head>

  <meta charset="UTF-8">

  
  
<style>
html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Arial, Verdana, sans-serif;
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #1e1a33;
}

div,
i {
  user-select: none;
  pointer-events: none;
}

i {
  position: fixed;
  color: white;
  top: -10%;
  z-index: 9999;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}

@keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}

@keyframes snowflakes-shake {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(80px);
  }
  100% {
    transform: translateX(0px);
  }
}
</style>



</head>

<body>


      <script >
let status = "waiting";
let lastTimestamp;
let santaX;
let santaY;
let sceneOffset;
let score = 0;
let platforms = [];
let sticks = [];
let trees = [];
let clouds = [];

const config = {
  canvasWidth: 375,
  canvasHeight: 375,
  platformHeight: 100,
  santaDistanceFromEdge: 10,
  paddingX: 100,
  perfectAreaSize: 10,
  backgroundSpeedMultiplier: 0.2,
  speed: 4,
  santaWidth: 17,
  santaHeight: 30 };


const colours = {
  lightBg: "#62AFB9",
  medBg: "#182757",
  darkBg: "#0D5B66",
  lightHill: "#E9E9E9",
  medHill: "#34A65F",
  darkHill: "#07133A",
  platform: "#9B4546",
  platformTop: "#620E0E",
  em: "#CC231E",
  skin: "#CF6D60" };


const hills = [
{
  baseHeight: 120,
  amplitude: 20,
  stretch: 0.5,
  colour: colours.lightHill },

{
  baseHeight: 100,
  amplitude: 10,
  stretch: 1,
  colour: colours.medHill },

{
  baseHeight: 70,
  amplitude: 20,
  stretch: 0.5,
  colour: colours.darkHill }];



const scoreElement = createElementStyle(
"div",
`position:absolute;top:1.5em;font-size:5em;font-weight:900;text-shadow:${addShadow(
colours.darkHill,
7)
}`);

const canvas = createElementStyle("canvas");
const introductionElement = createElementStyle(
"div",
`font-size:1.2em;position:absolute;text-align:center;transition:opacity 2s;width:250px`,
"Press and hold anywhere to stretch out a sugar cane, it has to be the exact length or Santa will fall down");

const perfectElement = createElementStyle(
"div",
"position:absolute;opacity:0;transition:opacity 2s",
"Double Score");

const restartButton = createElementStyle(
"button",
`width:120px;height:120px;position:absolute;border-radius:50%;color:white;background-color:${colours.em};border:none;font-weight:700;font-size:1.2em;display:none;cursor:pointer`,
"RESTART");


for (let i = 0; i <= 30; i++) {
  createElementStyle(
  "i",
  `font-size: ${3 * Math.random()}em;left: ${
  100 * Math.random()
  }%; animation-delay: ${10 * Math.random()}s, ${2 * Math.random()}s`,
  ".");

}

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const ctx = canvas.getContext("2d");

Array.prototype.last = function () {
  return this[this.length - 1];
};

Math.sinus = function (degree) {
  return Math.sin(degree / 180 * Math.PI);
};

window.addEventListener("keydown", function (event) {
  if (event.key == " ") {
    event.preventDefault();
    resetGame();
    return;
  }
});

["mousedown", "touchstart"].forEach(function (evt) {
  window.addEventListener(evt, function (event) {
    if (status == "waiting") {
      lastTimestamp = undefined;
      introductionElement.style.opacity = 0;
      status = "stretching";
      window.requestAnimationFrame(animate);
    }
  });
});

["mouseup", "touchend"].forEach(function (evt) {
  window.addEventListener(evt, function (event) {
    if (status == "stretching") {
      status = "turning";
    }
  });
});

window.addEventListener("resize", function (event) {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  draw();
});

restartButton.addEventListener("click", function (event) {
  event.preventDefault();
  resetGame();
  restartButton.style.display = "none";
});

window.requestAnimationFrame(animate);

resetGame();

function resetGame() {
  status = "waiting";
  lastTimestamp = undefined;
  sceneOffset = 0;
  score = 0;
  introductionElement.style.opacity = 1;
  perfectElement.style.opacity = 0;
  restartButton.style.display = "none";
  scoreElement.innerText = score;
  platforms = [{ x: 50, w: 50 }];
  santaX = platforms[0].x + platforms[0].w - config.santaDistanceFromEdge;
  santaY = 0;
  sticks = [{ x: platforms[0].x + platforms[0].w, length: 0, rotation: 0 }];
  trees = [];
  clouds = [];

  for (let i = 0; i <= 20; i++) {
    if (i <= 3) generatePlatform();
    generateTree();
    generateCloud();
  }

  draw();
}

function generateCloud() {
  const minimumGap = 60;
  const maximumGap = 300;

  const lastCloud = clouds[clouds.length - 1];
  let furthestX = lastCloud ? lastCloud.x : 0;

  const x =
  furthestX +
  minimumGap +
  Math.floor(Math.random() * (maximumGap - minimumGap));

  const y =
  minimumGap +
  Math.floor(Math.random() * (maximumGap - minimumGap)) -
  window.innerHeight / 1.2;

  const w = Math.floor(Math.random() * 15 + 15);
  clouds.push({ x, y, w });
}

function generateTree() {
  const minimumGap = 30;
  const maximumGap = 150;

  const lastTree = trees[trees.length - 1];
  let furthestX = lastTree ? lastTree.x : 0;

  const x =
  furthestX +
  m.........完整代码请登录后点击上方下载按钮下载查看