18 Eylül 2018 Salı

HTML5 ile nesne oluşturma ve hareket ettirme

By Berkay 20:23 HTML 5, JavaScript 7 comments

Bu yazıda HTML 5 ve JavaScript kullanarak bir nesne oluşturacağız ve klavyedeki sağ - sol yön tuşları yardımıyla nesneyi hareket ettireceğiz.

Öncelikle sayfamıza yeni bir canvas ekliyorum. Body onload fonksiyonu olarak da drawGame fonksiyonunu tanımlıyorum. Çizim işlemlerimi bu fonksiyonda yapacağım.

<body onload="drawGame()">
    <canvas id="game">Tarayıcınız HTML 5 desteklememektedir.</canvas>
</body>

drawGame fonksiyonunda carImage ve carObject isminde sırasıyla Image ve Context oluşturuyorum.

function drawGame() {
    var canvas = document.getElementById("game");
    if(canvas.getContext) {
        var carObject = canvas.getContext("2d");
        var carImage = new Image();
        carImage.src = 'car.png';
        carImage.onload = function() {
            carObject.drawImage(carImage, 0, 0);
        }
    }
}

Şu an sayfamı çalıştırdığımda arabanın ekrana basıldığını görebilirim.

Şimdi klavye kullanarak aracı sağa sola hareket ettirmek için gerekli olan kodu yazıyorum.

Öncelikle yeni bir event tanımlıyorum.

window.addEventListener('keydown', moveCar, true);

moveCar fonksiyonunu oluşturarak gerekli işlemleri orada gerçekleştiriyorum.

function moveCar(event) {
    switch(event.keyCode) {
        case 37:
            horizontalPosition -= 5;
            break;
        case 39:
            horizontalPosition += 5;
            break;
    }

    carObject.clearRect(0, 0, canvas.width, canvas.height);
    carObject.drawImage(carImage, horizontalPosition, 0);
}

Kodun tamamı

<!DOCTYPE html>
<head>
<title>HTML5 Canvas</title>
<script type="text/javascript">
var canvas;
var horizontalPosition = 100;
var carObject;
var carImage;
function drawGame() {
    canvas = document.getElementById("game");
    if(canvas.getContext) {
        window.addEventListener('keydown', moveCar, true);
        carObject = canvas.getContext("2d");
        carImage = new Image();
        carImage.src = 'car.png';
        carImage.onload = function() {
            carObject.drawImage(carImage, horizontalPosition, 0);
        }
    }
}
function moveCar(event) {
    switch(event.keyCode) {
        case 37:
            horizontalPosition -= 5;
            break;
        case 39:
            horizontalPosition += 5;
            break;
    }

    carObject.clearRect(0, 0, canvas.width, canvas.height);
    carObject.drawImage(carImage, horizontalPosition, 0);
}
</script>
</head>
<body onload="drawGame()">
    <canvas id="game">Tarayıcınız HTML 5 desteklememektedir.</canvas>
</body>
</html>

If You Enjoyed This, Take 5 Seconds To Share It

7 yorum:

Adım Adım dedi ki...: Bunları anlamak için hangi seviyede olmamız lazım?; 27 Mart 2019 12:10
Adsız dedi ki...: https://www.snet.com.tr/aff.php?aff=125
sizinde hosting siteniz olsun kampanyadan yararlanın; 27 Ekim 2019 02:53
Jatin3102 dedi ki...: Best place to get lyrics of the favourite song of your favourite bollywood singer. Grab the lyrics for free. Looking for lyrics of popular songs in bollywood in hindi, so you are at right place. Get all types of lyrics for free. Searching for romantic bollywood songs lyrics in hindi? This is the place where you can get all these lyrics in hindi for free. song lyrics in hindi; 28 Ağustos 2020 13:42
Raajsonwane dedi ki...: Get your hands on the best fitness band and count how much steps you have walked. Get this
fitness band right away. best fitness tracker in india; 6 Eylül 2020 16:52
Mihir Mane dedi ki...: Get jobs in modelling, singing, dancing as freelance modelling jobs, freelance
dancers and choreographers, freelance singer, freelance rappers in India.
jobs for artists; 12 Eylül 2020 08:55
rohit chavan dedi ki...: Best microwave oven in India under 5000, 10000, 15000 . Get the best microwave oven
for grill, solo, convection etc. best microwave oven under 10000; 18 Eylül 2020 16:37
sanjupawar dedi ki...: In quest to know what are the trending topics in india? Get all the latest topics
here and know which trends are going viral here. trending news in hindi; 15 Ekim 2020 08:38