Gentleman to pure native 250 line jigsaw puzzle games

Puzzle Games

First to preview, cough, this is better than the last time the hamster will be more beautiful ...

Code can set the difficulty, 3 is 9,9 is 81 ...

Compared to the difficulty of this program is far higher than hit the hamster, I hope the small partner can keep up with ~

Html

The header is good to understand, note that the "new tab open Picture" equivalent to clearance benefits, usually hidden.

The content is so little, because the main logic of this piece of HTML code many properties are dynamic, so write dead no value, need to dynamically generate and delete in JS, so basically moved to JS inside, here just see a few containers on the line. Where #cut-imgs is the container for the game below.

Css

.cut-img {  position: absolute;  top: 0;  left: 0;  border: 0;  padding: 0;  transition: transform .3s linear;  box-sizing: border-box;}html,body {  height: 100%;  margin: 0;}body {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}header,main,footer {  width: 50%;}header {  display: flex;  justify-content: space-between;}main {  position: relative;  height: auto;}.game-area {  position: relative;  height: auto;}#background-img {  max-width: 100%;  max-height: 100%;  vertical-align: top;  opacity: 0;}#cut-imgs {  position: absolute;  top: 0;  left: 0;  display: flex;  flex-wrap: wrap;  width: 100%;  height: 100%;}button:focus {  outline: none;}.selected {  border: 1px solid blue;}#download {  display: none;}

CSS inside the note animation settings, as well as the processing of sliced images.

I believe the first reaction here is to cut a whole picture into 9 parts. In fact, it's just 9 containers (in this case, the button) showing a different part of the picture, and then controlling the relevant container.

The position of all the containers is the upper left corner, set the offset so that it is in each position, the specific setting method in JS.

Js

Const GAME = {//restart game restart () {//empty existing data, reset button This.reset () const LEVEL = this.config.level//Calculation Positi On the parameter const POSITIONPARAM = 1/(LEVEL-1) * The const IMGURL = THIS.CONFIG.IMGURL = ' Https://h5games-dom.oss-cn-ha Ngzhou.aliyuncs.com/puzzle/${~~ (Math.random () * 5)}.png ' Const BACKGROUNDIMG = Document.queryselector (' # Background-img ') backgroundimg.src = imgurl//Get style sheet Const StyleSheet = This.config.imgCutStyle = Document.styles HEETS[0]//If you have added a custom delete let Firstrule = Stylesheet.rules[0] if (firstrule.selectortext = = = '. Custom ') StyleSheet.      DeleteRule (0) Let scale = 1/this.config.level * + '% ' stylesheet.insertrule ('. Custom {width: ${scale};      Height: ${scale};      Background:url (${imgurl}) no-repeat; Background-size: ${this.config.level * 100}%; } ', 0) backgroundimg. = () = {(Let i = 0, j = Math.pow (This.config.level, 2); I < J; i++) {This.config.cutImgsCountArra    Y.push (i)}  Dom string Let Cutimgsstr = ' This.getinitialsort () This.config.cutImgsCountArray.forEach (num, index) =& Gt {//Save the correct change, make a decision whether to win the base This.config.trueTransforms.push (' translate (${index% level * 100}%, ${~~ (Index/lev EL)% level * 100}%) '//Set here will change the style const Transform = ' transform:translate (${num% level * 100}%, ${~~ ( Num/level)% level * 100}%), ' const backgroundposition = ' background-position: ${index% level * positionparam}% ${~~ (index/level)% level * positionparam}%; '//all in initial left position, set offset to cutimgsstr + = ' <button class= ' Cut-im      G Custom "Data-index=${index} =" Game.click (event) "style=" ${transform + backgroundposition} "></button> '}) Document.queryselector (' #cut-imgs '). InnerHTML = Cutimgsstr This.instance.cutImgs = Document.queryselectorall ('. CU T-img ')}},//Click picture Click (e) {Const INDEX = E.TARGET.DATASET.INDEX//First click to end directly if (This.tool.currentInde x = =-1) {thiS.GETCUTIMG (Index). Classlist.add (' selected ') This.tool.currentIndex = index return} const OLDCUTIMG = Thi S.getcutimg (This.tool.currentIndex)//If the click is not the same then go to logical if (This.tool.currentIndex = = = Index) {this.getcutimg (Ind       ex). Classlist.remove (' selected ') This.tool.currentIndex =-1} else {const NEWCUTIMG = this.getcutimg (index) const [A, b] = [NewCutImg.style.transform, oldCutImg.style.transform] OldCutImg.style.transform = a newcut         Img.style.transform = b this.tool.currentIndex =-1 setTimeout (() = {Download.style.display = ' none '  OldCutImg.classList.remove (' selected ') newCutImg.classList.remove (' selected ') if (This.checknowin ())     Console.log (' Nowin ') else {download.style.display = ' block ' alert (' Win ')}}, 500); }},//Get instance getcutimg (index) {return This.instance.cutimgs[index]},//Get the initial correct sort getinitialsort () {con    St cal = arr = {  Let length = arr.length let reverse = 0 for (Let i = 0; i < length-1; i++) {Let n = arr[i]      for (Let j = i + 1, j < length; J + +) {Let M = arr[j] if (n > m) reverse + = 1}} return reverse}//array random sort const Randomsort = (A, b) = Math.random () > 0.5?    -1:1//Loop until get a reversible sort while (1) {if (Cal (This.config.cutImgsCountArray.sort (randomsort))% 2 = = 0) return }},//check whether or not Victory Checknowin () {Let Cutimgs = This.instance.cutImgs let truetransforms = THIS.CONFIG.TRUETRANSFO RMS for (Let i = 0, j = this.instance.cutImgs.length; I < J; i++) {if (Cutimgs[i].style.transform!== Truetran Sforms[i]) return true},//Empty existing data reset () {Let Resetparam = This.resetparam This.config = this.deepcopy (r Esetparam.config) this.instance = this.deepcopy (resetparam.instance) This.tool = This.deepcopy (resetParam.tool) d Ownload.style.display = ' None '}, Deepcopy (obj) {    Return Json.parse (json.stringify (obj))},//Open Picture Openimage () {window.open (THIS.CONFIG.IMGURL)},//Reset time initialization Parameter resetparam: {//configuration config: {level:3, Cutimgscountarray: [], truetransforms: [], Imgcutsty      Le: {}, Imgurl: ',},///Instance instance: {//instance of all pictures Cutimgs: [],},//Record tool: { Currentindex:-1},}}game.restart ()

JS on a lot of trouble, logic and function matching, but also to use some unpopular knowledge, such as stylesheets related knowledge, has been using the framework, are quickly forgotten.

It is simple to say that the transform is replaced by the pre-and post-selection container. However, it is important to note that the underlying business logic is:

1. The first and next click is the same one, then you want to uncheck.

2. After the swap, you need to uncheck two.

3. Resetting the game requires a situation of the previous round of styling, re-typesetting.

4. The business logic of game clearance.

5. Ease of play configuration.

6. Pass the reward, hehe hey.

7. Wait, wait.

The specific basic logic is in the code, the relevant comments are added, like the small partners to look carefully, try hackers, practice a practice.

Here is not a lengthy to repeat.

I hope you have a good time.

GitHub source

Online Demo

Gentleman to pure native 250 line jigsaw puzzle games