Game Puzzle Sederhana Dengan Javascript

Admin 6/12/2019 06:33:00 PM javascript , Tips and Tricks Comment

Game puzzle mungkin sudah dianggap jadul bagi pecinta game. Ya karena era globalisasi semakin maju game-game yang sekarang sudah banyak seru ketimbang main puzzle. Mungkin masih ada sedikit yang main puzzle.

Anak-anak jaman sekarang mah udah ga suka lagi main puzzle. Sekarang sudah jaman nya game battle royale. Ok gapapalah meskipun udah sedikit yang main game puzzle saya akan sedikit membahasnya.

Dulunya game puzzle sangat diminati oleh banyak orang namun jaman sudah berganti gan. Game puzzle juga bisa buat asah otak gan. Saat main game ini kita kan juga mikir ini posisinya diamana. Udah pas atau tidak. Nah disitulah otak kita mulai bekerja.

Sebenarnya banyak versi game puzzle dari orang-orang yang telah membuat game. Namun kali ini saya pilih yang menurut saya lebih seru.

Nah bagaimana cara membuat game puzzle ini? Cara nya gampang banget kalian copy script dibawah ini. Ada 3 Komponen dari game ini yaitu html, css, dan javascript

Komponen yang pertama adalah html. Kalian copy script dibawah ini kemudian save dengan nama index.html

Komponen yang kedua adalah css. Sama seperti cara yang diatas kalian save dengan nama style.css

html,body{
height:100%;
margin:0px;
padding:0px;
    background-color: white;

}
body{
font-family:Arial, Helvetica, sans-serif;

height: 2000px;
      -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
    overflow-x: hidden;
    
}
h1{
    display: inline-block;
    margin: 10px 0px 10px 10px;
    line-height: 32px;
    vertical-align: middle;
    font-family:arial;
    font-weight:100;

color:black;
  
   
}
h1>span{
    font-size: 18px;

}
h2{
    margin: 0;
    font-weight: normal;
}
[type=button]{

margin-left: 20px;
    font-size: 18px;
    vertical-align:middle;
    padding: 0;
    
    cursor: pointer;
    transition: .3s;
    overflow: hidden;
    line-height: 32px;
    height: 32px;
    transition:background .24s, height .4s ease .4s;
    width: 128px;
    text-align: center;
    box-shadow: 0px 0px 2px black;
    border-radius: 5px;
  border:none;
    
    background-color: white;
    color:black;
  
    
    
    
}
[type=button]:hover{
   color:white;
    background-color: black;
   box-shadow: 1px 1px 3px black;
   
   
}
#container{
margin:auto;
    box-shadow: inset 0px 0px 3px black;

background-repeat: no-repeat;
   
    
   
  transition: background-position .24s ease .24s;
 
   
}
.position{
width:100px;
height:100px;
    
    display:inline-block;
vertical-align:top;
 
}
.move svg{
margin-top:-40px;
    margin-left: -40px;
 
    
}

