html js制作高级拼图,基于JavaScript实现十五拼图代码实例
顾名思义,十五拼图就是将游戏画面中的数字从上到下,从左到右按顺序从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代码
CSE 154 Fifteen Puzzle
Fifteen Puzzle
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?
Shuffle
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.
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;
}
})();
最后的效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html js制作高级拼图,基于JavaScript实现十五拼图代码实例相关推荐
- 曼哈顿距离java实现_基于javascript实现获取最短路径算法代码实例
这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 ...
- PHP代码猜数字游戏,基于JavaScript实现猜数字游戏代码实例
环境 vscode 1.46 Microsoft Edge 83 示例 以下内容为了解和熟悉 JavaScript,不需要理解,能够复制粘贴并正确运行即可. 新建网页模板 在 vscode 中新建一个 ...
- html年会抽奖代码实例,基于JavaScript实现简单抽奖功能代码实例
为什么会做这个东西呢,纯属好玩,闲的 其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答 当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡 先来看看页面效果吧: 点击抽取 ...
- html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例
本篇文章小编给大家分享一下JavaScript仿京东秒杀倒计时代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 仿京东秒杀倒计时 html代码 秒杀倒计时 : : c ...
- java字典写实例,基于JAVA的新华字典接口调用代码实例
基于JAVA的新华字典接口调用代码实例 接口描述:基于JA V A的新华字典接口调用代码实例 接口平台:聚合数据 import java.io.BufferedReader; import java. ...
- cpu java poi 导出_java基于poi导出excel透视表代码实例
这篇文章主要介绍了java基于poi导出excel透视表代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 从前,我是一个前端程序猿,怀着对打通 ...
- java订单类_基于Java创建一个订单类代码实例
这篇文章主要介绍了基于Java创建一个订单类代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需求描述 定义一个类,描述订单信息 订单id 订 ...
- 基于python的音频播放器_基于python实现音乐播放器代码实例
基于python实现音乐播放器代码实例,一首,函数,按钮,布局,音乐 基于python实现音乐播放器代码实例 易采站长站,站长之家为您整理了基于python实现音乐播放器代码实例的相关内容. 核心播放 ...
- python开发语音录入_基于python实现语音录入识别代码实例
这篇文章主要介绍了如何通过python实现语音录入识别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.介绍 1.第一步录音存入本地 2.调用百度 ...
最新文章
- Multithreading in Java
- 【linux练习】基础作业一
- conflicting types for xx错误
- iOS 7开发快速入门
- springcloud(九):配置中心和消息总线(配置中心终结版)
- 艾默生变频器报警PHP,艾默生ct变频器报警ou 这个CT的变频器报警UU怎么解决?
- python多进程并发与pool多线程
- 【HTML+CSS网页设计与布局 从入门到精通】第14章-float/position/display属性
- Ajax 滚动异步加载数据
- 几种常见的微服务架构方案——ZeroC IceGrid、Spring Cloud、基于消息队列、Docker Swarm
- 二十一天学通之cookie的路径和域
- mvc4开篇之BundleConfig(1)
- 机器学习基石 作业0
- php fakepath,chrome上传图片 路径为c:/fakepath的解决办法
- js实现视频截图,并通过post请求发送图片
- json_encode转义中文问题
- 微信公众号开发模式几点介绍
- Fintech趣店总部(厦门)技术招聘
- 第七章:OCP工具简介
- 案例研究:中国金融科技50强之“安心de利”风控模式