js实现2d打羽毛球游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现2d打羽毛球游戏代码

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

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

<head>
  <meta charset="UTF-8">
  

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Press+Start+2P&amp;display=swap'>
  
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; height: 100%;
    background: #000;
    overflow: hidden;
    font-family: 'Press Start 2P', monospace;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  body { display: flex; align-items: center; justify-content: center; }
  #wrap {
    position: relative;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
  }
  #game {
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    background: #000;
  }
  #scan {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.16) 3px,
      rgba(0,0,0,0) 4px
    );
    pointer-events: none;
    mix-blend-mode: multiply;
  }
</style>


  
</head>

<body translate="no">
  <div id="wrap">
  <canvas id="game" width="220" height="390"></canvas>
  <div id="scan"></div>
</div>
  
    <script>
"use strict";

// ============================================================================
//  CONSTANTS
// ============================================================================
const W = 220,
H = 390;

const COLORS = {
  sky: "#3aa0e8",
  skyHigh: "#62b8ec",
  stadium: "#2a1a0a",
  railing: "#100806",
  courtA: "#c47a3d",
  courtB: "#b06a30",
  courtDark: "#7a4520",
  lines: "#f5f5f5",
  net: "#dcdcdc",
  netDark: "#888",
  player: "#e23838",
  playerAlt: "#8a1010",
  cpu: "#3858d8",
  cpuAlt: "#1a2a8a",
  skin: "#f4c890",
  ball: "#fae850",
  ballEdge: "#c9a418",
  shadow: "#0a0a14",
  hud: "#000",
  accent: "#f0a020",
  splashBg: "#1a0e2e" };


const CROWD_HATS = [
"#e23838",
"#3858d8",
"#fae850",
"#2d7a3e",
"#1a1a1a",
"#f0a020",
"#a040b8",
"#3a8a5a"];

const CROWD_SKINS = ["#f4c890", "#d4a070", "#8a6040", "#a07050"];

const COURT = {
  nearY: 372,
  farY: 104,
  nearLeftX: 30,
  nearRightX: 190,
  farLeftX: 78,
  farRightX: 142,
  nearLeftXOuter: 8,
  nearRightXOuter: 212,
  farLeftXOuter: 64,
  farRightXOuter: 156 };


const PHYS = {
  gravity: 0.08,
  flightFrames: 60,
  bounceDamp: 0.55,
  netZ: 8,
  hitZmin: 2,
  hitZmax: 30,
  hitRadius: 0.2 };


const STATE = {
  SPLASH: "splash",
  SERVING: "serving",
  RALLYING: "rallying",
  POINT_END: "pointEnd",
  MATCH_END: "matchEnd" };


// Mute button hit zone, bottom-right.
const MUTE_BTN = { x: 196, y: 370, w: 20, h: 16 };

const SPLASH_SOUND_BTN = { x: 60, y: 258, w: 100, h: 22 };
const SPLASH_START_BTN = { x: 30, y: 348, w: 160, h: 32 };

// ============================================================================
//  PIXEL ARROW SPRITES
// ============================================================================
const ARROW = {
  NW: [
  "##....#",
  "##.....",
  "#.#....",
  "#..#...",
  "....#..",
  ".....#.",
  "......#"],

  N: [
  "...#...",
  "..###..",
  ".#####.",
  "#..#..#",
  "...#...",
  "...#...",
  "...#..."],

  NE: [
  "#....##",
  ".....##",
  "....#.#",
  "...#..#",
  "..#....",
  ".#.....",
  "#......"],

  W: [
  "...#...",
  "..##...",
  ".######",
  "#######",
  ".######",
  "..##...",
  "...#..."],

  E: [
  "...#...",
  "...##..",
  "######.",
  "#######",
  "######.",
  "...##..",
  "...#..."] };



const CLOUD = {
  big: [
  "....######....",
  "..##########..",
  ".############.",
  "##############",
  ".############.",
  "..##########..",
  "....######...."],

  small: ["...####...", ".########.", "##########", ".########.", "..######.."],
  tiny: ["..####..", ".######.", "########", ".######."] };


function drawSprite(ctx, sprite, x, y, color) {
  ctx.fillStyle = color;
  for (let r = 0; r < sprite.length; r++) {
    const row = sprite[r];
    for (let c = 0; c < row.length; c++) {
      if (row[c] === "#") ctx.fillRect(x + c, y + r, 1, 1);
    }
  }
}

// ====================.........完整代码请登录后点击上方下载按钮下载查看