.move{
    width:100px;
    height:100px;
    position:absolute;
    z-index: 0;
    transition:transform .2s;
}
.move svg>path{
    fill:url(#xina);
    stroke:#001111;
    stroke-width:1px;
}
[classangle=g0] path{
    filter:url(#g0);
}
[classangle=g1] path{
    filter:url(#g1);
}
[classangle=g2] path{
    filter:url(#g2);
}
[classangle=g3] path{
    filter:url(#g3);
}

#tap{
    position:absolute;
    width: 100%;
    height: 2000px;
    background-color:black;
    z-index: 900;
    opacity:0;
    transition:height 0s ease , opacity .6s ease ;
    color:white;
    
}
#models{
 
    height: 0;
    text-align:center;
    overflow: hidden;    
}
#models>div{
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
    padding: 10px;
    border:1px solid white;
    text-align: left;
    cursor: pointer;
    transition: .24s;
   
}
#models>div:hover{
    background-color:white; 
    color:black;
}
#seeModel{
    position:absolute;
    top:-100px;
    right: 60px;
    width: 100px;    
    background-color: gray;
    color:white;
    z-index:0; 
    transition:  .4s ease .2s;
    vertical-align: middle;
    
    line-height: 32px;
    text-align: center;  
 
   
}
#fullscreen{
    height: 32px;
    width: 32px;
    position:fixed;
    top:10px;
     right: 10px;
    cursor: pointer;
    transition:.24s;
    z-index: 1000;
}
#fullscreen:hover{
    transform:scale(1.1)
}
.fullscreen{
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d=' M 2 2 L 14 2 L 14 6 L 6 6 L 6 14 L 2 14 L 2 2 Z  M 2 30 L 14 30 L 14 26 L 6 26 L 6 18 L 2 18 L 2 30 Z  M 30 2 L 18 2 L 18 6 L 26 6 L 26 14 L 30 14 L 30 2 Z  M 30 30 L 18 30 L 18 26 L 26 26 L 26 18 L 30 18 L 30 30 Z ' fill='black'/></svg>");
}
.fullscreenOff{
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d=' M 14 14 L 2 14 L 2 10 L 10 10 L 10 2 L 14 2 L 14 14 Z  M 14 18 L 2 18 L 2 22 L 10 22 L 10 30 L 14 30 L 14 18 Z  M 18 14 L 30 14 L 30 10 L 22 10 L 22 2 L 18 2 L 18 14 Z  M 18 18 L 30 18 L 30 22 L 22 22 L 22 30 L 18 30 L 18 18 Z ' fill='black'/></svg>");
}
#time{
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
    transition: .6s;
    transition-delay: 1s;
}
#logo{
       display: inline-block; 
       margin:10px 0px 10px 10px;
       vertical-align: middle;
       filter:grayscale(100%)
    }
    #logo:hover{
        filter:grayscale(0)
    }

Kali ini komponen yang terakhir kalian save dengan nama script.js

var zIndex=1
var host='http://www.wdisseny.com/puzzle/'

pezaSeleccionada= false
function crearDreta(i){
 //return {draw:" l -10,50 l 10,50 ",invers:" l  -10,-50 l 10,-50 "} 
    var path =[
        {draw:"q -4,20 -5,43 l-5,0 a11,11 1,1,0 0,14 l5,0 q1,20 5,43",
         invers:"q -4,-20  -5,-43 l-5,0 a11,11 1,1,1 0,-14 l5,0 q 1-20 5,-43"},
        {draw:"q -4,20 -5,43 l5,0 a11,11 1,1,1 0,14 l-5,0 q1,20 5,43",
         invers:"q -4,-20 -5,-43 l 5,0 a11,11 1,1,0 0,-14 l-5,0 q 1-20 5,-43"},
         {draw:"q 4,20 5,43 l-5,0 a11,11 1,1,0 0,14 l5,0 q -1,20 -5,43",
         invers:"q 4,-20  5,-43 l-5,0 a11,11 1,1,1 0,-14 l5,0 q -1-20 -5,-43"},
        {draw:"q 4,20 5,43 l5,0 a11,11 1,1,1 0,14 l-5,0 q -1,20 -5,43",
         invers:"q 4,-20  5,-43 l5,0 a11,11 1,1,0 0,-14 l-5,0 q -1-20 -5,-43"}, 
    ]
    
    return path[Math.floor(Math.random()*path.length)]
    
}
function crearInferior(i){
 //return {draw:" l -50,10 l -50,-10 ",invers:" l  50,10 l 50,-10 "}
    var path =[
        {draw:"q -20,-4 -43,-5 l0,-5 a11,11 1,1,0 -14,0 l0,5 q-20,1 -43,5",
         invers:"q 20,-4 43,-5 l0,-5 a11,11 1,1,1 14,0 l0,5 q20,1 43,5 "},
        {draw:"q -20,-4 -43,-5 l0,5 a11,11 1,1,1 -14,0 l0,-5 q-20,1 -43,5",
         invers:"q 20,-4 43,-5 l0,5 a11,11 1,1,0 14,0 l0,-5 q20,1 43,5 "},
       {draw:"q -20,4 -43,5 l0,-5 a11,11 1,1,0 -14,0 l0,5 q-20,-1 -43,-5",
         invers:"q 20,4 43,5 l0,-5 a11,11 1,1,1 14,0 l0,5 q20,-1 43,-5 "},
        {draw:"q -20,4 -43,5 l0,5 a11,11 1,1,1 -14,0 l0,-5 q-20,-1 -43,-5",
         invers:"q 20,4 43,5 l0,5 a11,11 1,1,0 14,0 l0,-5 q20,-1 43,-5 "}, 
    ]
    
    return path[Math.floor(Math.random()*path.length)]
}
function inversDreta(i){
    return {draw:director[i-1].b.invers}
}
function inversSuperior(i){    
    return {draw:director[i-numCols].c.invers}
}

