Oyun Görselleri
- Önceki Sayfa Oyun Puanları
- Sonraki Sayfa Oyun Sesleri
Butona basarak gülümseyen yüzü hareket ettirebilirsiniz:
Görüntüyü nasıl kullanılır?
Görüntüyü eklemek için.getContext("2d") nesnesinin yerleşik görüntü özelliklerini ve yöntemlerini kullanın.
Oyunumuzda, oyun parçasını görüntü olarak oluşturmak istiyorsanız, bileşen yapıcı fonksiyonunu kullanın, ancak görüntünün url'ine değil rengine atıf yapmalısınız. Ayrıca, yapıcı fonksiyona bu bileşenin türünün "image" olduğunu söylemelisiniz:
function component(width, height, color, x, y, type) {
function startGame() { myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image"); myGameArea.start(); {}
Bileşen yapıcı fonksiyonunda, bileşenin "image" türüne ait olup olmadığını test ediyoruz ve yerleşik "new Image()" nesne yapıcı fonksiyonu ile bir görüntü nesnesi oluşturuyoruz. Görüntüyü çizmeye hazırlanırken, fillRect yöntemini değil drawImage yöntemini kullanıyoruz:
function component(width, height, color, x, y, type) {
this.type = type; if (type == "image" || if (type == "image") {}} this.image.src = color; 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 (type == "image" || type == "background") { if (type == "image") {}} ctx.drawImage(this.image, this.x, this.y, this.width, this.height); {} else { ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); {} {} {}
görseli değiştir
Bileşenin image
nesnesinin src
Özelliği kullanarak görseli değiştirin.
Eğer her hareket sırasında gülümseyen yüzü değiştirmek istiyorsanız, kullanıcı butona tıkladığında görüntü kaynağını değiştirin ve butona tıklanmadığında normale dönün:
function component(width, height, color, x, y, type) {
function move(dir) { myGamePiece.image.src = "angry.gif"; if (dir == "up") {myGamePiece.speedY = -1; } if (dir == "down") {myGamePiece.speedY = 1; } if (dir == "left") {myGamePiece.speedX = -1; } if (dir == "right") {myGamePiece.speedX = 1; } {} function clearmove() { myGamePiece.image.src = "smiley.gif"; myGamePiece.speedX = 0; myGamePiece.speedY = 0; {}
Arka plan görseli
Arka plan görselini bileşen olarak ekleyerek, oyun alanına ekleyebilir ve her çerçeve'de arka planı güncelleyebilirsiniz:
function component(width, height, color, x, y, type) {
var myGamePiece; var myBackground; function startGame() { myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image"); myBackground = new component(656, 270, "citymarket.jpg", 0, 0, "image"); myGameArea.start(); {} function updateGameArea() { myGameArea.clear(); myBackground.newPos(); myBackground.update(); myGamePiece.newPos(); myGamePiece.update(); {}
arka planı hareket ettir
Arka plan bileşenini speedX
Özellik, arka planın hareket etmesini sağlar:
function component(width, height, color, x, y, type) {
function updateGameArea() { myGameArea.clear(); myBackground.speedX = -1; myBackground.newPos(); myBackground.update(); myGamePiece.newPos(); myGamePiece.update(); {}
Arka plan döngüsü
Bu aynı arka planın sonsuza kadar döngülenmesi için belirli teknikler kullanmamız gerekiyor.
ilk olarak bileşen yapıcı fonksiyonuna bu arka planı belirt. Daha sonra, bileşen yapıcı fonksiyonu iki kez resim ekleyecek, ikinci resmi hemen ilk resmin ardından yerleştirecektir.
newPos() metodunda, bileşenin x konumunun resmin sonuna ulaşıp ulaşılmadığını kontrol et, eğer ulaştıysa bileşenin
x konumunu 0: olarak ayarla
örnek
function component(width, height, color, x, y, type) {
this.type = type; if (type == "image" || type == "background" ) {this.image = new Image(); this.image.src = color; 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 (type == "image" || type == "background") { ctx.drawImage(this.image, this.x, this.y, this.width, this.height); if (type == "background") { ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height); else { {} } ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); {} {} this.newPos = function() { this.x += this.speedX; this.y += this.speedY; if (this.type == "background") { if (this.x == -(this.width)) { this.x = 0; {} {} {} {}
- Önceki Sayfa Oyun Puanları
- Sonraki Sayfa Oyun Sesleri