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

js实现一个拼图小游戏代码

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