Obrazy gry
- Poprzednia strona Punkty gry
- Następna strona Dźwięk gry
Naciśnięcie przycisku umożliwia przesuwanie uśmiechniętej twarzy:
Jak używać obrazów?
Aby dodać obraz na płótno, użyj wbudowanych właściwości i metod obiektu getContext("2d").
W naszej grze, aby utworzyć element gry jako obraz, użyj konstruktora komponenty, ale musisz odnosić się do url obrazu, a nie do koloru. Musisz również poinformować konstruktora, że typ komponenty to "image":
instancja
function startGame() { myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image"); myGameArea.start(); }
W konstruktora komponenty testujemy, czy komponent należy do typu "image", i używamy wbudowanego konstruktora obiektu "new Image()" do utworzenia obiektu obrazu. Gdy przygotowujemy się do rysowania obrazu, używamy metody drawImage zamiast metody fillRect:
instancja
function component(width, height, color, x, y, type) { this.type = type; 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); } } }
zmieniając obraz
Możesz w każdej chwili zmienić obraz komponentu image
obiektu src
Atrybuty do zmiany obrazu.
Jeśli chcesz zmieniać uśmiechniętą twarz przy każdym ruchu, zmień źródło obrazu po kliknięciu przycisku i przywróć normalne po jego zwolnieniu:
instancja
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; }
Obraz tła
Możesz dodać obraz tła jako komponent do obszaru gry i aktualizować go w każdym klatce:
instancja
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(); }
Przesuń tło
Zmień komponent tła speedX
Atrybut umożliwia przesuwanie tła:
instancja
function updateGameArea() { myGameArea.clear(); myBackground.speedX = -1; myBackground.newPos(); myBackground.update(); myGamePiece.newPos(); myGamePiece.update(); }
powtarzanie tła
Aby to samo tło było wiecznie powtarzane, musimy użyć specjalnej techniki.
po pierwsze powiedz konstruktora komponentu, że to tło. Następnie, konstruktor komponentu doda obraz dwa razy, umieszczając drugi obraz natychmiast za pierwszym.
w newPos()
w metodzie, sprawdź, czy pozycja x komponentu osiągnęła koniec obrazu, jeśli tak, to ustaw pozycję komponentu x
ustawienie pozycji na 0:
instancja
function component(width, height, color, x, y, type) { this.type = type; if (type == "image" || }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; jeśli (this.type == "background") { if (this.x == -(this.width)) { this.x = 0; } } } }
- Poprzednia strona Punkty gry
- Następna strona Dźwięk gry