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 +
  minimumGap +
  Math.floor(Math.random() * (maximumGap - minimumGap));

  const treeColors = [colours.lightHill, colours.medBg, colours.medHill];
  const color = treeColors[Math.floor(Math.random() * 3)];

  trees.push({ x, color });
}

function generatePlatform() {
  const minimumGap = 40;
  const maximumGap = 200;
  const minimumWidth = 20;
  const maximumWidth = 100;

  const lastPlatform = platforms[platforms.length - 1];
  let furthestX = lastPlatform.x + lastPlatform.w;

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

  platforms.push({ x, w });
}

function animate(timestamp) {
  if (!lastTimestamp) {
    lastTimestamp = timestamp;
    window.requestAnimationFrame(animate);
    return;
  }

  switch (status) {
    case "waiting":
      return;
    case "stretching":{
        sticks.last().length += (timestamp - lastTimestamp) / config.speed;
        break;
      }
    case "turning":{
        sticks.last().rotation += (timestamp - lastTimestamp) / config.speed;

        if (sticks.last().rotation > 90) {
          sticks.last().rotation = 90;

          const [nextPlatform, perfectHit] = thePlatformTheStickHits();
          if (nextPlatform) {
            score += perfectHit ? 2 : 1;
            scoreElement.innerText = score;

            if (perfectHit) {
              perfectElement.style.opacity = 1;
              setTimeout(() => perfectElement.style.opacity = 0, 1000);
            }

            generatePlatform();
            generateTree();
            generateTree();

            generateCloud();
            generateCloud();
          }

          status = "walking";
        }
        break;
      }
    case "walking":{
        santaX += (timestamp - lastTimestamp) / config.speed;

        const [nextPlatform] = thePlatformTheStickHits();
        if (nextPlatform) {
          const maxSantaX =
          nextPlatform.x + nextPlatform.w - config.santaDistanceFromEdge;
          if (santaX > maxSantaX) {
            santaX = maxSantaX;
            status = "transitioning";
          }
        } else {
          const maxSantaX =
          sticks.last().x + sticks.last().length + config.santaWidth;
          if (santaX > maxSantaX) {
            santaX = maxSantaX;
            status = "falling";
          }
        }
        break;
      }
    case "transitioning":{
        sceneOffset += (timestamp - lastTimestamp) / (config.speed / 2);

        const [nextPlatform] = thePlatformTheStickHits();
        if (sceneOffset > nextPlatform.x + nextPlatform.w - config.paddingX) {
          sticks.push({
            x: nextPlatform.x + nextPlatform.w,
            length: 0,
            rotation: 0 });

          status = "waiting";
        }
        break;
      }
    case "fall.........完整代码请登录后点击上方下载按钮下载查看