基于JavaScript实现十五拼图代码实例


Posted in Javascript onApril 26, 2020

顾名思义,十五拼图就是将游戏画面中的数字从上到下,从左到右按顺序从1到15排列下来,看起来很简单,但是玩起来不容易。

css代码

body {
  font-family: cursive;
  font-size: 14pt;
  text-align: center;
}

#puzzlearea {
  height: 400px;
  margin: 0 auto;
  position: relative;
  width: 400px;
}

.highlight {
  border-color: red;
  cursor: pointer;
}

.puzzletile {
  background-image: url("../background.jpg");
  border: 5px solid black;
  position: absolute;
}

.highlight, #output {
  color: red;
}

.puzzletile, #output {
  font-size: 40pt;
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSE 154 Fifteen Puzzle</title>
  <!-- your files that you will write -->
  <link href="css/fifteen.css" rel="external nofollow" type="text/css" rel="stylesheet"/>
  <script src="js/fifteen.js" type="text/javascript"></script>

</head>
<body>
<h1>Fifteen Puzzle</h1>

<p>
  The goal of the fifteen puzzle is to un-jumble its fifteen squares
  by repeatedly making moves that slide squares into the empty space.
  How quickly can you solve it?
</p>

<div id="puzzlearea">
  <!--
    this area holds the actual fifteen puzzle pieces
    add to it as you need to
  -->
</div>

<p id="controls">
  <button id="shufflebutton">Shuffle</button>
</p>

<div id="output"></div>

<p>
  American puzzle author and mathematician Sam Loyd is often falsely
  credited with creating the puzzle; indeed, Loyd claimed from 1891
  until his death in 1911 that he invented it.
  The puzzle was actually created around 1874 by Noyes Palmer Chapman,
  a postmaster in Canastota, New York.
</p>
</body>
</html>

JavaScript代码

