Cara membuat game puzzle dengan html

Namun seperti namanya Game Puzzle Online maka kamu harus memiliki koneksi internet untuk memainkannya.


Walaupun game Javascript sederhana ini online kamu jangan khawatir game puzzle-nya tidak memerlukan paket data besar, paket data yang dipakai hanya beberapa kb saja.


Karena paket data tersebut hanya diperlukan untuk memuat gambar puzzlenya saja setelah gambar berhasil dimuat maka game puzzlenya menjadi offline.


Cara membuat game puzzle dengan html


Penasaran bagaimana cara membuatnya?, yuk simak panduannya dibawah ini.


Cara Membuat Game Javascript Sederhana - Game Puzzle Online


1. Buka kode editor yang biasa kamu gunakan, kamu bisa menggunakan visual studio code, sublime teks, maupun notepad, dan untuk kamu yang menggunakan smartphone dapat menggunakan .


2. Kemudian buat file HTML baru dan nama filenya terserah kamu, contoh index.html.


3. Lalu copy script game javascript sederhana - game puzze onlinenya dibawah ini, dan paste pada file index.html kamu.

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Puzzle Sederhana</title>
    <script>
        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 dadesPeza(row,col,index){
	var object ={}
	switch (true) {
     case (col == 0 && row == 0) :
       object={
			type:"supEsquerra",
			a:{draw:" l 100,0 "},
			b:crearDreta(index),
			c:crearInferior(index),
			d:{draw:" l 0,-100"},
       }	
       break;
     case (row == 0 && col == numCols-1) :
       object={
			type:"supDreta",
			a:{draw:" l 100,0 "},
			b:{draw:" l 0,100 "},
			c:crearInferior(index),
			d:inversDreta(index),	 
		}		
       break;
     case (row == numRows-1 && col == 0) :
       object={
			type:"infEsquerra",
			a:inversSuperior(index),
			b:crearDreta(index),
			c:{draw:" l -100,0 "},
			d:{draw:" l 0,-100 "},
		}		
       break;			
     case (row == numRows-1 && col == numCols-1) :
       object={
			type:"infDreta",
			a:inversSuperior(index),
			b:{draw:" l 0,100 "},
			c:{draw:" l -100,0 "},
			d:inversDreta(index),		
		}	
       break;			
     case (row == 0 ) :
       object={
			type:"superior",
           a:{draw:" l 100,0 "},
           b:crearDreta(index),
           c:crearInferior(index),
           d:inversDreta(index),
		}
       break;
     case (col == 0 ) :
       object={
			type:"esquerra",
			a:inversSuperior(index),
			b:crearDreta(index),
			c:crearInferior(index),
			d:{draw:" l 0,-100 "},
		}		
       break;
     case (col == numCols-1 ) :
       object={
			type:"dreta",
			a:inversSuperior(index),
			b:{draw:" l 0,100 "},
			c:crearInferior(index),
			d:inversDreta(index),
		}		
       break;			
     case (row == numRows-1 ) :
       object={
			type:"inferior",
			a:inversSuperior(index),
			b:crearDreta(index),
			c:{draw:" l -100,0 "},
			d:inversDreta(index),
		}	
       break;			
      default:
		object={
			type:"central",
			a:inversSuperior(index),
			b:crearDreta(index),
			c:crearInferior(index),
			d:inversDreta(index),
		}	
    }
	object.col=col
	object.row=row
	object.index=index
    object.path=function(){return this.a.draw+this.b.draw+this.c.draw+this.d.draw+"z"}
	return object
	
}


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 createPuzzle(model){
    pecaAlSeuLloc=0
    document.getElementById("container").innerHTML=""
    director=[]
    index=0
    pezaSeleccionada= false
    numRows=model.numRows
    numCols=model.numCols
    document.getElementById("container").style.width=numCols*100 +"px"
    document.getElementById("container").style.backgroundPositionY=100*model.numRows+"px"
    for (row=0; row<numRows; row++){
        for (col=0; col<numCols; col++){
            var dades=dadesPeza(row,col,index)
            director.push(dades)		
            createSvg(dades.path(),col,row,index)
           index++
        }
    }
}
function selectModel(i){
    document.getElementById("models").style.height=0
    model=models[i]
    createPuzzle(model)
    document.querySelector("#start").style.height=""
    document.querySelector("#modelsButton").style.height=""
    document.querySelector("#tap").style.opacity=0
}
document.addEventListener("DOMContentLoaded", function() { 
    model=models[2]
    createPuzzle(model)
    createListModels()
    document.getElementById("seeModel").onmouseover=function(){
        document.getElementById("container").style.backgroundImage="url("+host+model.urlImg+")"
        document.getElementById("container").style.backgroundPositionY=0;
    }
    document.getElementById("seeModel").onmouseout=function(){   
            document.getElementById("container").style.backgroundPositionY=100*model.numRows+"px" 
    }
    document.getElementById("start").onclick= start
    document.getElementById("modelsButton").onclick= showModels
    var botoFullScreen=document.getElementById("fullscreen")
    botoFullScreen.fullScreen=false
    botoFullScreen.onclick=function(){
        if (this.fullScreen){
            if (document.msExitFullscreen) { 
                document.msExitFullscreen()
            }else{
                document.exitFullscreen();
            }	
            this.className="fullscreen"
        }else{			
            if (document.body.msRequestFullscreen) { 
                document.body.msRequestFullscreen()
            }else{
                document.body.requestFullscreen()
            }
            this.className="fullscreenOff"
        }
        this.fullScreen=!this.fullScreen
    }
 })
