相思资源网 Design By www.200059.com
顾名思义,十五拼图就是将游戏画面中的数字从上到下,从左到右按顺序从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="/UploadFiles/2021-04-02/fifteen.js">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,十五拼图
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无基于JavaScript实现十五拼图代码实例的评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。