Pembahasan Soal Lks Web Technology 2024 Modul Client
Selamat Datang di Downloadmin!. Kali ini mimin akan membahas mengenai Tutorial Mengerjakan Soal LKS Jatim 2024 Web Technology Module-client. simak terus artikelnya agar tidak ketinggalan infromasi yang bermanfaat dalam artikel ini.
Pembahasan modul LKS Jatim tentang teknologi web client, khususnya dalam kaitannya dengan game, adalah topik yang relevan dan tepat waktu di bidang pengembangan teknologi.
terakhir Modul ini mengeksplorasi berbagai konsep dan teknik modern yang digunakan dalam pengembangan game berbasis web sambil memberikan gambaran tentang perkembangan terbaru dalam industri web dan game.
Jika belum punya soalnya, Download soal lks web technology disini.
Okee, Mari kita mulai tutorialnya!
Membuat File index.html
Sekarang, mari kita membuat folder kosong dulu teman – teman! nama foldernya bebas yaa.
Kemudian kita buka visual Studio code lalu kita pilih menu file, kemudian pilih open folder dan kita pilih folder yang kita buat tadi yaa!
Pertama tama buat file baru bernama index.html dan tambahkan kode di bawah ini ke dalamnya.
Ganti title dengan ‘shooter’.
Membuat File style.css
Sekarang mari kita buat file baru dengan nama style.css ya teman teman.
lalu kita akan menyambungkan file css dan html yaa, cara nya seperti ini.
Pada gambar di atas, tag link dengan rel stylesheet berfungsi untuk menghubungkan file CSS ke dalam HTML kita.
Membuat Welcome Screen Untuk Modul Lks Web Technology
Langkah selanjutnya adalah membuat Welcome Screnn untuk game shooter dengan menggunakan layout seperti gambar di bawah ini.
Sebelum melanjutkan, kita akan mengambil folder sprites dari dalam modul soal, kemudian kita akan mengubah namanya menjadi assets.
aku sudah meyiapkan kode nya, kamu bisa masukkan kode di bawah di file index.html
<div class="box mt-1">
<img src="./assets/shooter.png" alt="">
<div class="custom_input mt-2">
<input id="username" class="input" type="text" placeholder="Input Username">
</div>
<div class="custom-select mt-1">
<select id="level">
<option disabled selected value="">Select Level</option>
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
</select>
<div class="select-arrow"></div>
</div>
<div class="d-flex mt-1">
<div class="d-flex flex-column justify-center">
<label for="gun1">
<img src="./assets/gun1.png" alt="gun1" width="150">
</label>
<input type="radio" name="gun" value="1" id="gun1">
</div>
<div class="d-flex flex-column justify-center ml-1">
<label for="gun2">
<img src="./assets/gun2.png" alt="gun2" width="150">
</label>
<input type="radio" name="gun" value="2" id="gun2">
</div>
</div>
<div class="d-flex mt-1">
<div class="d-flex flex-column justify-center">
<label for="target1">
<img src="./assets/target1.png" alt="target1" width="100">
</label>
<input type="radio" name="target" value="1" id="target1">
</div>
<div class="d-flex flex-column justify-center ml-1">
<label for="target2">
<img src="./assets/target2.png" alt="target2" width="100">
</label>
<input type="radio" name="target" value="2" id="target2">
</div>
<div class="d-flex flex-column justify-center ml-1">
<label for="target3">
<img src="./assets/target3.png" alt="target3" width="100">
</label>
<input type="radio" name="target" value="3" id="target3">
</div>
</div>
<div class="d-flex justify-center mt-1">
<button id="btnplay" class="btn btn-green">Play</button>
<button id="btninstruction" class="btn btn-brown ml-1">Instruction</button>
</div>
</div>
karena ini hanya html jadi desainnya masih jelek, nari kita tambahkan css agar home screen terlihat bagus.
Saya sudah menyiapkan kodenya. Anda bisa memasukkan kode di bawah ini ke dalam file CSS.
*{
margin: 0;
padding: 0;
cursor: pointer;
}
body{
width: 100vw;
height: 100vh;
color: black;
display: flex;
justify-content: center;
}
.box{
width: 20rem;
text-align: center;
padding: 0 2rem;
place-items: center;
}
.intruction{
padding: 2rem;
background-color: gray;
}
.container{
flex-direction: column;
color: white;
}
.game-container{
display: flex;
}
/* input */
.custom_input {
display: flex;
align-items: center;
position: relative;
max-width: 100%;
}
.input {
font-size: 18px;
padding: 5px 10px;
width: 100%;
outline: none;
background: #FFFFFF;
color: #000000;
border: 1px solid #C4D1EB;
border-radius: 5px;
box-shadow: 3px 3px 2px 0px #E2E2E2;
transition: .3s ease;
}
.input:focus {
background: #F2F2F2;
border: 1px solid #5A7EC7;
border-radius: 10px;
}
.input::placeholder {
color: #DDDDDD;
}
/* dropdown */
.custom-select {
position: relative;
}
.custom-select select {
appearance: none;
-webkit-appearance: none;
width: 100%;
font-size: 18px;
padding: 5px 10px 5px 10px;
background-color: #FFFFFF;
border: 1px solid #C4D1EB;
border-radius: 5px;
color: #000000;
cursor: pointer;
outline: none;
box-shadow: 3px 3px 2px 0px #E2E2E2;
}
.custom-select select:focus {
background: #F2F2F2;
border: 1px solid #5A7EC7;
border-radius: 5px;
}
.custom-select::after {
content: "";
position: absolute;
pointer-events: none;
top: 50%;
right: 10px;
transform: translate(0, -50%);
width: 12px;
height: 12px;
background-color: #000000;
clip-path: polygon(8% 17%, 0% 25%, 50% 84%, 100% 25%, 92% 17%, 50% 65%);
}
.score-box{
width: 100%;
padding: 2rem 4rem;
display: flex;
justify-content: center;
background-color: black;
color: white;
}
.btn{
padding: 0.5rem 2rem;
border-radius: 10px;
border: none;
}
.btn-green{
background-color: green;
color: white;
}
.btn-brown{
background-color: #994c00;
color: white;
}
canvas{
cursor: none;
}
.hide {
display: none;
}
.d-flex{
display: flex;
}
.flex-column{
flex-direction: column;
}
.justify-center{
justify-content: center;
}
.items-center{
align-items: center;
}
.mt-2{
margin-top: 2rem;
}
.mt-1{
margin-top: 1rem;
}
.ml-1{
margin-left: 1rem;
}
Hasilnya akan seperti ini yaa!
