Game Javascript Sederhana yang akan kita buat pada kali ini adalah game puzzle online, kita dapat memainkan game ini di smartphone maupun di...
Game Javascript Sederhana - Game Puzzle Online
Senin, Juni 01, 2020
Daftar Isi [Tampil]
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.
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.
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 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
Coba cari lagi apa yang ada inginkan pada kolom berikut:
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.