Oyun Görselleri

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);
    {}
  {}
{}

Kendi Kendine Deney

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;
{}

Kendi Kendine Deney

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();
{}

Kendi Kendine Deney

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();
{}

Kendi Kendine Deney

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;
      {}
    {}
  {}
{}

Kendi Kendine Deney