cara tips: html

html

Jumat, 28 April 2017

Membuat Jam Dinding dengan Html

April 28, 2017 Leave a Reply

Hampir setiap hari bahkan setiap waktu kita melihat jam apalagi pada waktu yang ditunggu-tunggu, hampir di setiap rumah ada jam dinding, walaupun sebenarnya informasi akan waktu itu banyak tapi keberadaan jam dinding seolah-olah tidak bisa dihindari.

Sebagai pecinta html terbersit di benak saya bagaimana cara membuat jam dinding tersebut, setelah mengumpulkan dari beberapa sumber akhirnya saya menemukan cara membuat jam dinding dengan html. seperti yang kita ketahui tentunya jam dinding tersebut biasanya terdiri dari 3 jarum jam yaitu jarum yang panjang, untuk detik dan menit serta jarum pendek untuk menunjukan jam.

Apabila kita ingin membuat jam dinding itu berbentuk lingkaran, maka kita juga harus tahu bagaimana cara membuat lingkaran dengan html.berikut adalah script html untuk membuat jam dinding:

<!DOCTYPE html>
<html>
<body>

<canvas id="mycanvas" width="400" height="400"
style="background-color:#0fff">
</canvas>
<script>
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(gambarjam, 1000);
function gambarjam() {
drawFace(ctx, radius);
angkajam(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#00ff');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#00ff');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#00ff';
ctx.fill();
}
function angkajam(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    jarumjam(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    jarumjam(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    jarumjam(ctx, second, radius*0.9, radius*0.02);
}
function jarumjam(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

</body>
</html>

Dari kode di atas kita bisa tahu kode mana untuk membuat jarum jam, dan mana kode untuk membuat lingkaran, jangan lupa simpan kode di atas dengan ekstensi html.kemudian jalankanlah kode html itu maka tampilan jam di dengan kode di atas akan seperti ini :

Categories: html

Cara Membuat game dengan HTML

April 28, 2017 Leave a Reply

Pada postingan kali ini saya ingin berbagi tips, bagaimana cara membuat game dengan html, pada postingan sebelumnya saya juga pernah memberikan tips tentanga bagaimana cara membuat game dengan html,kala itu tutorialnya game html seperti game loncat-loncat dengan menggunakan mouse untuk menggerakan pemainnya. namun kali ini saya mencoba berbagi tips untuk membuat game html dengan menggunakan tanda panah pada keyboard.

game html kali ini dinamakan game ular, hampir sama dengan game-game yang kita lihat di hp jadul. memang game ini cukup sederhana, namun kalau dulu asyik menggunakan game ular tersebut namun kali ini timbul pertanyaan bagaimana cara membuat game ular tersebut.

Seperti biasa untuk membuat file html kita harus membuatnya di notepad. Pada notepad itu kita harus menyiapkan area untuk game snake itu area game ini biasanya ada pada html5 yang disebut dengan istilah canvas maka contoh penulisannya seperti ini:

<!DOCTYPE html>

Untuk mengatur lebar dan tingginya bisa disesuaikan dengan kebutuhan sebesar mana area game itu akan dibuat namun jangan melebihi pandangan kita di komputer. selain dengan kode html tersebut kode di atas harus dilengkapi dengan kode javascript, maka untuk lengkapnya copykan saja script html berikut, kode ini sudah digabung antara html dan javascript.

<!DOCTYPE html>
<html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" >
            $(document).ready(function() {
                var canvas = $("#canvas")[0];
                var ctx = canvas.getContext("2d");
                var w = $("#canvas").width();
                var h = $("#canvas").height();

                var cw = 10;
                var d;
                var food;
                var score;

                var snake_array; //membuat cell aray untuk membuat ular

                function init()
                {
                    d = "right"; //default direction
                    create_snake();
                    create_food(); //membuat makanan untuk ular
                    //score game
                    score = 0;

                    if (typeof game_loop != "undefined")
                        clearInterval(game_loop);
                    game_loop = setInterval(paint, 60);
                }
                init();

                function create_snake()
                {
                    var length = 5; //panjang ular default
                    snake_array = [];
                    for (var i = length - 1; i >= 0; i--)
                    {
                        //membuat ular horizontal mulai dari arah kiri
                        snake_array.push({x: i, y: 0});
                    }
                }

                //membuat makanan
                function create_food()
                {
                    food = {
                        x: Math.round(Math.random() * (w - cw) / cw),
                        y: Math.round(Math.random() * (h - cw) / cw),
                    };
                }

                //Mewarnai tubuh ular
                function paint()
                {
                    ctx.fillStyle = "white";
                    ctx.fillRect(0, 0, w, h);
                    ctx.strokeStyle = "black";
                    ctx.strokeRect(0, 0, w, h);

                    //Membuat pergerakan untuk ular.
                    var nx = snake_array[0].x;
                    var ny = snake_array[0].y;
                    if (d == "right")
                        nx++;
                    else if (d == "left")
                        nx--;
                    else if (d == "up")
                        ny--;
                    else if (d == "down")
                        ny++;

                    //Cek tabakan tembok
                    if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny, snake_array))
                    {
                        //restart game
                        init();
                        return;
                    }

                    //Cek tabrakan dengan makanan
                    if (nx == food.x && ny == food.y)
                    {
                        var tail = {x: nx, y: ny};
                        score++;
                        //membuat makanan baru
                        create_food();
                    }
                    else
                    {
                        var tail = snake_array.pop();
                        tail.x = nx;
                        tail.y = ny;
                    }

                    snake_array.unshift(tail);

                    for (var i = 0; i < snake_array.length; i++)
                    {
                        var c = snake_array[i];
                        paint_cell(c.x, c.y);
                    }

                    //Mewarnai makanan
                    paint_cell(food.x, food.y);
                    //Mewarnai score game
                    var score_text = "Score: " + score;
                    ctx.fillText(score_text, 5, h - 5);
                }

                function paint_cell(x, y)
                {
                    ctx.fillStyle = "green";
                    ctx.fillRect(x * cw, y * cw, cw, cw);
                    ctx.strokeStyle = "black";
                    ctx.strokeRect(x * cw, y * cw, cw, cw);
                }

                function check_collision(x, y, array)
                {
                    for (var i = 0; i < array.length; i++)
                    {
                        if (array[i].x == x && array[i].y == y)
                            return true;
                    }
                    return false;
                }

                //Keyboard control ular
                $(document).keydown(function(e) {
                    var key = e.which;
                    if (key == "37" && d != "right")
                        d = "left";
                    else if (key == "38" && d != "down")
                        d = "up";
                    else if (key == "39" && d != "left")
                        d = "right";
                    else if (key == "40" && d != "up")
                        d = "down";
                })

})

Jangan lupa simpan kode di atas dengan gameular.html, kemudian coba jalankan, untuk demo dari kode ular itu bisa dicoba dahulu disini !

Categories: html

Sabtu, 22 April 2017

Membuat game dengan Html

April 22, 2017 Leave a Reply

Membuat game dengan html

Html adalah kependendekan dari Hypertext mark up language, merupakan bahasa pemograman yang biasa digunakan oleh para web designer. file html bisa dibuat dengan menggunakan text editor notepad, yang secara otomatis sudah terinstall pada saat kita menginstall window. Jadi untuk mempraktekan tutorial ini sangatlah mudah hanya dengan mencari program notepad di komputer yang kita miliki, lalu kita mengetikan kodenya.

Penulisan Kode html biasanya di mulai dengan menuliskan tag html seperti <html> dan di akhri dengan </html>. itu adalah pengetahuan dasar tentang penulisan kode-kode html. Kali ini saya akan berbagi pengetahuan bagaimana cara membuat game dengan menggunakan kode html tersebut. Ini adalah contoh game yang akan kita buat.

Untuk membuat game seperti di atas kita tinggal Membuka Program Notepad Kemudian Kita Ketikan Kode Html berikut :

<!DOCTYPE html>
<html>

<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: white;
}
</style>


      <div class="w3-row-padding w3-padding-xxlarge">
        <div class="w3-col m4">


      </div>

    </div>





<div class="w3-main w3-light-grey" id="belowtopnav" style="margin-left:20px;">
<div class="w3-row w3-white">
    <div class="w3-col l10 m12" id="main">

<div id="myfilter" style="position:absolute;background-color:#000000;opacity:0.3;width:500px;height:250px;display:none"></div>
<div id="myrestartbutton" style="position:absolute;padding-top:90px;padding-left:220px;display:none;"><button onclick="restartGame()">Restart</button></div>
<div id="canvascontainer"></div>
<br>
<div style="text-align:center;width:500px;">
<button ontouchstart="moveup()" onmousedown="moveup()" onmouseup="clearmove()">UP</button><br><br>
<button ontouchstart="moveleft()" onmousedown="moveleft()" onmouseup="clearmove()">LEFT</button>
<button ontouchstart="moveright()" onmousedown="moveright()" onmouseup="clearmove()">RIGHT</button><br><br>
<button ontouchstart="movedown()" onmousedown="movedown()" onmouseup="clearmove()">DOWN</button>
</div>
<br>

<script>

var myGameArea;
var myGamePiece;
var myObstacles = [];
var myscore;

function restartGame() {
document.getElementById("myfilter").style.display = "none";
document.getElementById("myrestartbutton").style.display = "none";
myGameArea.stop();
myGameArea.clear();
myGameArea = {};
myGamePiece = {};
myObstacles = [];
myscore = {};
document.getElementById("canvascontainer").innerHTML = "";
startGame()
}

function startGame() {
    myGameArea = new gamearea();
    myGamePiece = new component(30, 30, "red", 10, 75);
    myscore = new component("15px", "Consolas", "black", 220, 25, "text");
    myGameArea.start();
}

function gamearea() {
    this.canvas = document.createElement("canvas");
    this.canvas.width = 500;
    this.canvas.height = 250;
    document.getElementById("canvascontainer").appendChild(this.canvas);
    this.context = this.canvas.getContext("2d");
    this.pause = false;
    this.frameNo = 0;
    this.start = function() {
        this.interval = setInterval(updateGameArea, 20);
    }
    this.stop = function() {
        clearInterval(this.interval);
        this.pause = true;
    }
    this.clear = function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {

    this.type = type;
    if (type == "text") {
        this.text = color;
    }
    this.score = 0;    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, y, min, max, height, gap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            myGameArea.stop();
            document.getElementById("myfilter").style.display = "block";
            document.getElementById("myrestartbutton").style.display = "block";
            return;
        }
    }
    if (myGameArea.pause == false) {
        myGameArea.clear();
        myGameArea.frameNo += 1;
        myscore.score +=1;
        if (myGameArea.frameNo == 1 || everyinterval(150)) {
            x = myGameArea.canvas.width;
            y = myGameArea.canvas.height - 100;
            min = 20;
            max = 100;
            height = Math.floor(Math.random()*(max-min+1)+min);
            min = 50;
            max = 100;
            gap = Math.floor(Math.random()*(max-min+1)+min);
            myObstacles.push(new component(10, height, "green", x, 0));
            myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
        }
        for (i = 0; i < myObstacles.length; i += 1) {
            myObstacles[i].x += -1;
            myObstacles[i].update();
        }
        myscore.text="SCORE: " + myscore.score;
        myscore.update();
        myGamePiece.x += myGamePiece.speedX;
        myGamePiece.y += myGamePiece.speedY;
        myGamePiece.update();
    }
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function moveup(e) {
    myGamePiece.speedY = -1;
}

function movedown() {
    myGamePiece.speedY = 1;
}

function moveleft() {
    myGamePiece.speedX = -1;
}

function moveright() {
    myGamePiece.speedX = 1;
}

function clearmove(e) {
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
}
startGame();

</script>
</div>
</div>

</html>

Simpanlah kode di atas dengan nama gamehtml.html, nah itulah contoh sederhana membuat game dengan html.

Categories: html

cara tips

Jumat, 28 April 2017

Membuat Jam Dinding dengan Html

Cara Membuat game dengan HTML

Sabtu, 22 April 2017

Membuat game dengan Html

Membuat game dengan html

Popular Posts

Labels Cloud

Facebook Like

Arsip Blog

Laporkan Penyalahgunaan

Mengenai Saya

Membuat Progress bar dengan Excel