(function () {
  "use strict";

  let NUM = 4; //拼图的行列数 the number of rows/cols in the puzzle
  let spaceRow = 3; // 空白图块所在行
  let spaceColumn = 3; // 空白图块所在列
  let WIDTH = 100; // the pixel width/height of each tile

  // gets everything set when the window has loaded
  window.onload = function () {
   setSize();
   document.getElementById("select").onchange = changeSize;
   document.getElementById("shufflebutton").onclick = shuffle;
   createSquares();

  };

  // add a drop-down list to select difficulty level
  // 设置下拉列表 默认选中 option4
  function setSize() {
   var select = document.createElement("select");
   select.id = "select";
   for (var i = 3; i < 7; i++) {
     var option = document.createElement("option");
     option.innerHTML = i + " * " + i;
     option.value = i;
     option.id = "option" + i;
     select.appendChild(option);
   }
   document.getElementById("controls").appendChild(select);
   document.getElementById("option4").selected = "selected";
  }


  function changeSize() {
   NUM = this.value;
   spaceRow = this.value - 1;
   spaceColumn = this.value - 1;
   WIDTH = parseInt(400 / this.value);
   var puzzlearea = document.getElementById("puzzlearea");
   while (puzzlearea.contains(document.querySelector(".puzzletile"))) {
     puzzlearea.removeChild(document.querySelector(".puzzletile"));
   }
   createSquares();
  }

  // creates 15 puzzle tiles and sets them to their initial position
  function createSquares() {
   for (var i = 1; i < NUM * NUM; i++) {
     var div = document.createElement("div");
     div.className = "puzzletile";
     div.innerHTML = i;
     var row = Math.floor((i - 1) / NUM);
     var column = (i - 1) % NUM;
     var x = column * -1 * WIDTH + "px";
     var y = row * -1 * WIDTH + "px";

     // 减去边框的宽度 并且宽高相等
     div.style.height = WIDTH - 10 + "px";
     div.style.width = div.style.height;
     // 设置background 的 position
     div.style.backgroundPosition = x + " " + y;
     // 为每个拼图添加ID
     div.id = "square_" + row + "_" + column;
     // 设置水平和垂直方向的偏移量
     div.style.top = row * WIDTH + "px";
     div.style.left = column * WIDTH + "px";
     setEvents(div);
     document.getElementById("puzzlearea").appendChild(div);
   }
  }

  // shuffles puzzle tiles for 1000 times
  function shuffle() {
   // 实现Shuffle算法
   for (let j = 0; j < 1000; j++) {
     let neigbors = [];
     // 将所有的拼图 存储到 allPuzzles中
     let allPuzzles = document.getElementsByClassName("puzzletile");
     // 将与空白图块相邻的拼图 存储到数组neigbors中
     for (let i = 0; i < allPuzzles.length; i++) {
      // 判断拼图是否可以移动
      if (moveable(allPuzzles[i]))
        neigbors.push(allPuzzles[i]);
      }
     // 得到一个随机的索引
     let ranNum = getRandomIntInclusive(0, neigbors.length - 1);
     // 获取需要移动的拼图移动之前的偏移量
     let tempTop = neigbors[ranNum].style.top;
     let tempLeft = neigbors[ranNum].style.left;
     // 将拼图移动到空白图块处
     neigbors[ranNum].style.top = spaceRow * WIDTH + "px";
     neigbors[ranNum].style.left = spaceColumn * WIDTH + "px";
     neigbors[ranNum].id = "square_" + spaceRow + "_" + spaceColumn;
     // 更改空白图块的位置
     spaceRow = parseInt(tempTop) / WIDTH;
     spaceColumn = parseInt(tempLeft) / WIDTH;
   }


  }

  // 获取指定区间的随机数
  function getRandomIntInclusive(min, max) {
   min = Math.ceil(min);
   max = Math.floor(max);
   return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  // sets up events for all puzzle tiles
  function setEvents(div) {
   div.onmouseover = function () {
     if (moveable(this)) {
      this.classList.add("highlight"); // when mouse over, adds class "highlight"
     }
   };
   div.onmouseout = function () {
     // when mouse out, removes class "highlight"
     if (moveable(this)) {
      this.classList.remove("highlight"); // when mouse out, remove class "highlight"
     }
   };
   div.onclick = helper;
  }

  // a helper function for function "makeAMove"
  // displays "congratulations" if the player wins
  function helper() {
   if (moveable(this)) {
     makeAMove(this);
     if (win()) {
      document.getElementById("output").innerHTML = "Congratulations! You win!";
     } else {
      document.getElementById("output").innerHTML = "";
     }
   }
  }

  // make one move for the given tile
  function makeAMove(div) {

   div.id = "square_" + spaceRow + "_" + spaceColumn;
   var divRow = parseInt(div.style.top) / WIDTH;
   var divColumn = parseInt(div.style.left) / WIDTH;

   div.style.top = spaceRow * WIDTH + "px";
   div.style.left = spaceColumn * WIDTH + "px";
   spaceRow = divRow;
   spaceColumn = divColumn;

  }

  // return true if the given tile is moveable
  function moveable(div) {

   var divRow = parseInt(div.style.top) / WIDTH;
   var divColumn = parseInt(div.style.left) / WIDTH;
   if (spaceRow == divRow) {
     return Math.abs(spaceColumn - divColumn) == 1;
   }
   else if (spaceColumn == divColumn) {
     return Math.abs(spaceRow - divRow) == 1;
   }
   else {
     return false;
   }
  }

  // return true if all tiles are at their original positions
  function win() {
   var tiles = document.querySelectorAll(".puzzletile");
   for (var i = 0; i < tiles.length; i++) {
     var row = Math.floor(i / NUM);
     var column = i % NUM;
     if (tiles[i].id != "square_" + row + "_" + column) {
      console.log(tiles[i].id);
      return false;
     }
   }
   return true;
  }
})();

最后的效果

基于JavaScript实现十五拼图代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
简单说说angular.json文件的使用
Oct 29 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 #Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 #Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 #Javascript
详解关于Vue单元测试的几个坑
Apr 26 #Javascript
es6函数之箭头函数用法实例详解
Apr 25 #Javascript
es6数组之扩展运算符操作实例分析
Apr 25 #Javascript
es6函数之尾调用优化实例分析
Apr 25 #Javascript
You might like
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
三个Unix的命令面试题
2015/04/12 面试题
银行贷款承诺书
2014/03/29 职场文书
赔偿协议书范本
2014/04/15 职场文书
品牌转让协议书
2014/08/20 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
期末考试复习计划
2015/01/19 职场文书
书法社团活动总结
2015/05/07 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
把77A收信机改造成收音机
2022/04/05 无线电
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
基于Python编写一个监控CPU的应用系统
2022/06/25 Python
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers