HTML adalah bahasa desain web. Browser web menginterpretasikan HTML untuk menampilkan teks dan grafik yang diformat dengan benar. Struktur keseluruhan halaman web dibuat dalam HTML. Bahasa pemrograman lain biasanya digunakan untuk membuat lebih banyak interaktivitas pada suatu halaman. PHP, JavaScript, dan Flash adalah contoh alat yang digunakan untuk membuat situs web dinamis. Namun, dimungkinkan untuk menggunakan HTML hingga batasnya. Fun games bisa dibuat hanya melalui HTML, misalnya. Dimungkinkan juga untuk menggunakan HTML untuk menyematkan game dari sumber lain

Buat garis besar gaya fiksi interaktif "pilih setiap langkah". Salah satu cara untuk menggunakan kemampuan pemrograman HTML yang terbatas adalah dengan menggabungkan sekelompok halaman web "bab" HTML independen bersama-sama dalam jenis pengalaman "pilih petualangan Anda sendiri". Tulis cerita dengan beberapa poin plot kritis dan pilih hasil alternatif berdasarkan keputusan pembaca

Buka editor teks. Ketik "bab" pertama dari cerita Anda

Tambahkan dua atau lebih tautan di akhir bab untuk menawarkan opsi kepada pembaca. Format setiap tautan sebagai "Opsi A" untuk opsi pertama, "Opsi B" untuk opsi kedua, dst. Ketik deskripsi lengkap untuk setiap opsi plot di area berlabel "Opsi A" atau "Opsi B. "

Simpan file sebagai "index. html. "

Buat file teks baru. Ketikkan konten yang terkait dengan pilihan pertama yang Anda berikan kepada pembaca

Simpan file sebagai "1. html. "

Buat file teks baru. Ketikkan konten yang terkait dengan pilihan kedua yang Anda berikan kepada pembaca

Simpan file sebagai "2. html. "

Buat lebih banyak bab dan titik plot jika diinginkan. Akhir dari setiap bab dapat memberikan kode HTML yang sama untuk memilih opsi. File teks baru dibuat untuk setiap opsi yang disediakan. Cukup tambahkan nama file HTML dengan "3. html", "4. html", dll. untuk membuat beberapa bab

Klik dua kali "index. html" untuk memulai pengalaman HTML interaktif. Ini akan terbuka di browser web dan menyajikan bab pertama dan serangkaian opsi. Setiap klik akan secara otomatis membuka file HTML lain yang sesuai dengan pilihan

Setelah membuat game ular dengan html pada postingan sebelumnya, kali ini saya akan mencoba berbagi tips membuat game lompat dengan html. sama seperti game ular, game yang dibuat kali ini tidak membutuhkan objek gambar hanya dengan menggunakan kode css, html dan javascript.  

Dengan ketiga jenis file tersebut yaitu html, css dan javascript kita dapat mempraktekannya dengan mudah, namun kita perlu menginstal aplikasi baru, seperti aplikasi pembuat game. pembuatan game ini hanya dengan menggunakan program notepad atau notepad++

Cara memainkan game ini cukup sederhana hanya dengan menekan tombol terbang maka kotak yang mengapung kebawah akan naik, memang bagi pecinta game ini kurang menarik, tapi ini tutorial bagi pecinta program. jadi berawal dari program game sederhana ini semoga menambah ide untuk mengembangkannya ke arah yang lebih keren

Kami akan menggabungkan ketiga jenis file tersebut dalam sebuah file html. silahkan copy kode berikut di notepad lalu simpan dengan nama gamenya. html

Hai, sedang mencari referensi kode untuk latihan atau tugas? . Kode script permainan kucing melompat ini terbuat dari html, css dan javascript. Bisakah Anda mengembangkan dan belajar lebih banyak?

Langkah pertama yang perlu kamu siapkan hanyalah text editor dan browser

Kemudian buat folder baru dengan nama Anda sendiri. Kemudian buka folder tersebut dan buat file html dengan nama index. html. Masukkan kode html berikut

'


    
    
    
    


    

        

            


            
        
    
    

    

Lalu simpan

Setelah itu buat file baru dengan nama index. css dan masukkan kode di bawah ini

body {
    margin:0;
    height:100vh;
    overflow:hidden;
}

#toolbar {
    position:absolute;
    width:100%;
    height:10%;
    background: none;
    display: flex;
    justify-content: center;
    top:25%;
}

