-->

Game Javascript Sederhana yang akan kita buat pada kali ini adalah game puzzle online, kita dapat memainkan game ini di smartphone maupun di...
data:post.title

Game Javascript Sederhana - Game Puzzle Online

Daftar Isi [Tampil]

    Game Javascript Sederhana yang akan kita buat pada kali ini adalah game puzzle online, kita dapat memainkan game ini di smartphone maupun di komputer.

    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.

    Game Javascript Sederhana

    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 aplikasi dcoder.

    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.

    Game Puzzle Online

    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.

    Gambar Model Puzzle Online

    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.

    Akhir kata dari Panduan Code jangan lupa titik koma.

    Sumber source code: https://codepen.io/jomohop/pen/GaVxaY
    DONASI VIA PAYPAL Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.

    Donasi
    Hallo sobat panduan code, Anda dapat memberikan suport kepada kami dengan cara memberikan donasi, yang mana nantinya donasi tersebut akan digunakan untuk memperpanjang Domain Panduan code.

    BANK BRI:401101013389533 a/n ARIF NOERWAHIDIN
    PULSA : 082126546564
    PAYPAL : Panduan Code
    Done