18 Eylül 2018 Salı

HTML5 ile nesne oluşturma ve hareket ettirme

By Berkay 20:23 , 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>

Read More