js实现一个拼图小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现一个拼图小游戏代码，start game 在这个游戏中，你通过改变拼图碎片的大小来移动它们。每个动作涉及两个相邻的碎片，并分为两个阶段进行。首先，拖动拼图碎片的边缘以减小一个维度（高度或宽度），从而创建一个空位然后，这个空位必须通过增加另一个维度（宽度或高度）来被邻近的碎片恰好填满将鼠标光标悬停在拼图碎片的边缘上，可以找到一个合法的动作。红色和绿色虚线表示这个边缘是否可以合法移动。当线条为绿色时，按下鼠标左键，并在移动边缘到白色线之一时保持按住。然后释放按钮，你就完成了第一阶段。大多

代码标签： js 拼图小游戏代码

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

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

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


  
  
<style>
body {
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  background-color: #000;
  margin: 0;
  padding: 0;
  border-width: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.explic {
  background-color: white;
  position: absolute;
  z-index: 10;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  padding: 5px;
  border: 10px solid #ccc;
  border-radius: 15px;
  min-width: 75%;
  /*      max-width: 75%; */
  display: none;
}

.explic.disp {
  display: block;
}

.explic .buttons {
  text-align: center;
}

.explic button {
  margin-left: 10px;
  margin-right: 10px;
}

.highligh {
  font-style: italic;
}

input {
  caret-color: auto;
}

#menu {
  font-size: 80%;
  margin: 0;
  padding: 5px;
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 10px;
  background-color: rgba(255, 255, 128, 0.9);
  color: black;
  z-index: 10;
}

#menu.hidden #showhide {
  display: none;
}

#controls {
  margin-top: 0px;
  margin-bottom: 0px;
}

#menu.hidden #controls {
  color: #00c;
  font-weight: bold;
  font-size: 200%;
}

#menu button {
  margin-right: 5px;
  margin-left: 5px;
  border-radius: 5px;
}

#menu .center {
  text-align: center;
}

#splash {
  color: white;
  z-index: 15;
  position: absolute;
  left: 50%;
  top: 50vh;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  border: 10px solid white;
  font-size: 400%;
  padding: 0.25ex;
}

#splash.hidden {
  display: none;
}
</style>


  
</head>

<body translate="no">
  <div id="menu">
  <p id="controls">&#x2261;</p>
  <div id="showhide">
    <hr>
    <p><label for="numbered">numbered:</label> <input type="checkbox" id="numbered"></p>
    <p><label for="level">level:</label> <select id="level">
        <option value="1" selected>1.5 x 1.5</option>
        <option value="2">2.5 x 1.5</option>
        <option value="3">2.5 x 2.5</option>
        <option value="4">3.5 x 2.5</option>
        <option value="5">3.5 x 3.5</option>
      </select></p>
    <p class="center"><button type="button" id="instructions">instructions</button></p>
    <p class="center"><button type="button" id="start">start game</button></p>
  </div> <!-- showhide -->
</div> <!-- menu -->
<div id="splash">YOU WIN!</div>
<div class="explic" id="explic1">
 <p>这个游戏的目标是通过重新排列拼图碎片来重现初始配置。</p> <p>初始配置在游戏表面右侧和底部边缘有一排1 x 1的方块，其余部分为2 x 2的方块。</p> <p>初学者应从非编号版本开始。当你轻松解决时，尝试编号版本。会更难。</p> 
  <p class="buttons"><button type="button" class="next">next</button><button type="button" class="close">close</button></p>
</div>
<div class="explic" id="explic2">
  <p>在这个游戏中，你通过改变拼图碎片的大小来移动它们。每个动作涉及两个相邻的碎片，并分为两个阶段进行。 <p> <ul> <li>首先，拖动拼图碎片的边缘以减小一个维度（高度或宽度），从而创建一个空位</li> <li>然后，这个空位必须通过增加<span class="highligh">另一个维度</span>（宽度或高度）来被邻近的碎片恰好填满</li> </ul> <p>将鼠标光标悬停在拼图碎片的边缘上，可以找到一个合法的动作。红色和绿色虚线表示这个边缘是否可以合法移动。当线条为绿色时，按下鼠标左键，并在移动边缘到白色线之一时保持按住。然后释放按钮，你就完成了第一阶段。</p> <p>大多数情况下，动作的第二部分只有一种可能性。它会自动发生。</p> <p>在某些情况下，系统会要求你选择哪个方块来填补空位。只需点击其中一个即可。</p> 
  <p class="buttons"><button type="button" class="next">next</button><button type="button" class="close">close</button></p>
</div>
<div class="explic" id="explic3">
 <p>游戏开始时，会显示原始位置。点击拼图一次以打乱碎片。</p> <p>然后……尽情享受吧！</p>

  <p class="buttons"><button type="button" class="close">close</button></p>
</div>
  
      <script >
"use strict";

let canv, ctx; // canvas and context
let maxx, maxy; // canvas dimensions
let grid;
let mousePosition;
let rectangles;
let explics;
const bgColor = "#000";
let ui, uiv;
// for animation
let messages;
let splash;
let firstRun = true;

// styles for lines
const LINE_ATTR_HOVER_NO = {
  color: "#f00",
  lineDash: [10, 10],
  lineWidth: 3
};
const LINE_ATTR_HOVER_YES = {
  color: "#0f0",
  lineDash: [10, 10],
  lineWidth: 3
};
const LINE_ATTR_CHOICE = {
  color: "#0f0",
  lineDash: [5, 5],
  lineWidth: 2
};

const LINE_ATTR_TARGET = {
  lineWidth: 1.5,
  color: "#fff"
};

let tolMouse = 10; // tolerance on mouse position

// shortcuts for Math.
const mrandom = Math.random;
const mfloor = Math.floor;
const mround = Math.round;
const mceil = Math.ceil;
const mabs = Math.abs;
const mmin = Math.min;
const mmax = Math.max;

const mPI = Math.PI;
const mPIS2 = Math.PI / 2;
const mPIS3 = Math.PI / 3;
const m2PI = Math.PI * 2;
const m2PIS3 = (Math.PI * 2) / 3;
const msin = Math.sin;
const mcos = Math.cos;
const matan2 = Math.atan2;

const mhypot = Math.hypot;
const msqrt = Math.sqrt;

const rac3 = msqrt(3);
const rac3s2 = rac3 / 2;

//------------------------------------------------------------------------
function isMiniature() {
  return location.pathname.includes("/fullcpgrid/");
}

function alea(mini, maxi) {
  // random number in given range

  if (typeof maxi == "undefined") return mini * mrandom(); // range 0..mini.........完整代码请登录后点击上方下载按钮下载查看