#toolbar > input {
    align-self: center;
    display:block;
    margin:10px;
    padding:15px;
    color:lightgray;
    background-color: teal;
    border:2px solid lightgray;
    outline:none;
    border-radius:15px;
    font-family: monospace;
}


canvas {
    overflow:hidden;
}

Lalu simpan

lalu buat file baru dengan nama index. js dan masukkan kode javascript berikut

class Abstract {
    constructor(ctx, src, x, y, areaWidth, areaHeight, row,
    column, startDimension){
        this.ctx = ctx;
        this.x = x;
        this.y = y;
        this.areaWidth = areaWidth;
        this.areaHeight = areaHeight;
        this.row = row;
        this.column = column;
        this.img = new Image();
        this.img.onload = () => {};
        this.img.src = src;
        this.pixelWidth = this.areaWidth / this.column;
        this.pixelHeight = this.areaHeight / this.row;
        this.startDimension = startDimension;
    }
}


class Obstacle extends Abstract {
    constructor(ctx, src, x, y, areaWidth, areaHeight, row,
     column, startDimension){
        super(ctx, src, x, y, areaWidth, areaHeight, row,
             column, startDimension);
        this.width = 30;
        this.height = 30;
    }

    draw(){
        this.ctx.drawImage(this.img, this.startDimension, 0, this.pixelWidth, 
        this.pixelHeight, this.x, this.y, this.width, this.height);
    }

    update(time){
        this.x -= (time < 100)?5:(time > 100 && time < 300)?12:(
        time > 300 < 550)?20:(time > 550 && time < 800)?33:35;
        this.draw();
    }
}


class Player extends Abstract {
    constructor(ctx, src, x, y, areaWidth, areaHeight, row, 
    column, startDimension, maxHeight, mainPos){
        super(ctx, src, x, y, areaWidth, areaHeight, row,
             column, startDimension);
        this.width = 60;
        this.height = 60;
        this.mainPosX = mainPos[0];
        this.mainPosY = mainPos[1];
        this.vY = 0;
        this.speed = -5;
        this.gravity = .3;
        this.isJumped = true;
        this.maxHeight = maxHeight;
        this.score = 0;
    }

    draw(){
        if(this.isJumped){
            this.ctx.drawImage(this.img, 0, 0, this.pixelWidth, this.pixelHeight,
            this.x, this.y, this.width, this.height);
        }else{
            this.ctx.drawImage(this.img, this.startDimension, this.pixelHeight*2, 
            this.pixelWidth, this.pixelHeight, this.x, this.y, this.width, this.height);
        }
    }

    jump(){
        if(this.y <= this.maxHeight){
            this.vY = Math.abs(this.speed)*2;
        }
        this.y += this.vY;
        if(this.vY === Math.abs(this.speed)*2 && !this.isJumped)
            this.vY = 0;
    }

    update(){
        if(this.mainPosY > this.y)this.isJumped = true;
        else if(this.mainPosY <= this.y)this.isJumped = false;
        this.draw();
    }
}


class Floor {
    constructor(ctx, x, y, width, height, color){
        this.ctx = ctx;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color  = color;
        this.speed = 10;
    }

    draw(){
        this.ctx.beginPath();
        this.ctx.fillStyle = this.color;
        this.ctx.fillRect(this.x, this.y, 
            this.width, this.height);
        this.ctx.closePath();
    }

    update(time){
        this.x -= (time < 100)?10:(time > 100 && time < 300)?18:(
        time > 300 < 550)?25:(time > 550 && time < 800)?33:40;
        this.draw();
    }

}


