PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

Every Spring Festival, the game platform will launch a special version of the Spring Festival scene, and all kinds of rewards, I also in elite liver for several days of peace, as a man likes to play games, tetris to contra to 4399 little game, to the QQ speed, CF and now CSGO, I also is a game of old players, But in fact, I can not forget the 4399 puzzle class small games, when the primary school in the computer class with classmates together rob to play, since play so much that they also want to write a simple play. No more nonsense, next into the theme, today’s theme is jigsaw puzzle games, the protagonist is the year of the tiger is the most popular, people see people love flowers bloom everywhere to send blessings of the little tiger.

I. Effect drawing

Two. Implementation ideas

Puzzle game is also called sudokus, so is the main game figure will be cut into nine parts, or image flat out is not the whole of the table are too large or too small can’t spell, and then enter the main interface in the initial game, anti-fuzzy figure and a wrong order, the order can rely on random Numbers, and then is how to calculate the puzzle judgment of success, Here is to assign the ID to the div of the subgraph. When the id of the subgraph corresponding to the div is the same as that of its parent div and the sum of the same times is 9, it means the jigsaw is successful. In addition, the game can be restarted by defining a click event to refresh the page or calling the initialization method again.

3. Functional decomposition

1. Cut the picture into 9 equal parts

1) The main picture of the puzzle should be 600px in length and width

.image_game{
    background-image:url(image/888.png);
}
Copy the code

2) Divide the main graph of 1) into 9 equal parts and shuffle the order by randomly distributing subgraphs

// Cut the original image in 9 equal parts and shuffle the order
$(document).ready(function(){
    for(var i=0; i<100; i++){var tus=document.getElementsByClassName('image_game');
        var m=parseInt(Math.random()*9);
        var n=parseInt(Math.random()*9);
        var tusmp=tus[m].parentNode;
        vartusnp=tus[n].parentNode; tusmp.appendChild(tus[n]); tusnp.appendChild(tus[m]); }});Copy the code

2. Action, capture a series of events on the picture, including dragging pictures, pictures overlay each other

1) Grab, also can be understood as mouse click on the subgraph, assign id to each subgraph,

/ / to grab
function drag(e){
    var id=e.target.id;
    e.dataTransfer.setData("id",id);// Set transmission to capture id;
}
Copy the code

2) Swap pictures after dragging and dropping

function over(e){
    e.preventDefault();
}
Copy the code

3) The judgment after the exchange, the judgment of whether the puzzle is completed

function drop(e){
    var beizhuaId=e.dataTransfer.getData("id");// Accept captured id;
    var fangID=e.target.id;// The id of the location;
    var beizhua=document.getElementById(beizhuaId);// Get the captured object;
    var fang=document.getElementById(fangID);// Get the object;
    var f_beizhua=beizhua.parentNode;// Find the corresponding parent node
    var f_fang=fang.parentNode;
    / / swap
    f_beizhua.appendChild(fang);
    f_fang.appendChild(beizhua);
    // How to judge success
    win();
}
Copy the code

4) Judge whether the jigsaw is completed: each parent and child ID has the same serial number, cycle and add count;

function win(){
    var tus=document.getElementsByClassName('image_game');
    var count=0;
    for(var i=0; i<tus.length; i++){var tu=tus[i];
        var fu=tu.parentNode;
        var tu_id=tu.getAttribute("id");
        var fu_id=fu.getAttribute("id");
        if(tu_id.replace("z-"."")==fu_id.replace("f-"."")){
            count++;
            console.log(count);
        }else{
            return; }}// The game is over when the graph is completely completed
    if(count==9){
        alert("You did it! Good luck in the Year of the Tiger!"); }}Copy the code

Four. Project link, because temporarily unable to deploy, interested partners can get the project to play

Code address: gitee.com/ShaChengPo/…

The last

Due to time constraints, the function is not very perfect, and can be added later to complete the game time, multi-level, simple, general, difficult, extremely difficult mode and other functions