Pembahasan soal lks Web technology modul client

Membuat Instructions Screen Untuk Modul Lks Web Technology

Nah kita sudah membuat Home screen nih! sekarang mari kita buat intruction screen nyaa.

<div id="intruction" class="intruction hide">
        <h1>How To Play Game</h1>
        <h3>1. Input Username</h3>
        <h3>2. Point The Pointer At The Target</h3>
        <h3>3. Click To Shoot</h3>
        <h3>4. Get as Many Point As Possible</h3>
        <h3>5. Enjoy!</h3>
    </div>

Hasilnya akan seperti ini yaa!

Sekarang kita akan menambahkan logika javascript untuk homescreen dan intruction screen, buatlah file javascript dengan nama env.js

Kemudian, Anda dapat mengikuti kode di bawah ini.

const btnintruction = document.querySelector('#btninstruction')
const intruction = document.querySelector('#intruction')
let intructioncondition = false

btnintruction.addEventListener('click', () => {
    if (intructioncondition == false) {
        intruction.classList.remove('hide')
        intructioncondition = true
    }else if (intructioncondition == true) {
        intruction.classList.add('hide')
        intructioncondition = false
    }
})

Setelah menuliskan logika di javascript sekarang kita akan menghubungkan file javascript kedalam html, caranya seperti ini.

<script type="module" src="env.js"></script>

Letakkan tag script di atas penutup tag body agar file JavaScript dapat dijalankan dengan baik.

Sekarang saat anda menekan tombol intruction maka intruction screen akan muncul, lalu ketika tombol intruction di tekan kembali maka intruction screen akan hilang.

Membuat Logika Untuk Tombol Play dan Input Player

Sekarang kita akan membuat logika tombol play dan input user.

Tambahkan variabel di bawah ini kedalam file env.js

let username,level,target,pistol

const game = document.querySelector('.game-container')
const btnplay = document.querySelector('#btnplay')
const box = document.querySelector('.box')

Kemudian kita membuat fungsi dengan nama setgun dan settarget, untuk mendapatkan nilai dari pilihan gun dan target.

function setgun(){
    const temp = document.getElementsByName('gun')
    for (let i = 0; i < temp.length; i++) {
        if (temp[i].checked) {
            pistol = temp[i].value
        }
    }
}
function settarget(){
    const temp = document.getElementsByName('target')
    for (let i = 0; i  < temp.length; i++) {
        if (temp[i].checked) {
            target = temp[i].value
        }
    }
}

Selanjutnya, kita akan membuat logika untuk tombol play. Anda dapat menyalin kode di bawah ini.

btnplay.addEventListener('click', () => {
    username = document.querySelector('#username').value
    level = document.querySelector('#level').value
    setgun()
    settarget()
    if (username == '') {
        alert('please insert username')
    }
    else if(level == ''){
        alert('please select level')
    }
    else if(target == null){
        alert('please select target')
    }
    else if(pistol == null){
        alert('please select gun')
    }
    else{
         let data = {
            username : username,
            level : level,
            gun : pistol,
            target : target
        }

        localStorage.setItem('data',JSON.stringify(data))
        
        box.classList.add('hide')
        intruction.classList.add('hide')
        game.classList.remove('hide')
    }
})

Membuat Game Screen Untuk Modul Lks Web Technology

Nah sekarang kita akan Membuat game screen, caranya seperti ini.

<div class="game-container hide">
        <canvas id="canvas" width="1000" height="600"></canvas>
        <div class="score-box">
            <h1>Score</h1>
        </div>
    </div>

Kita membuat sebuah canvas dengan lebar 1000px dan tinggi 600px. Di samping layar permainan, kita menambahkan kotak skor untuk menampilkan skor pemain.

Lalu kita membuat sebuah file javascript dengan nama script.js kemudian kita akan menyambungkan javascript tersebut kedalam file html.

Caranya seperti ini :

<script type="module" src="script.js"></script>

Tambahkan kode di atas ke dalam file html, di bawah tag script untuk file env.js tadi.

Membuat Game Dengan Canvas

Sekarang buka file script.js kemudian kita akan memanggil tag canvas kedalam javascript caranya seperti ini.

const canvas = document.querySelector('#canvas')
const context = canvas.getContext('2d')

Kode di atas memanggil elemen dengan ID canvas, kemudian kita membuat variabel bernama context yang kita gunakan untuk menggambar di canvas.

Fungsi getContext() terpakai untuk mengambil context dari elemen canvas.

Memasukkan Gambar Asset kedalam JavaScript

Sekarang, kita akan memasukkan gambar ke dalam JavaScript. Kita akan menyalin kode di bawah ini.

const background = new Image();
background.src = './assets/background.jpg'

const gunImage1 = new Image()

gunImage1.src = './assets/gun1.png'
const gunImage2 = new Image()
gunImage2.src = './assets/gun2.png'

const boomImage = new Image()
boomImage.src = './assets/boom.png'

const pointerImage = new Image()
pointerImage.src = './assets/pointer.png'

const targetImage1 = new Image()
targetImage1.src = './assets/target1.png'
const targetImage2 = new Image()
targetImage2.src = './assets/target2.png'
const targetImage3 = new Image()
targetImage3.src = './assets/target3.png'

