Inspirasi & Seni Technology: JavaScript

Showing posts with label JavaScript. Show all posts

Sunday, January 8, 2023

Membuat Graphic Menggunakan Javascript - chart.js

1. Download chart.js pada pada situs : github.com

2. Extrak ganti menjadi chartjs, ini untuk memudahkan atau menyerderhanakan pemanggilan

3. Buat file : index.html

<!DOCTYPE html>

<html>

<head>

<title>Membuat Graphic Menggunakan Javascript - chart.js </title>

</head>

<body>

body{

font-family: roboto;

}

</style>

<h2>Membuat Grafik Menggunakan Chart.js </h2>

</div>

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'bar',

data: {

labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

datasets: [{

label: '# of Votes',

data: [12, 19, 3, 23, 2, 3],

backgroundColor: [

'rgba(255, 99, 132, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(255, 206, 86, 0.2)',

'rgba(75, 192, 192, 0.2)',

'rgba(153, 102, 255, 0.2)',

'rgba(255, 159, 64, 0.2)'

borderColor: [

'rgba(255,99,132,1)',

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)',

'rgba(153, 102, 255, 1)',

'rgba(255, 159, 64, 1)'

borderWidth: 1

}]

options: {

scales: {

yAxes: [{

ticks: {

beginAtZero:true

}

}]

}

});

</script>

</body>

</html>

Hasil :

Membuat Mata Uang Rupiah Menggunakan Javascript

<!DOCTYPE html>

<html>

<head>

<title>Membuat Mata Uang Rupiah Menggunakan Javascript</title>

</head>

<body>

body {

font-family: sans-serif;

}

.kotak {

width: 350px;

margin: auto;

margin-top: 15px;

padding: 10px;

}

margin-bottom: 20px;

color: #0004ff;

}

input {

text-align: right;

width: 100%;

margin-bottom: 20px;

margin-top: 10px;

padding: 7px 10px;

font-size: 18px;

}

</style>

<h1>Format Rupiah </h1>

</center>

<span>Nominal Rupiah. :</span>

</div>

var rupiah = document.getElementById('rupiah');

rupiah.addEventListener('keyup', function(e){

// tambahkan 'Rp.' pada saat form di ketik

// fungsi formatRupiah() untuk mengubah angka yang di ketik menjadi format angka

rupiah.value = formatRupiah(this.value, 'Rp. ');

});

/* Fungsi formatRupiah */

function formatRupiah(angka, prefix){

var number_string = angka.replace(/[^,\d]/g, '').toString(),

split = number_string.split(','),

sisa = split[0].length % 3,

rupiah = split[0].substr(0, sisa),

ribuan = split[0].substr(sisa).match(/\d{3}/gi);

// tambahkan titik jika yang di input sudah menjadi angka ribuan

if(ribuan){

separator = sisa ? '.' : '';

rupiah += separator + ribuan.join('.');

}

rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');

}

</script>

</body>

</html>

Membuat Analog & Digital Clock Menggunakan Javascript

1. Digital Clock

<!DOCTYPE html>

<html>

<head>

<title>Membuat Jam Digital Menggunakan Javascript</title>

</head>

<body>

<style>

h1,h2,p,a{

font-family: sans-serif;

font-weight: normal;

}

.jam-digital {

overflow: hidden;

width: 330px;

margin: 20px auto;

border: 5px solid #efefef;

}

.kotak{

float: left;

width: 110px;

height: 100px;

background-color: #189fff;

}

.jam-digital p {

color: #fff;

font-size: 36px;

text-align: center;

margin-top: 30px;

}

</style>

<h1>Jam Digital </h1>

</center>

</div>

</div>

</div>

window.setTimeout("waktu()", 1000);

function waktu() {

var waktu = new Date();

setTimeout("waktu()", 1000);

document.getElementById("jam").innerHTML = waktu.getHours();

document.getElementById("menit").innerHTML = waktu.getMinutes();

document.getElementById("detik").innerHTML = waktu.getSeconds();

}

</script>

</body>

</html>

2. Analog Clock

<!DOCTYPE html>

<html>

<head>

<title>Membuat Jam Analog Menggunakan Javascript</title>

</head>

<body>

h1,h2,p,a{

font-family: sans-serif;

font-weight: normal;

}

.jam_analog {

background: #e7f2f7;

position: relative;

width: 240px;

height: 240px;

border: 16px solid #52b6f0;

border-radius: 50%;

padding: 20px;

margin:20px auto;

}

.xxx {

height: 100%;

width: 100%;

position: relative;

}

.jarum {

position: absolute;

width: 50%;

background: #232323;

top: 50%;

transform: rotate(90deg);

transform-origin: 100%;

transition: all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);

}

.lingkaran_tengah {

width: 24px;

height: 24px;

background: #232323;

border: 4px solid #52b6f0;

position: absolute;

top: 50%;

left: 50%;

margin-left: -14px;

margin-top: -14px;

border-radius: 50%;

}

.jarum_detik {

height: 2px;

border-radius: 1px;

background: #F0C952;

}

.jarum_menit {

height: 4px;

border-radius: 4px;

}

.jarum_jam {

height: 8px;

border-radius: 4px;

width: 35%;

left: 15%;

}

</style>

<h1>Jam Analog</h1>

</center>

</div>

const secondHand = document.querySelector('.jarum_detik');

const minuteHand = document.querySelector('.jarum_menit');

const jarum_jam = document.querySelector('.jarum_jam');

