Pages

▼

18 Eylül 2018 Salı

HTML5 ile nesne oluşturma ve hareket ettirme



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>

zaman:

7 yorum:

  1. Adım Adım27 Mart 2019 12:10

    Bunları anlamak için hangi seviyede olmamız lazım?

    YanıtlaSil
  2. Adsız27 Ekim 2019 02:53

    https://www.snet.com.tr/aff.php?aff=125
    sizinde hosting siteniz olsun kampanyadan yararlanın

    YanıtlaSil
  3. Jatin310228 Ağustos 2020 13:42

    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

    YanıtlaSil
  4. Raajsonwane6 Eylül 2020 16:52

    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

    YanıtlaSil
  5. Mihir Mane12 Eylül 2020 08:55

    Get jobs in modelling, singing, dancing as freelance modelling jobs, freelance
    dancers and choreographers, freelance singer, freelance rappers in India.
    jobs for artists

    YanıtlaSil
  6. rohit chavan18 Eylül 2020 16:37

    Best microwave oven in India under 5000, 10000, 15000 . Get the best microwave oven
    for grill, solo, convection etc. best microwave oven under 10000

    YanıtlaSil
  7. sanjupawar15 Ekim 2020 08:38

    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

    YanıtlaSil