Membuat Fungsi InitializeGame

Kita akan membuat fungsi initialisasi game yang berfungsi untuk memulai game, jadi kita akan memasukkan semua fungsi yang lain ke dalam fungsi ini.

export function initializeGame(){

}

Membuat fungsi drawbg

Sekarang, kita akan membuat sebuah fungsi yang bernama drawbg. anda bisa menyalin kode di bawah ini.

function drawbg() {
    context.beginPath();
    context.fillStyle = 'black';
    context.fillRect(0, 0, 1000, 600);
    context.drawImage(background, 0, 0, 1000, 600);
    context.closePath();
}

Letakkan fungsi drawbg didalam fungsi initializeGame.

Membuat Fungsi main

sekarang kita akan membuat fungsi dengan nama main. anda bisa menyalin kode dibawah ini.

export default function main() {
    requestAnimationFrame(main)
    drawbg()

    
}

Dalam fungsi main, penggunaan requestAnimationFrame() adalah untuk membentuk interval yang memungkinkan permainan berjalan.

Letakkan fungsi main kedalam fungsi initializeGame kemudian panggil dengan menuliskan main() didalam fungsi initializeGame.

Kemudian kita masuk ke dalam file env.js pada bagian atas sendiri kita import fungsi initializeGame dengan menuliskan kode ini.

import initializeGame from "./script.js"

lalu kita panggil fungsi main kedalam logika tombol play.

btnplay.addEventListener('click', () => {
    username = document.querySelector('#username').value
    level = document.querySelector('#level').value
    setgun()
    settarget()
    if (username == '') {
        alert('please insert username')
    }
    else if(level == ''){
        alert('please select level')
    }
    else if(target == null){
        alert('please select target')
    }
    else if(pistol == null){
        alert('please select gun')
    }
    else{
         let data = {
            username : username,
            level : level,
            gun : pistol,
            target : target
        }

        localStorage.setItem('data',JSON.stringify(data))
        
        box.classList.add('hide')
        intruction.classList.add('hide')
        game.classList.remove('hide')

        //panggil fungsi initialisasi
        initializeGame()
    }
})

Dalam kode di atas, kami telah menambahkan fungsi main() yang diimpor dari script.js.

Jika permainannya dijalankan, maka akan terlihat seperti ini.

Kita telah berhasil menampilkan background.

Membuat Header untuk Nama, Score dan Waktu

Setelah membuat background, langkah selanjutnya adalah membuat element header yang menampilkan nama skor dan waktu.

saya sudah menyiapkan kodenya, anda bisa menyalin kode dbawah ini.

pertama tama kita buat variabel untuk menampung score dan time.

const data = JSON.parse(localStorage.getItem('data'))
let time = 30
let score = 0

Variabel data berfungsi untuk mendapatkan nilai yang berisi username, level, target, dan gun dari local storage, yang kita ambil saat awal mengisi input.

kemudian kita buat logika untuk time supaya berjalan sengan baik.

setInterval(() => {
        if (time > 0) {
            time--
        }
    }, 1000);

baru kita buat fungsi drawheader.

function drawheader() {
        context.beginPath();
        context.fillStyle = 'rgba(0, 0, 0, 0.7)';
        context.fillRect(0, 0, 1000, 60);
        context.font = '30px sans-serif';
        context.fillStyle = 'white';
        context.textAlign = 'center';
        context.fillText(data.username, 100, 40);
        context.fillText(`Score : ${score}`, 500, 40);
        context.fillText(`Time : 00:${time <= 9 ? "0" + time : time}`, 900, 40);
        context.closePath();
    }

kemudian kita panggil fungsi drawheader kedalam fungsi main.

function main() {
        requestAnimationFrame(main)
        drawbg()
    
        //panggil fungsi drawheader
        drawheader()
    }

Jika kita menjalankan permainannya, maka tampilannya akan seperti ini.

Menampilkan Pistol

Langkah awal kita buat kelas gun didalam fungsi initializeGame.

class gun {
        constructor() {
            this.x = 500
            this.y = 300
            this.Image = gunImage1
        }
    
        draw() {
            context.beginPath();
            context.drawImage(this.Image, this.x, this.y, 300, 300);
            context.closePath();
        }
    }
const drawgun = new gun()

kemudian kita panggi variabel drawgun kedaram fungsi main.

function main() {
        requestAnimationFrame(main)
        drawbg()
        //panggil class gun
        drawgun.draw()

        drawheader()
    }

sekarang gun muncul, tetapi masih belum bisa mengikuti arah gerak mouse kita.

sekarang kita akan menambahkan logika agar gun bisa bergerak.

canvas.addEventListener('mousemove', (e) => {
        drawgun.x = e.clientX - 100
    })

kita menggunakan event mouse move untuk mendapatkan logika saat mouse bergerak.

lalu kita akan membuat logika saat menekan tombol spasi gambar pistol akan berubah.

document.onkeydown = (e) => {
        if (e.code == 'Space') {
            switch (drawgun.Image) {
                case gunImage1:
                    drawgun.Image = gunImage2
                    break;
                case gunImage2:
                    drawgun.Image = gunImage1
                    break;
                default:
                    break;
            }
        }
    }

Hasilnya terlihat seperti ini.