function setDate(){

const now = new Date();

const seconds = now.getSeconds();

const secondsDegrees = ((seconds / 60) * 360) + 90;

secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

if (secondsDegrees === 90) {

secondHand.style.transition = 'none';

} else if (secondsDegrees >= 91) {

secondHand.style.transition = 'all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)'

}

const minutes = now.getMinutes();

const minutesDegrees = ((minutes / 60) * 360) + 90;

minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;

const hours = now.getHours();

const hoursDegrees = ((hours / 12) * 360) + 90;

jarum_jam.style.transform = `rotate(${hoursDegrees}deg)`;

}

setInterval(setDate, 1000)

</script>

</body>

</html>

Sunday, December 25, 2022

Membuat Game Car Menggunakan Javascript

1. Siapkan file gambar dalam bentuk png :

car.png
barrier.png

2. buat file htnl : index.html

<html>

<head>
<meta charset='UTF-8'>
<title>Gim JS</title>
<style>

body { text-align: center; }
#myCanvas {
box-shadow: 1px 1px 5px 1px #ddd;
display: inline-block;
width: 50%;
margin: 50px 0px;
}

</style>
</head>

<body>

<canvas id="myCanvas"></canvas>
<script src="gim.js"></script>

</body>

</html>

3. Buat javascript : gim.js

let cvs = document.querySelector("#myCanvas")

let ctx = cvs.getContext('2d')

let car = new Image()

car.src = "./images/car.png"

// Default posisi mobil

let carX = 10

let carY = 120

let obstacle = new Image()

obstacle.src = "./images/barrier.png"

let obs = []

obs[0] = {

x: cvs.width,

y: 110

}

// Default skor

let score = 0

const main = () => {

ctx.clearRect(0, 0, cvs.width, cvs.height)

ctx.drawImage(car, carX, carY)

for (let i = 0; i < obs.length; i++) {

ctx.drawImage(obstacle, obs[i].x, obs[i].y)

// biar obstaclenya mundur mengarah ke mobil

obs[i].x--

// ketika obstacle yang ada sudah mencapai posisi tertentu, tambahin obstacle lagi

if (obs[i].x == 245) {

obs.push({

x: cvs.width,

y: cvs.height

})

}

if (carX + car.width >= obs[i].x && carX <= obs[i].x + obstacle.width && carY + car.height >= obs[i].y && carY <= obs[i].y + obstacle.height) {
location.reload()
}

}

// Bikin rectangle untuk background-nya

ctx.fillStyle = "#00000060"

ctx.fillRect(0, 0, cvx.width, 20)

// Tuliskan skornya

ctx.fillStyle = "#fff"

ctx.font = "Arial"

ctx.fillText(`Skor : ${score}`, 10, 15)

// biar geraknya mulus

requestAnimationFrame(main)

if (carX >= obs[i].x && carX <= obs[i].x + 0.5) {

score++

}

// jalankan

main()

Hasil :

Saturday, December 24, 2022

Membuat Game Snake Menggunakan Javascript

Berikut adalah contoh membuat game snake :

1. Buat Function Javascript pada file : index.html

<html>

<head>
<title>Snake Inwepo</title>
</head>

<body>

<canvas id="gc" width="400" height="400"></canvas>

<script>

window.onload=function() {
//Cari elemen dengan nama ID yang telah di tentukan
canv=document.getElementById("gc");

//Konteks Kanvas / Halaman Permainan
ctx=canv.getContext("2d");

//Pastikan bahwa program / web menerima input keyboard
document.addEventListener("keydown",keyPush);

//Atur jeda / interval pada permainan
setInterval(game,1000/15);
}
//Atur Konstanta / Ketetapan Awal Pada Permainan
px=py=10;
gs=tc=20;
ax=ay=15;
xv=yv=0;
trail=[];
tail = 5;
function game() {
//Atur Batasan (Boundary) Pada Halaman Permainan
px+=xv;
py+=yv;
if(px<0) {
px= tc-1;
}
if(px>tc-1) {
px= 0;
}
if(py<0) {
py= tc-1;
}
if(py>tc-1) {
py= 0;
}

//Atur Warna Pada Halaman Permainan
ctx.fillStyle="black";
ctx.fillRect(0,0,canv.width,canv.height);
//Atur Warna Pada Snake
ctx.fillStyle="red";
for(var i=0;i<trail.length;i++) {
ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2);
if(trail[i].x==px && trail[i].y==py) {
tail = 5;
}
}

//Atur Panjang Pada Ekor Snake-nya
trail.push({x:px,y:py});
while(trail.length>tail) {
trail.shift();
}
//Jika Snake Memakan Food-nya, Acak Lokasi Food-nya
if(ax==px && ay==py) {
tail++;
ax=Math.floor(Math.random()*tc);
ay=Math.floor(Math.random()*tc);
}

//Atur Warna Pada Food-nya
ctx.fillStyle="purple";
ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
}
//Atur Mekanisme Inputan-nya berdasarkan keyCode-nya
function keyPush(evt) {
switch(evt.keyCode) {
//Input Panah Kiri
case 37:
xv=-1;yv=0;
break;
//Input Panah Atas
case 38:
xv=0;yv=-1;
break;
//Input Panah Kanan
case 39:
xv=1;yv=0;
break;
//Input Panah Bawah
case 40:
xv=0;yv=1;
break;
}
}
</script>

</body>

</html>

Jalankan :

Sunday, January 8, 2023

Membuat Graphic Menggunakan Javascript - chart.js

Membuat Mata Uang Rupiah Menggunakan Javascript

Membuat Analog & Digital Clock Menggunakan Javascript

Sunday, December 25, 2022

Membuat Game Car Menggunakan Javascript

Saturday, December 24, 2022

Membuat Game Snake Menggunakan Javascript

Memunculkan Simbol & Emoji Pada OS Mac