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

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

代码语言：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;displ.........完整代码请登录后点击上方下载按钮下载查看