您的位置：首页技术文章
文章详情页

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

更多 QQ空间 微信 QQ好友 腾讯朋友 复制链接
【字号：大 中 小】日期：2023-11-01 16:45:56浏览：2作者：猪猪

顾名思义，十五拼图就是将游戏画面中的数字从上到下，从左到右按顺序从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='https://www.haobala.com/bcjs/css/fifteen.css' rel='external nofollow' type='text/css' rel='stylesheet'/> <script src='https://www.haobala.com/bcjs/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. + 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. + 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]. + 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. + 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 使用sleep函数的常见方法详解下一条：javascript设计模式 ? 访问者模式原理与用法实例分析
相关文章：
1. 在Asp.net core项目中使用WebSocket2. ASP.NET MVC使用异步Action的方法3. 利用FastReport传递图片参数在报表上展示签名信息的实现方法4. 使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例5. Docker配置本地镜像与容器的存储位置6. 使用vue-cli创建项目并webpack打包的操作方法7. 浅谈springboot一个service内组件的加载顺序8. SpringMVC+Jquery实现Ajax功能9. matplotlib如何设置坐标轴刻度的个数及标签的方法总结10. Vue封装通用table组件的完整步骤记录
排行榜
ASP.NET MVC使用异步Action的方法
ASP.NET MVC使用异步Action的方法
1. 在Asp.net core项目中使用WebSocket
2. SpringMVC+Jquery实现Ajax功能
3. matplotlib如何设置坐标轴刻度的个数及标签的方法总结
4. Docker配置本地镜像与容器的存储位置
5. 使用vue-cli创建项目并webpack打包的操作方法
6. 浅谈springboot一个service内组件的加载顺序
7. 使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
8. 利用FastReport传递图片参数在报表上展示签名信息的实现方法
9. 如何使用Python逆向抓取APP数据
10. Vue封装通用table组件的完整步骤记录
热门标签