function createSvg(pathPeza,x,y,index){
    xmlns = "http://www.w3.org/2000/svg"
    var svg=document.createElementNS(xmlns,"svg")
    var idPattern="row"+x+"col"+y
    var pattern='<defs><pattern id="'+ idPattern +'" patternUnits="userSpaceOnUse" width="600" height="400"><image xlink:href="'+host+model.urlImg+'" x="'+(x*-100+40)+'" y="'+(y*-100+40)+'" width="'+(numCols*100)+'" height="'+(numRows*100)+'" /></pattern></defs>'
    svg.innerHTML= pattern
    svg.setAttribute("width",180)
    svg.setAttribute("height",180)
    var path= document.createElementNS(xmlns,"path")
    path.setAttribute("d","M40,40 "+pathPeza)
    path.setAttribute("fill","url(#"+idPattern+")")
    path.style.fill="url(#"+idPattern+")"
    svg.appendChild(path)
    var move = document.createElement("DIV")
    move.appendChild(svg)
    move.className="move"
    move.path=path
    move.onmousemove=getPos
    move.onmouseout=stopTracking
    //move.setAttribute("classangle","g0")
    move.angle=0
    move.occupy= false
    move.position=function(){return {left:this.offsetLeft+50,top:this.offsetTop +50}}
    move.onmouseup=dropPiece
    move.index=index    
    var position = document.createElement("DIV")
    position.className="position"
    position.index=index
    position.occupied =false
    document.querySelector("#container").appendChild(position)
    position.appendChild(move)
    move.style.zIndex = zIndex++
    move.zIndexPrevi=move.style.zIndex
    
   
}
var i, element
var models=[
   
    {
    numRows : 4,
    numCols : 6,
    urlImg :"4x6.jpg"
    },
    {
    numRows : 2,
    numCols : 2,
    urlImg :"2x2.jpg"
    }, 
    {
    numRows : 3,
    numCols : 3,
    urlImg :"3x3.png"
    }, 
     {
    numRows : 4,
    numCols : 4,
    urlImg :"4x4.jpg"
    },

{
    numRows : 5,
    numCols : 5,
    urlImg :"5x5.png"
    },
        {
    numRows : 5,
    numCols : 7,
    urlImg :"7x5.jpg"
    },
            {
    numRows : 6,
    numCols : 8,
    urlImg :"8x6.jpg"
    },
    
]
function createListModels(){
    var HTMLmodels="<h2>
Select model</h2>
"
    models.forEach(function(e,i){

HTMLmodels+="<div onClick='selectModel("+i+")'>
<b>"+ (i+1) +"</b><br>"+
            e.numCols * e.numRows+" pieces<br>"+    
            '<img height="'+(e.numRows/3*100)+'" src="'+host+e.urlImg+'" width="'+(e.numcols/3*100)+'"><br><small>' + 
            e.numCols*100 +"x" +e.numRows*100 +
            "</small></div>
"
    })
    document.getElementById("models").innerHTML=HTMLmodels
  }

}
function showModels(){
    document.getElementById("models").style.height="2000px"
    document.getElementById("time").innerHTML=""
    document.querySelector("#modelsButton").style.height=0
    document.querySelector("#tap").style.height=""
    document.querySelector("#tap").style.opacity=1
}
function start(){
    document.querySelector("#start").style.height=0
    document.querySelector("#modelsButton").style.height=0
    document.querySelector("#seeModel").style.top="10px"
    document.querySelector("#tap").style.height=0
    document.querySelector("#tap").style.opacity=0
    document.querySelector("#modelsButton").style.height=0    
    document.querySelectorAll(".move").forEach(function(e,i){ 
       
        e.parentNode.removeChild(e)
        document.body.appendChild(e)
        e.style.top= 80+ Math.random()*400 +"px"   
        e.style.left=Math.random()*(window.innerWidth -100) +"px" 
        setTimeout(function(){
                var angle=Math.floor(Math.random()*4)
                e.setAttribute("classangle","g"+angle)
                e.style.transform="rotate("+angle*90+"deg)"
                e.angle=angle
        },10)
  
    })
    timeInitial=(new Date).getTime()
    document.getElementById("time").innerHTML=""
}