function scrollBodyTop(){return document.body.scrollTop|| document.documentElement.scrollTop}
function final(){
    document.querySelectorAll(".move").forEach(function(e,i){
        e.path.style.strokeWidth="1px"
        e.path.style.stroke="black"
    }) 
    document.querySelector("#modelsButton").style.height=""
    document.querySelector("#tap").style.height=""
    document.querySelector("#tap").style.opacity=0
    document.querySelector("#seeModel").style.top="-35px"
    document.getElementById("models").style.height=0
    document.getElementById("time").innerHTML=timeEnd
    document.getElementById("time").style.opacity=1    

}
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(){
    
   

}
    </script>
<style>
    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)
    }
</style>
</head>
<body>
    <a id="logo" target="_blank" href="https://www.panduancode.com"><img src="https://www.panduancode.com/favicon.ico" alt="panduancode"></a>
    <h1>Game Puzzle Sederhana<span>1.0</span></h1><div id="seeModel" >see model</div> <div id="fullscreen" class="fullscreen" ></div><input id="modelsButton" type="button" value="Models"><input id="start" type="button" value="Start">
    <div id="tap"><div id="models"></div></div>
<div style="margin-left: 10px">Drag to place.<br>
Double click to rotate.</div>
<div id="container" ></div>
<div id="time" ></div>

<svg id="base" width="0" height="0" >
<defs>
    <filter id="g0">
      <feOffset result="offOut" in="SourceAlpha" dx="4" dy="4" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
     <filter id="g1">
      <feOffset result="offOut" in="SourceAlpha" dx="4" dy="-4" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>   
    <filter id="g2">
      <feOffset result="offOut" in="SourceAlpha" dx="-4" dy="-4" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
    <filter id="g3">
      <feOffset result="offOut" in="SourceAlpha" dx="-4" dy="4" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>	
 </defs>
</svg>
</body>
</html>
  


Setelah kamu paste pada file index.html kamu lalu save file tersebut, dan silahkan coba game javascript sederhana - game puzzle onlinenya.


Cara Memainkan Game Javascript Sederhana - Game Puzzle Online

Cara Memainkan Game Puzzle Di Komputer


1. Untuk kamu yang menggunakan komputer, pertama hubungkan komputer kamu dengan koneksi internet.


2. Buka file index.html game puzzle onlinenya dengan klik kanan dan pilih Open with kemudian pilih Google Chrome.


Kenapa memilih Google Chrome?, alasannya karena Google Chrome mendukung Javascript pada browsernya.


3. Setelah game puzzle onlinenya terbuka dan gambar puzzlenya sudah dimuat dengan baik seperti yang terlihat pada gambar dibawah ini.


Cara membuat game puzzle dengan html


Silahkan klik tombol start untuk memulai game.


Setelah tombol start diklik maka puzzle yang tersusun tersebut akan berubah menjadi acak dan harus kamu susun kembali agar bisa menyelesaikan game tersebut.


4. Ketika puzzlenya menjadi acak gunakan double click untuk memutar bagian-bagian puzzle.


5. Lalu drag atau pindahkan bagian puzzle tersebut ketempat semula puzzlenya sebelum puzzle menjadi acak.


6. Jika kamu lupa bagaimana gambar puzzle asli sebelum diacak maka kamu bisa klik tombol see model untuk melihat gambar asli puzzle teresebut.


7. Disamping tombol see model terdapat tombol full screen agar kamu lebih nyaman memainkan game javascript sederhana tersebut.


8. Susun bagian-bagian puzzlenya sampai tersusun kembali dan setelah itu akan muncul catatan waktu kamu dalam menyelesaikan game puzzle online tersebut.


9. Dan tombol Models untuk milih gambar puzzle yang ingin kamu selesaikan, ada beberapa gambar puzze yang dapat kamu pilih seperti gambar dibawah ini.


Cara membuat game puzzle dengan html


Cara Memainkan Game Puzzle Di Smartphone


1. Buka aplikasi Dcoder kamu kemudian buka file index.html game puzzle tersebut.


2. Setelah itu klik tombol run dan lihat output file index.html tersebut kemudian mainkan game Javascript sederdahanya.


3. Cara memainkan game javascript sederhana - game puzzle di smartphone sama dengan cara memainkannya pada komputer.


Sekian yang dapat Panduan Code sampaikan pada kali ini semoga bermanfaat, dan jika ada pertanyaan mengenai artikel ini silahkan tanyakan pada kolom komentar dibawah.