Buat Karakter Game dengan HTML5 dan JavaScript - Bagian 2

Dalam Bagian 2 kita akan memberikan karakter kita kemampuan untuk melompat.

Contoh di bawah ini menunjukkan karakter kita semakin dilempari bola merah kecil. Obat hanya akan melompat. Klik tombol lompat di bawah ini untuk menyelamatkannya dari monoton Sisyphean nya.

Apa sebuah Navigasi? 

Berikut ini adalah contoh dari karakter sebelum dan selama melompat. Ada enam perbedaan. Dapatkah Anda melihat mereka?

Perbedaan:

• Lengan kiri diputar.
• Lengan kanan diputar.
• Kaki kiri sedikit.
• Kaki kanan ditarik kembali
• Posisi karakter lebih tinggi.
• Bayangan itu lebih kecil.

Save State

Kami membuat variabel untuk menyimpan kondisi karakter melompat kami.

var jumping = false;

Kami menginisialisasi variabel melompat ke false

Kami membuat lompatan fungsi yang hanya akan mengubah keadaan jika belum melompat.

function jump() {
                        
  if (!jumping) {
    jumping = true;
    setTimeout(land, 500);
  }
}

Fungsi Thejump pertama memeriksa nilai dari variabel melompat. Jika jumping benar maka lakukan apa-apa karena melompat sedang berlangsung. Jika jumping adalah palsu kemudian mengatur variabel melompat ke benar dan memanggil fungsi tanah setelah 500 miliseconds (0,5 detik).

Fungsi lahan akan berakhir lompat.

function land() {
                        
  jumping = false;
}

Fungsi tanah hanya menetapkan variabel melompat ke false.

Baru Langsung Gambar

Keadaan melompat akan membutuhkan gambar 3 gambar baru. Kami menciptakan mereka seperti yang kami lakukan di Bagian 1 dan menyimpannya sebagai PNGs transparan.

var totalResources = 9;

loadImage("leftArm-jump");
loadImage("legs-jump");
loadImage("rightArm-jump");

Kami kenaikan totalResources variabel dengan 3 dan memuat tiga gambar baru yang memiliki "-melompat" ditambahkan ke file mereka nama.

redraw

Sekarang kita memperbarui fungsi redraw kita buat dalam Bagian 1 untuk mencerminkan keadaan lompatan baru.

function redraw() {

  var x = charX;
  var y = charY;
  var jumpHeight = 45;
  
  canvas.width = canvas.width; // clears the canvas 

  // Draw shadow
  if (jumping) {
    drawEllipse(x + 40, y + 29, 100 - breathAmt, 4);
  } else {
    drawEllipse(x + 40, y + 29, 160 - breathAmt, 6);
  }
  
  if (jumping) {
    y -= jumpHeight;
  }

  if (jumping) {
    context.drawImage(images["leftArm-jump"], x + 40, y - 42 - breathAmt);
  } else {
    context.drawImage(images["leftArm"], x + 40, y - 42 - breathAmt);
  }
  
  if (jumping) {
    context.drawImage(images["legs-jump"], x - 6, y );
  } else {
    context.drawImage(images["legs"], x, y);
  }
    
  context.drawImage(images["torso"], x, y - 50);
  context.drawImage(images["head"], x - 10, y - 125 - breathAmt);
  context.drawImage(images["hair"], x - 37, y - 138 - breathAmt);
  
  if (jumping) {
    context.drawImage(images["rightArm-jump"], x - 35, y - 42 - breathAmt);
  } else {
    context.drawImage(images["rightArm"], x - 15, y - 42 - breathAmt);
  }
  
  // Draw eyes
  drawEllipse(x + 47, y - 68 - breathAmt, 8, curEyeHeight);
  drawEllipse(x + 58, y - 68 - breathAmt, 8, curEyeHeight);
}

Kami menambahkan jumpHeight variabel baru yang adalah berapa banyak piksel karakter kita akan melompat.

Jika melompat dengan benar maka lakukan hal berikut:

• Buatlah bayangan karakter yang lebih kecil.
• Kenaikan posisi karakter y oleh tinggi melompat.
• Buatlah versi melompat dari lengan dan kaki.

bekerja Contoh

Berikut ini adalah contoh kerja. Contoh kode yang tersedia untuk di-download di bawah ini.

Download Source Code

• Download HTML5 Canvas Game Character (zip format): html5-canvas-drawing-app-2.zip

Related Articles

• Create HTML5 Drawing App
• HTML5 Canvas Example
• HTML5 vs Flash Drawing

Sumber :

http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/2/