• Beranda
  • Autosultan
  • Bitcoin
  • Dollar
  • Linux
  • LOKER
  • Printer
  • Sofware
  • sosial
  • TISniper
  • Virus
  • Windows

T.I Sniper

#Expert Advisor for MetaTrader 4 #Expert Advisor for MetaTrader 5 #youtube #google #free dollar business every day #Lowongan #Pekerjaan #Loker #forex #trading Autopilot #mining crypto #Update #Tutorial #Komputer Perbaikan, #Email #Facebook , #whatsapp ,#instagram #telegram ,#Internet ,#Motivasi , #Crypto , #AirDrop, #Bitcoin, #Ethereum, #Binance coin, #Cardano, #Degocoin, #Litecoin #Indodax, #Coinbase, #Nexo Dan Mata Uang Digital Lain , #Website, Perbaikan #Server #Domain , #Hosting, #Whm

    • Beranda
    • Contact Forum
    • Coffee JKs88
    • Tentang Kami
    • Parse Code Html
    • Text Terbalik
    • Privacy Policy

    Ikuti Kami!

    Follow Akun Instagram Kami Dapatkan Notifikasi Terbaru!
    Ikuti Kami di Facebok! Untuk mendapatkan notifikasi terbaru.

    Postingan Populer

    Backlink dengan Google Dork Seo

    Dork Seo
    Januari 01, 2016
    0

    Cara Dapat Backlink dengan Google Dork

    Dork Seo
    Februari 13, 2016
    0

    Download File ISO Windows 11 Dan Bootable USB Rufus

    Sofware Windows
    Desember 02, 2021
    0

    Cara Dapat Backlink Edu Gratis

    Seo
    Februari 13, 2016
    0

    SBS opening Fix Autosultan

    Autosultan zonamotivasi
    Januari 25, 2022
    0
    Author
    chmood
    Tautan disalin ke papan klip!
    Share Posts "Cara Membuat Game Dengan HTML5, CSS, dan JavaScript"
  • Salin link
  • Simpan Ke Daftar Bacaan
  • Bagikan ke Facebook
  • Bagikan ke Twitter
  • Bagikan ke Pinterest
  • Bagikan ke Telegram
  • Bagikan ke Whatsapp
  • Bagikan ke Tumblr
  • Bagikan ke Line
  • Bagikan ke Email
  • HomeHtml5PemogramanwebsiteCara Membuat Game Dengan HTML5, CSS, dan JavaScript
    Cara Membuat Game Dengan HTML5, CSS, dan JavaScript

    Cara Membuat Game Dengan HTML5, CSS, dan JavaScript

    Simpan Postingan
     


                                                

    Ternyata hanya dengan 3 bahasa kita bisa Membuat Game Dengan HTML5, CSS, dan JavaScript secara simple dan mudah tentunya, seperti posting kali ini yang akan membahasa tentang hal tersebut. Seperti yang kita tahu bahwa HTML5 merupakan versi terakhir dari HyperText Markup Language, untuk belajar lebih mendalam dan step by step bisa mengunjungi website w3school, disan diulas secara mendetail satu persatu dari syntax html5.

    Game ini merupakan game yang sangat simple, namun tentu saja bisa dikembangin sesuai dengan selera agar bisa menjadi lebih bagus lagi dan lebih powerful tentunya untuk mengembangkannya hal yang utama yang harus diubah adalah pada bagian Javascript, karena js lah yang menentukan Statistik game tersebut.

    Oke kita langsung saja pada cara Membuat Game Dengan HTML5, CSS, dan JavaScript, Perhatikan beberapa Kode dibawah ini dan simpan sesuai petunjuk. atau bisa juga disimpan dengan nama sesuai selera, namun jangan lupa untuk menyesuaikan pemanggilan namanya dibagian Index.

                                                
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src='script.js'></script>
    <title>Game HTML5, CSS, JavaScript</title>
    </head>
    <body>
    <div id='info'>
    <div id='instructions'>Hello and welcome to my game T.I Sniper !!
    <br/>Premis sederhana, Gunakan mouse Anda untuk mengumpulkan blok hijau sebanyak yang Anda bisa
    <br/>The Rules:
    <br/>1. Kumpulkan titik-titik hijau
    <br/>2. Hindari titik merah
    <br/>3. Titik hijau membuat kolektor Anda bertambah besar
    <br/>4. Titik merah membuat kolektor Anda bertambah kecil
    <br/>5. Anda kehilangan Nyawa untuk setiap blok merah yang Anda tekan
    <br/>6. Setelah Anda mengumpulkan 30 blok Anda maju ke tingkat berikutnya (mempercepat dan lebih titik)
    <br/>7. Setelah setiap tingkat Anda mendapatkan kehidupan baru
    <br/>8. Kumpulkan titik-titik biru untuk mendapatkan kehidupan ekstra
    <br/>9. Kehilangan semua kehidupan Anda dan GAME OVER.....
    <br/><br/>
    <div id='begin'>Start</div>
    </div>
    </div>
    <div id='frame'>
    <div id='title'>How high can you get?</div>
    <div id='inner'>
    <div id ='other'><div id='box'></div></div>
    <div class='good'></div>
    <div class='bad'></div>
    <div class='ugly'></div>
    </div>
    </div>
    <div id='left'>
    <div id='clock'>
    <div id='top'>
    <div id='mins'>Minutes</div>
    <div id='secs'>Seconds</div>
    </div>
    <div id='bottom'></div>
    </div>
    <div id='score'>
    Score :<br/> 000000
    </div>
    <div id='button'>
    <div id='lives'>Lives</div>
    <div id='boxLeft'>Boxes Left</div>
    <div id='level'>level</div>
    <div id='easy'>Easy</div>
    <div id='hard'>Hard</div>
    <div id='extreme'>Extreme</div>
    <div id='start'>Play</div>
    <div id='stop'>Stop</div>
    </div>
    </div>
    </body>
    </html>

    Simpan kode diatas dengan nama index.html, kemudian lanjut pada kode berikutnya 
    html,body {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
    max-height:500px;
    background-image: url('http://static.hdw.eweb4.com/media/thumbs/1/13/123999.jpg');
    }
    #info{
    position:relative;
    z-index: 4;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity:0.9;
    color: white;
    }
    #instructions{
    position:relative;
    top:20%;
    text-align: center;
    }
    #begin{
    position: relative;
    cursor: pointer;
    border-radius: 20px;
    margin: 0 auto;
    width: 10%;
    background-color: red;
    text-align: center;
    }
    #frame{
    position:absolute;
    top:4%;
    left:2%;
    width:58%;
    height:91%;
    background: black;
    border: 2px solid black;
    cursor:none;
    }
    #inner{
    position: relative;
    left:10px;
    width:95%;
    height:95%;
    }
    #box{
    position:relative;
    top:80%;
    width:20px;
    height:3%;
    background-color: #add123;
    border-radius: 10px;
    }
    #left{
    position: absolute;
    left: 62%;
    top:5%;
    width: 35%;
    height:90%;
    border: 1px solid red;
    }
    #clock{
    position:relative;
    top:0;
    left:0;
    height:30%;
    width:100%;
    border: 1px solid red;
    background:black;
    }
    #top{
    position:relative;
    top:0;
    left:0;
    height:50%;
    width:99%;
    }
    #mins{
    padding-top:12%;
    color:white;
    position:relative;
    top:0;
    left:0;
    height:30%;
    width:48%;
    float:left;
    text-align:center;
    font-size:190%;
    }
    #secs{
    padding-top:12%;
    color:white;
    position:relative;
    top:0;
    left:0;
    width: 48%;
    height:30%;
    float: right;
    text-align:center;
    font-size:190%;
    }
    #bottom{
    color:white;
    text-align:center;
    font-size: 300%;
    }
    #score{
    color:white;
    text-align:center;
    font-size:300%;
    border: 1px solid red;
    background-color:black;
    height:30.1%;
    text:center;
    }
    #title{
    color:red;
    width:100%;
    font-size:200%;
    text-align:center;
    background:black;
    }
    #button{
    position:relative;
    background:black;
    width:100%;
    height:38.9%
    }
    #easy{
    position:absolute;
    left:4%;
    top:60%;
    width:28%;
    height:12%;
    background-color:blue;
    text-align:center;
    cursor: pointer;
    border-radius:10px;
    }
    #hard{
    position:absolute;
    left:37%;
    top:60%;
    width:28%;
    height:12%;
    background-color:red;
    text-align:center;
    cursor: pointer;
    border-radius:10px;
    }
    #extreme{
    position:absolute;
    left:70%;
    top:60%;
    width:28%;
    height:12%;
    background-color:red;
    text-align:center;
    cursor: pointer;
    border-radius:10px;
    }
    #start{
    position:absolute;
    left:55%;
    top:80%;
    width:40%;
    height:15%;
    background-color:#add123;
    text-align:center;
    cursor: pointer;
    border-radius:10px;
    }
    #stop{
    position:absolute;
    left:5%;
    top:80%;
    width:40%;
    height:15%;
    background-color:#add123;
    text-align:center;
    cursor: pointer;
    border-radius:10px;
    }
    #boxLeft{
    position:relative;
    top: 5px;
    color: white;
    float: left;
    width: 50%;
    text-align:center;
    font-size: 150%;
    }
    #level{
    position: relative;
    top: 5px;
    color: white;
    float: right;
    width: 20%;
    font-size: 150%;
    text-align:center;
    }
    #lives{
    position: relative;
    top: 5px;
    color: white;
    float: right;
    width: 20%;
    text-align:center;
    font-size: 150%;
    }
    .good{
    width:20px;
    height:20px;
    /*background-color:#add123;*/
    position:absolute;
    top:-200px;
    }
    .newBlock{
    width:20px;
    height:20px;
    background-color:#add123;
    background-image :url( 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9Rmc290ZpjfCdOeLaSfF9Eu-hEMwQ2eqUx8QK3Z6aD5nr_OkB');
    position:absolute;
    top:-50px;
    background-size: 100% 100%;
    border-radius: 1000000px;
    }
    .bad{
    width:20px;
    height:20px;
    background-color:red;
    position:absolute;
    top:-200px;
    }
    .badBlock{
    width:20px;
    height:20px;
    background-color:red;
    position:absolute;
    top:-50px;
    border-radius: 1000000px;
    }
    .ugly{
    width:20px;
    height:20px;
    background-color:yellow;
    position:absolute;
    top:-200px;
    }
    .lifeBlock{
    width:20px;
    height:20px;
    background-image :url('http://static3.wikia.nocookie.net/__cb20120809232436/fantendo/images/3/37/NSMBWii1upMushroom.png');
    background-color:blue;
    background-size: 100% 100%;
    position:absolute;
    top:-50px;
    border-radius: 1000000px;
    }
    .hidden {
    display:none;
    }
    #other{
    height:91%;
    margin: 0 auto;
    }
     
    Simpan kode css dengan nama style.css, kemudian lanjut lagi pada kode yang selanjutnya yang merupakan kode terakhir

    $(document).ready(function() {
    //sets the variables
    var sec=0;
    var min=0;
    var limit= 300;
    var limitBad= 400;
    var speed=3000;
    var score=0;
    var boxLeft=30;
    var level=1;
    var lives= 5;
    var mouseoff = 13;
    ///removes the instructions
    $('#begin').click(function(){
    $('#info').slideUp(1000);
    })
    //sets the dificulty by changing the variables
    $('#easy').click(function(){
    speed=3000;
    limit=300;
    limitBad= 400;
    $('#easy').css('background-color','blue');
    $('#hard').css('background-color','red');
    $('#extreme').css('background-color','red');
    });
    $('#hard').click(function(){
    speed=2000;
    limit=200;
    limitBad= 300;
    $('#easy').css('background-color','red');
    $('#hard').css('background-color','blue');
    $('#extreme').css('background-color','red');
    });
    $('#extreme').click(function(){
    speed=1000;
    limit=100;
    limitBad= 200;
    $('#easy').css('background-color','red');
    $('#hard').css('background-color','red');
    $('#extreme').css('background-color','blue');
    });
    var box = $("#box");
    var boxSize = {
    height: box.height(),
    width : box.width()
    };
    //sets the timer
    $('#bottom').html(min+":"+sec);
    //colision in the game
    function testCollision(position1, size1, position2, size2, el) {
    if (((position1.left + size1.width) > position2.left) &&
    ((position1.top + size1.height) > position2.top) &&
    ((position2.left + size2.width) > position1.left) &&
    ((position2.top + size2.height) > position1.top)) {
    // BadaBoom !
    if(el.hasClass('newBlock')){
    score++;
    boxLeft--;
    $('#score').html('Score :<br/>'+ score);
    $('#boxLeft').html('Boxes left :<br/>'+ boxLeft);
    el.remove();
    $('#box').css("width","+=10px");
    boxSize.width= boxSize.width+10;
    mouseoff+=5
    $('#other').css('width','-=10px')
    } else if(el.hasClass('badBlock')) {
    score--;
    lives--;
    $('#score').html('Score :<br/>'+ score);
    el.remove();
    $('#box').css("width","-=10px");
    boxSize.width= boxSize.width-10;
    $('#lives').html('Lives :<br/>'+ lives);
    mouseoff-=5
    $('#other').css('width','+=10px')
    }else if (el.hasClass('lifeBlock')) {
    lives++;
    el.remove();
    $('#lives').html('Lives :<br/>'+ lives);
    };
    if(boxLeft ==0){
    level++;
    speed-=200;
    limit-=10;
    limitBad-=10;
    lives++;
    boxLeft=30;
    $('#box').css('width','20px');
    boxSize.width= 20;
    $('#level').html('Level :<br/>'+ level);
    $('#lives').html('Lives :<br/>'+ lives);
    clearInterval(dropBox);
    clearInterval(baddropBox);
    mouseoff=13
    $('#other').css('width','100%')
    //calls function again calls function again
    function fallBlock(el){
    el.animate({ 'top': '90%' },speed, function(){$(this).remove();});
    }
    dropBox = setInterval(function(){
    var new_block = $('.good').clone().addClass('newBlock').addClass('col').removeClass('good').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.good'));
    fallBlock(new_block);
    },limit);
    //inserts the bad bricks
    baddropBox = setInterval(function(){
    var badBlock = $('.bad').clone().addClass('badBlock').addClass('col').removeClass('bad').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.bad')); fallBlock(badBlock);
    },limitBad);
    }
    if (lives==0) {
    clearInterval(myCounter);
    clearInterval(dropBox);
    clearInterval(baddropBox);
    clearInterval(lifedropBox);
    $('#bottom').html(min+":"+sec);
    $('#box').css('width','20px');
    $('#score').html('Score :<br/>'+ score+'<br/> GAME OVER');
    $('.col').remove();
    boxSize.width= 20;
    $('#easy').click();
    min=0;
    sec=0;
    mouseoff=13
    $('#other').css('width','100%')
    };
    }
    }
    //starts the game
    $('#start').click(function(){
    //resets variables
    score=0;
    boxLeft=30;
    level=1;
    lives= 5;
    $('#score').html('Score :<br/>'+ score);
    $('#lives').html('Lives :<br/>'+ lives);
    //detects collision
    $('#level').html('level :<br/>'+ level);
    $('#boxLeft').html('Boxes left :<br/>'+ boxLeft);
    //sets the box catcher movement
    $('#other').mousemove(function(event) {
    $('#box').offset({left: (event.pageX-mouseoff)});
    });
    // clock timer
    myCounter = setInterval(function () {
    if(sec<59){
    sec += 1;
    $('#bottom').html(min+":"+sec);}
    else{
    min+=1;
    sec-=59;
    $('#bottom').html(min+":"+sec);
    }
    }, 1000);
    function fallBlock(el){
    el.animate({ 'top': '90%' },speed, function(){$(this).remove();});
    }
    //inserts new good blocks
    dropBox = setInterval(function(){
    var new_block = $('.good').clone().addClass('newBlock').addClass('col').removeClass('good').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.good'));
    fallBlock(new_block);
    },limit);
    //inserts the bad bricks
    baddropBox = setInterval(function(){
    var badBlock = $('.bad').clone().addClass('badBlock').addClass('col').removeClass('bad').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.bad'));
    fallBlock(badBlock);
    },limitBad);
    //inserts the lives blocks
    lifedropBox = setInterval(function(){
    var lifeBlock = $('.ugly').clone().addClass('lifeBlock').addClass('col').removeClass('ugly').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.ugly'));
    fallBlock(lifeBlock);
    },5000);
    });
    collisionBox=setInterval(function(){$('.col').each(function(){
    var new_blockSize = {height: $(this).height(), width: $(this).width()};
    // calls the function
    testCollision(box.position(), boxSize, $(this).position(), new_blockSize,$(this));
    });},10)
    //stops the game
    $('#stop').click(function(){
    min=0;
    sec=0;
    clearInterval(myCounter);
    clearInterval(dropBox);
    clearInterval(baddropBox);
    clearInterval(lifedropBox);
    $('#bottom').html(min+":"+sec);
    $('#box').css('width','20px');
    $('#easy').click();
    boxSize.width= 20;
    $('.col').remove();
    mouseoff=13
    $('#other').css('width','100%')
    });
    });


    Simpan kode diatas dengan nama script.js nah bergitulah kira-kira kode lengkap dari cara Membuat Game Dengan HTML5, CSS, dan JavaScript pada kali ini. Untuk demonya silahkan menuju link dibawah ini:  Game

    Html5 Pemograman website
    April 18, 2016 • 0 komentar
    Disclaimer: gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami di halaman ini.
    Isi dari komentar adalah tanggung jawab dari pengirim. T.I Sniper mempunyai hak untuk tidak memperlihatkan komentar yang tidak etis atau kasar. Jika ada komentar yang melanggar aturan ini, tolong dilaporkan.

    T.I Sniper

    Your description here

    • Follow
    • Autosultan
    • Wa Admin Bisnis
    Copyright ©2010 - 2022 🔥 T.I Sniper.
    • Beranda
    • Cari
    • Posting
    • Trending
    • Tersimpan