const init = () => {
    // game area setup
    const cvs = document.querySelector("#cvs");
    const cw = cvs.width = innerWidth;
    const ch = cvs.height = innerHeight;
    cvs.style.backgroundColor = "white";

    let ctx = cvs.getContext("2d");

    let prompt = document.querySelector("#prompt");
    let startBtn  = document.querySelector("#startBtn");

    let isPlaying = false, mainAnimeId;

    // function to get random values between ```min``` and ```max```
    const MAX_MIN = (min, max) => Math.floor(Math.random()*
        (max - min + 1) + min);

    // Radial Gradient for sun
    let sunGradient = ctx.createRadialGradient(cw-100,
         ch/4, 20, cw-100, ch/4, 50);
    sunGradient.addColorStop(0, "yellow");
    sunGradient.addColorStop(.5, "#FFD42A");
    sunGradient.addColorStop(1, "#FFFFFF");

    // time counter 
    let time = 0;
    const updateTime = () => time++;
    setInterval(updateTime, 200);

    // create the main floor
    let floor = new Floor(ctx, 0, ch-40, cw, ch+40, "#803300");

    // create the moving floor particles
    let floorParticles = [];
    const pushFloorParticles = () => {
        let amount = MAX_MIN(2, 5);
        for(let _=0; _ {
        //let amount = Math.ceil(Math.random()*2);
        for(let i=0; i < 1; i++){
            let x = MAX_MIN(cw + 5, cw + 10);
            let y = floor.y - 30;
            sourceX = obstacleStartDimension[Math.floor(Math.random()
                *obstacleStartDimension.length)];
            obstacles.push(new Obstacle(ctx, obsData.src, x, y, obsData.areaW, 
                obsData.areaH, obsData.row, obsData.column, 0));
        }
    }
    setInterval(pushObstacles, 4000);

    // create the cat object
    let catData = {
        src:"https://i.ibb.co/180tsjk/black-cat-running-sprite-vector-5177265.jpg",
        areaW:1000,
        areaH:780,
        column:4,
        row:4,
        x:10,
        y:floor.y - 50,
        maxY:(floor.y - 200),
        width:this.areaW / this.column
    }

    let playerStartDimension = 0;
    const updateplayerStartDimension = () => {
        playerStartDimension += (1000/4);
        if(playerStartDimension >= catData.areaW)
            playerStartDimension = 0;
    }
    setInterval(updateplayerStartDimension, 70);

    let player = new Player(ctx, catData.src, catData.x, catData.maxY, 
        catData.areaW, catData.areaH, catData.row, catData.column,
        playerStartDimension, catData.maxY, [catData.x, catData.y]);

    
    
    const main = () => {
        // score and time
        ctx.fillStyle = "black";
        ctx.font = "bold 20px Arial";
        ctx.fillText(`Time:. ${time}`, 10, 20);
        ctx.fillText(`Score:. ${player.score}`, cw-100, 20);

        // draw the sun
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = sunGradient;
        ctx.arc(cw - 100, ch/4, 50, 0, 2*Math.PI, false);
        ctx.fill();
        ctx.closePath();
        ctx.restore();

        // animate obstacles 
        for(let i=0; i obstacles[i].x + 20 &&
                obstacles[i].y < player.y + (player.height - 14) &&
                player.y + (player.height - 14) > obstacles[i].y){
                isPlaying = false;
                document.getElementById("gameover").innerHTML = "Game Over";
                prompt.style.display = "block";
                cancelAnimationFrame(mainAnimeId);
            }
            else if(obstacles[i].x < -obstacles[i].width){
                obstacles.splice(i, 1);
                player.score += 1;
            }
        }

        ctx.save();
        ctx.globalCompositeOperation = "destination-over";
        player.startDimension = playerStartDimension;
        player.update();
        player.jump();
        ctx.restore();

        floor.draw();
        for(let _=0; _ {
        if(isPlaying){
            prompt.style.display = "none";
            ctx.clearRect(0, 0, cw, ch);
            mainAnimeId = requestAnimationFrame(animate);
            main();
        }
        else{
            prompt.style.display = "block";
            main();
        }
    }
    animate();

    // function to start/reset game
    const startGame = () => {
        isPlaying = true;
        time = 0;
        floorParticles = [];
        obstacles = [];
        player.y = catData.maxY;
        playerStartDimension = 0;
        player.score = 0;
        player.vY = player.speed;
        animate();
    }
    startBtn.addEventListener("click", startGame, false);

    const jump = (e) => {
        if(!player.isJumped)player.vY = player.speed;
    }
    window.addEventListener("keydown", jump, false);
    cvs.addEventListener("touchstart", jump, false);

}

window.addEventListener("load", init, false);

Lalu simpan

Untuk penjelasan masing-masing kode diatas saya anggap anda sudah paham. Bagi yang kurang paham bisa tanya google atau tinggalkan komentar di bawah

Sekarang saatnya menguji kode di atas dengan membuka file indeks. html di browser. Jika berbuah, maka akan muncul seperti gambar di bawah ini

Rekomendasi lain untuk Anda. Aplikasi sewa mobil

Kode script untuk permainan kucing melompat ini dengan html, css dan javascript dapat Anda kembangkan jika Anda masih kesulitan membuat kode. Terima kasih telah berkunjung