Game Puzzle Sederhana Dengan Javascript

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

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

Dulunya game puzzle sangat diminati oleh banyak orang namun jaman sudah berganti gan. Game puzzle juga dapat 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 menciptakan game. Namun kali ini aku pilih yang berdasarkan aku lebih seru.

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

Komponen yang pertama ialah html. Kalian copy script dibawah ini lalu save dengan nama index.html
<h1> Puzzle maker <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>

Komponen yang kedua ialah css. Sama menyerupai 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 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(){ }

Nah bila semua komponen sudah tersimpan coba kalian buka index.html lalu akan muncul menyerupai ini.

Kalo menyerupai itu tandanya berhasil gan. Jika kalian belum berhasil kalian dapat 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.