function girar(){
    
    this.angle++
   
    this.style.transform="rotate("+this.angle*90+"deg)"
    
    this.setAttribute("classangle","g"+this.angle%4)
    if ((this.occupy===this.index) && this.angle%4 ==0)fixPiece(this)

}
function takePiece(e){

pezaSeleccionada=this
    offset = [
        this.offsetLeft - e.clientX,
        this.offsetTop - e.clientY
    ]

if(typeof this.occupy == "number") {
        document.querySelectorAll(".position")[this.occupy].occupied= false
        this.occupy=false
    }
   
}

function fixPiece(p){
    document.body.removeChild(p)
   document.querySelectorAll(".position")[p.index].appendChild(p)
    p.onmousedown=""
    p.onmouseover=""
    p.onmouseout=""
    p.onmousemove=""
    p.ondblclick=""
    p.onmouseup=""
    p.style.cursor="default"
    p.style.position="static"
   setTimeout(function(){p.removeAttribute("classangle")},300)
   
    
    p.style.transition=".1s"
    p.path.style.strokeWidth=".5px"
    setTimeout(function(){p.style.transform="scale(1.05)"},50)
    setTimeout(function(){p.style.transform="scale(1)"},150)
    setTimeout(function(){p.path.style.strokeWidth="2px"; p.style.zIndex= 0},250)
    pecaAlSeuLloc++
    if (pecaAlSeuLloc == numRows * numCols ){
        timeEnd = Math.floor(((new Date).getTime()-timeInitial)/1000)
        var hores = Math.floor(timeEnd/3600)
        var minuts =  Math.floor((timeEnd - hores * 3600)/60)
        minuts= minuts<10 ? "0"+minuts : minuts
        var segons = timeEnd - hores * 3600 - minuts *60 
        segons= segons<10 ? "0"+segons : segons
        timeEnd ="Time spent: " + 
            +((hores>0) ? hores +"h " :"")+            
            + minuts +"' " + segons +"''"
        document.getElementById("time").style.opacity=0  
        setTimeout(final,1500)
    }
}
function placePiece(p){
  
    p.style.zIndex = zIndex++
    p.zIndexPrevi=p.style.zIndex
        document.querySelectorAll(".position").forEach (function(e,i){
        if ((p.position().left>e.offsetLeft && p.position().left<e.offsetLeft+100)&&(p.position().top>e.offsetTop && p.position().top<e.offsetTop+100) && !e.occupied ){
            p.style.left=e.offsetLeft+"px"
            p.style.top=e.offsetTop+"px"
            e.occupied= true
            p.occupy = i
            if (e.index == p.index && p.getAttribute("classangle")=="g0")fixPiece(p)
           
        }
    })
    
}
function dropPiece(){
   
    placePiece(pezaSeleccionada)
    
    
    pezaSeleccionada=false
    
}
document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (pezaSeleccionada) {
        mousePosition = {

x : event.clientX,
            y : event.clientY

};
        pezaSeleccionada.style.left = (mousePosition.x + offset[0]) + 'px';
        pezaSeleccionada.style.top  = (mousePosition.y + offset[1]) + 'px';

}
}, true);

function getPos(e){
    
    
      var x=e.clientX-this.offsetLeft
      var y=e.clientY- this.offsetTop + scrollBodyTop()

if ((x>0 && x<100) && (y>0 && y<100)){
        
         this.onmousedown=takePiece
        this.ondblclick=girar
        this.style.cursor="move"
       
            this.style.zIndex=zIndex+1
            
            
     
    }else{
        
        this.onmousedown=""
        this.ondblclick=""
        this.style.cursor="default"
        this.style.zIndex=this.zIndexPrevi
    }
     
  
}
    
function stopTracking(){

}

Nah jika semua komponen sudah tersimpan coba kalian buka index.html kemudian akan muncul seperti ini.

Kalo seperti itu tandanya berhasil gan. Jika kalian belum berhasil kalian bisa mencobanya lewat link berikut ini. https://codepen(dot)io/jomohop/pen/GaVxaY

Maaf kalo ada yang kurang gan. Saya rasa cukup deh artikel kali ini. Semoga bermanfaat bagi kalian ya guys. Jangan lupa berkunjung ke artikel lain.