基于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代码
<!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 来实现一个简单的拼图小游戏. 一.游戏的基础逻辑 想用一门语言来开发游戏,必须先了解如何使用这门语言来实现一些基础逻辑,比如图像的绘制.交互的处理.定时器等. 1.图形绘制 图形绘制是一切的基础,这里使用 JavaScript 在 canvas 上进行绘制.即先在 html 中创建 canvas 元素,然后在 JavaScript 中,通过 id 拿到这个元素,并且通过 canvas 拿到对应的上下文环境 context ,为后续的绘图做
-
JS实现拼图游戏
使用JS制作了一款拼图游戏供大家参考. 原理分析: 1.鼠标的点击和松开事件 2.显示原图作为参考 3.方块的移动替换 4.是否完成拼图的判断 5.完成之后会弹窗提示 效果演示 代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拼图游戏</title> </head> <style> body, html { p
-
使用 Node.js 模拟滑动拼图验证码操作的示例代码
近几年,网页上各种新型验证码层出不穷,其中一种比较常见的是滑动验证码,比如下图这种. 本文介绍了一种使用纯前端方法寻找滑动终点并模拟滑动的方法. 我们需要三个依赖库: puppeteer. Resemble.js 以及canvas.其中 puppeteer 用于打开并操作页面, Resemble.js 及 canvas 用于寻找滑动验证码的终点位置.相关依赖如下: "dependencies": { "canvas": "^1.6.7", &qu
-
JavaScript实现的拼图算法分析
本文实例分析了JavaScript实现的拼图算法.分享给大家供大家参考,具体如下: 学了html5的拖拽事件,相信做出一款小小的拼图游戏也不难吧.就来说一下怎么用drag事件完成拼图游戏吧,当然html5的新方法在IE下是不兼容的.这里我把这个拼图游戏封装成一个小插件,感兴趣的话可以直接copy来用,使用方法很简单. HTML,3个div里面什么都不用写,分别是用来放拼图,参照图,拼图面吧的. <div id="selectpanel"></div> <d
-
JS实现滑动拼图验证功能完整示例
本文实例讲述了JS实现滑动拼图验证功能.分享给大家供大家参考,具体如下: 先看一下效果图: 设置画布滑块属性 const l = 42, // 滑块边长 r = 10, // 滑块半径 w = 310, // canvas宽度 h = 155, // canvas高度 PI = Math.PI const L = l + r * 2 // 滑块实际边长 设置背景图片: 图片链接地址可以自行更换 function getRandomImg() { return 'https://picsum.ph
-
基于JS实现简单滑块拼图游戏
成品效果 <body> <div id="game" style="position:relative"></div> </body> /** * js配置 */ var config = { width: 300, height: 300, img: "./img/fj.jpg", gameDom: document.getElementById("game"), row: 3
-
js+canvas实现滑动拼图验证码功能
上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q
-
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如登陆页面 <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://static.geetes
-
基于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; curs
-
基于javascript实现获取最短路径算法代码实例
这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 路径 class GetAutoPath{ constructor(id, map, sPos, ePos, mapArr){ //this.type = id.type; this.id = id; this.map = map; this.sPos = sPos; this.ePos = eP
-
基于JavaScript实现猜数字游戏代码实例
环境 vscode 1.46 Microsoft Edge 83 示例 以下内容为了解和熟悉 JavaScript,不需要理解,能够复制粘贴并正确运行即可. 新建网页模板 在 vscode 中新建一个 index.html 文件,然后输入以下内容. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>猜数字游戏</title> <style&
-
基于JavaScript实现简单抽奖功能代码实例
为什么会做这个东西呢,纯属好玩,闲的 其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答 当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡 先来看看页面效果吧: 点击抽取就可以抽签了,红色框会显示内容,(PS:红色框是没有的,仅仅做描述) 抽取到的效果图如下,字体会随机滚动,最后停止: 里面的抽取内容完全可以替换,,,, 下面贴上代码: <!DOCTYPE html> <html lang="zh"> <head> &l
-
基于JavaScript实现轮播图代码
一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"
-
JavaScript删除指定子元素代码实例
原生javascript删除指定子元素代码实例: 本章节介绍一下如何利用原生javascript实现删除指定子元素. 大家都知道使用jquery实现此功能更为方便,不过使用原生的javascript也不麻烦,下面做一下介绍. 关于jquery如何实现此功能可以参阅jquery删除指定子元素代码实例一章节. 代码实例: 复制代码 代码如下: <!DOCTYPE HTML> <html> <meta charset="utf-8"> <title&
-
python基于gevent实现并发下载器代码实例
这篇文章主要介绍了python基于gevent实现并发下载器代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 并发下载原理 import gevent from gevent import monkey import urllib.request monkey.patch_all() def my_download(url): print('GET: %s' % url) resp = urllib.request.urlopen(url
-
基于python判断目录或者文件代码实例
这篇文章主要介绍了基于python判断目录或者文件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1. 判断目录是否存在 'isdir',删除目录时只有该目录为空才可以 'rmdir' import os if(os.path.isdir('D:/Python_workspace/spyder_space/test_各种功能/哈哈哈哈')): #判断目录是否存在 print('yes') os.rmdir('D:/Python_work
-
JavaScript多种滤镜算法实现代码实例
这篇文章主要介绍了JavaScript多种滤镜算法实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.灰色滤镜 设定R,G,B值相等 function makeGray(img){ for(var pixel of img.values()){ var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3; pixel.setRed(avg); pixel.setGree
-
JavaScript实现文件下载并重命名代码实例
这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种是HTML官网中的方法 <a href="/images/liang.jpg" rel="external nofollow" download="文件名称"> HTML5 中 a 标签提供了一个 filename 属性,可以下载成指定的 download 属性名称