Jumat, 06 Juli 2012

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.
Character Jump Outline
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


Related Articles


Sumber :

Buat Aplikasi Menggambar dengan HTML5 kanvas dan JavaScript


Tutorial ini akan membawa Anda langkah demi langkah melalui pengembangan sebuah aplikasi web sederhana dengan menggunakan gambar kanvas HTML5 dan JavaScript mitranya. Tujuan artikel ini adalah untuk mengeksplorasi proses membuat aplikasi sederhana di sepanjang jalan belajar:

Cara menggambar dinamis di atas kanvas HTML5

  1. Masa depan possiblities kanvas HTML5
  2. Kompatibilitas saat browser kanvas HTML5
  3. Setiap langkah termasuk demo bekerja, jika Anda ingin langsung beralih:
  • Sederhana Demo
  • Warna Demo
  • Ukuran Demo
  • Alat Demo
  • Garis Demo
  • Lengkap Demo
  • Tentukan Tujuan kami


Mari kita membuat aplikasi web di mana pengguna dinamis dapat menggambar pada kanvas HTML5. Apa yang akan pengguna kami digunakan? Sebuah buku mewarnai datang ke pikiran, yang berarti krayon. Alat pertama kami adalah krayon. Meskipun dunia nyata tidak setuju, saya pikir kita harus bisa menghapus krayon. Alat kedua kami akan menjadi penghapus (realitas maaf). Dan karena saya selalu telah menjadi Sharpie ® penggemar alat terakhir kami akan penanda.

Alat kami bisa menggunakan warna (kecuali mungkin penghapus kami). Mari kita tetap sederhana, sehingga kami memberikan pengguna kami 4 warna berbeda untuk memilih dari.

Demikian pula kita juga memberikan pengguna kami 4 ukuran yang berbeda untuk menggambar dengan, karena kita bisa. Untuk rekap app kita harus memiliki berikut ini:


  • 3 alat: krayon, spidol, penghapus
  • 4 warna untuk dipilih (kecuali penghapus)
  • 4 ukuran untuk memilih dari

Seperti buku mewarnai, mari kita memberikan sesuatu pengguna kami untuk "warna". Aku telah memilih favorit saya: Bebek Semangka oleh Rachel Cruthirds.

Siapkan HTML5 kanvas: Markup
Kita hanya perlu garis markup; segala sesuatu yang lain akan berada dalam scripting.



Tunggu ... HTML5 masih baru dan beberapa browser (pssst. .. itu berarti Anda Internet Explorer) tidak mendukung tag kanvas, jadi mari kita gunakan baris ini markup sebagai gantinya:



Siapkan HTML5 kanvas: Scripting
Untuk mempersiapkan kanvas kita, kita akan berharap untuk menggunakan:
context = document.getElementById('canvasInAPerfectWorld').getContext("2d");
Namun IE tidak tahu apa tag kanvas berarti, dan jika kita digunakan yang di markup kami, IE akan melayani kita dengan hidangan utama dari kesalahan. Sebaliknya, kita membuat elemen kanvas dalam JavaScript dan menambahkan ke div kita disebut canvasDiv.
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
 canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
Untuk kompatibilitas Internet Explorer kita juga harus menyertakan script tambahan: ExplorerCanvas.

Buat Menggambar "kanvas" Sederhana
Sebelum kita menambahkan opsi apapun, mari kita menangani dasar-dasar dinamis menggambar pada sebuah kanvas HTML5. Ini akan terdiri dari 4 kejadian mouse dan dua fungsi: addClick untuk merekam data mouse dan redraw yang akan menarik data tersebut.

Mouse Down Event: Bila pengguna mengklik pada kanvas kami mencatat posisi dalam array melalui fungsi addClick. Kami mengatur cat boolean true (kita akan melihat mengapa dalam detik). Akhirnya kami memperbarui kanvas dengan fungsi redraw.
$('#canvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
  
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  redraw();
});
Gerakan mouse Event: Sama seperti bergerak ujung penanda pada selembar kertas, kita ingin menggambar di kanvas ketika pengguna menekan kita. Cat boolean akan membiarkan kami jika penanda virtual menekan kertas atau tidak. Jika cat benar, maka kami mencatat nilai. Kemudian redraw.
$('#canvas').mousemove(function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});
Mouse Up Event: Marker adalah dari kertas; boolean cat akan ingat!
$('#canvas').mouseup(function(e){
  paint = false;
});
Mouse Leave Event: Jika penanda berbunyi kertas, kemudian melupakan Anda!
$('#canvas').mouseleave(function(e){
  paint = false;
});
Berikut adalah fungsi addClick yang akan menyelamatkan posisi klik:
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}
Fungsi redraw adalah dimana keajaiban terjadi. Setiap kali fungsi ini dipanggil kanvas dibersihkan dan semuanya digambar ulang. Kami bisa lebih efisien dan redraw hanya aspek-aspek tertentu yang telah berubah, tapi mari kita tetap sederhana.

Kami menetapkan sifat stroke yang sedikit untuk warna, bentuk, dan lebar. Lalu untuk setiap kali kita dicatat sebagai penanda atas kertas kita akan menarik garis.
function redraw(){
  canvas.width = canvas.width; // Clears the canvas
  
  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 5;
   
  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
}
Menggambar sederhana kanvas Demo

Cobalah:
Clear the canvas: 
Tambahkan Warna
Mari kita memberikan pengguna kami beberapa pilihan warna. Untuk melakukannya, semua yang perlu kita lakukan adalah menambahkan mendeklarasikan beberapa variabel global dan memperbarui redraw fungsi kita.

Deklarasi variabel empat warna: colorPurple, colorGreen, colorYellow, colorBrown dengan nilai warna hex yang sesuai, sebuah variabel untuk menyimpan warna saat ini: curColor, dan sebuah array untuk mencocokkan warna yang dipilih ketika pengguna mengklik kanvas clickColor.
var colorPurple = "#cb3594";
var colorGreen = "#659b41";
var colorYellow = "#ffcf33";
var colorBrown = "#986928";

var curColor = colorPurple;
var clickColor = new Array();
Fungsi addClick perlu diperbarui untuk merekam warna yang dipilih ketika pengguna mengklik.
function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
  clickColor.push(curColor);
}
Karena warna dapat bervariasi saat ini, kami perlu memperbarui fungsi redraw jadi referensi warna yang aktif ketika pengguna diklik. Kami memindahkan baris tentang strokeStyle ke dalam untuk loop dan menetapkan ke nilai warna dalam clickColor array baru yang sesuai dengan clickage pengguna.
function redraw(){
  /* context.strokeStyle = "#df4b26"; */
  context.lineJoin = "round";
  context.lineWidth = 5;
   
  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      contex.moveTo(clickX[i-1], clickY[i-1]);
    }else{
      context.moveTo(clickX[i]-1, clickY[i]);
    }
    context.lineTo(clickX[i], clickY[i]);
    context.closePath();
    context.strokeStyle = clickColor[i];
    context.stroke();
  }
}
Demo Warna
Cobalah dengan pilihan warna:
  • Clear the canvas: 
  • Choose a color: 

Tambahkan Ukuran
Sama seperti kita menambahkan warna, mari kita tambahkan beberapa ukuran untuk memilih dari: "kecil", "normal", "besar", dan "besar".

Kami membutuhkan beberapa lebih variabel global: clickSize dan curSize.
var clickSize = new Array();
var curSize = "normal";
Fungsi addClick perlu diperbarui untuk mencatat ukuran dipilih bila pengguna mengklik.
function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
  clickColor.push(curColor);
  clickSize.push(curSize);

}
Update fungsi redraw untuk menangani ukuran baru.
function redraw(){
  context.lineJoin = "round";
  class="highlight delete">/* context.lineWidth = 5; */
  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
    }else{
      context.moveTo(clickX[i]-1, clickY[i]);
    }
    context.lineTo(clickX[i], clickY[i]);
    context.closePath();
    context.strokeStyle = clickColor[i];
    context.lineWidth = radius;
    context.stroke();
  }
}
Demo ukuran
Cobalah dengan berbagai ukuran:
  • Clear the canvas: 
  • Choose a color: 
  • Choose a size: 
Tambahkan Peralatan

Krayon, Marker, Eraser. Tiga alat. Mari kita jadikan mereka.

Dua variabel global yang kita butuhkan adalah: clickTool dan curTool.
var clickTool = new Array();
var curTool = "crayon";
Fungsi addClick perlu diperbarui untuk merekam alat dipilih ketika pengguna klik.
function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
  if(curTool == "eraser"){
    clickColor.push("white");
  }else{
    clickColor.push(curColor);
  }
  clickColor.push(curColor);
  clickSize.push(curSize);
}
Update fungsi redraw untuk menangani alat-alat baru.
function redraw(){
  context.lineJoin = "round";
  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
    }else{
      context.moveTo(clickX[i]-1, clickY[i]);
    }
    context.lineTo(clickX[i], clickY[i]);
    context.closePath();
    context.strokeStyle = clickColor[i];
    context.lineWidth = radius;
    context.stroke();
  }
  if(curTool == "crayon") {
    context.globalAlpha = 0.4;
    context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight);
  }
  context.globalAlpha = 1;
}
Demo Peralatan
Cobalah dengan alat yang berbeda:
  • Clear the canvas: 
  • Choose a color: 
  • Choose a size: 
  • Choose a tool: 
Tambahkan Outline
Buku mewarnai memberikan garis besar sesuatu untuk warna: anak anjing lucu atau kelinci melompat. Saya memilih bebek semangka.

Pertama mendeklarasikan outlineImage variabel.
var outlineImage = new Image();
Memuat gambar outline.
function prepareCanvas(){
  ...
  
  outlineImage.src = "images/watermelon-duck-outline.png";
}
Update fungsi redraw untuk menarik gambar garis besar menggunakan metode drawImage konteks kanvas itu. Parameternya adalah objek gambar yang kita dimuat, posisi kita ingin menggambar gambar, dan dimensi gambar.
function redraw(){
  ...
  
  context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
}
Demo Garis Besar

Berikan coba:
  • Clear the canvas: 
  • Choose a color: 
  • Choose a size: 
  • Choose a tool: 
Akhir Rincian
Kita hampir sampai! Rincian ini terakhir adalah opsional: membatasi area gambar untuk persegi panjang di kanvas dan menggunakan sisa kanvas untuk gui kita (alias tombol).

Mari kita menutupi kanvas sehingga semua gambar adalah dalam area gambar. Kami menggunakan metode klip dengan menyimpan dan mengembalikan metode. Metode ini saat ini tidak didukung oleh Internet Explorer.
function redraw()
{
  ...
  
  context.save();
  context.beginPath();
  context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
  context.clip();
  
  var radius;
  var i = 0;
  for(; i < clickX.length; i++)
  {
    ... 
  }
  context.restore();
  ...
} // end redraw function
Yang terakhir adalah untuk memindahkan semua tombol-tombol di atas kanvas kami. Ini melibatkan memuat gambar dan menampilkan mereka berdasarkan interaksi pengguna kami. Saya menggunakan teknik standar JavaScript jadi saya tidak akan membuat Anda bosan dengan rincian (tapi itu termasuk dalam kode sumber jika Anda tertarik). Dan di sana Anda memilikinya!

Lengkap Demo
Sekarang kita telah menciptakan sebuah aplikasi HTML5 kanvas menggambar, mari kita istirahat dan membuat gambar!

Complete Demo

Now that we have created an HTML5 canvas drawing app, lets take a break and draw!


Buat Karakter Game dengan HTML5 dan JavaScript - Bagian 1


Dalam Bagian 1 dari seri ini kita akan merancang karakter permainan dari awal. Kami akan mulai dengan gambar di atas kertas dan dengan bantuan JavaScript kita akan membuat bernapas, berkedip karakter pada kanvas HTML5. Mudah-mudahan pada akhir Bagian 1 Anda akan memiliki alat dan inspirasi untuk menciptakan karakter Anda sendiri. Pertama kita mulai dengan ide.


Ide untuk Pixels
Untuk karakter ini saya memilih untuk menariknya pada kertas pertama. Aku ingin dia menjadi sangat sederhana dengan beberapa rincian (misalnya hidung, mulut). Meskipun saya tidak berhemat pada ukuran kepala.
Character drawing
Langkah berikutnya adalah untuk mendapatkan ide kami untuk piksel. Dalam hal ini karena saya punya gambar, saya dipindai dalam dan diuraikan gambar dalam Adobe Illustrator. Saya memilih berbagai thickeness garis besar, lebih tebal sekitar tepi bagian tubuh dan lebih tipis untuk rincian. Juga entah bagaimana selama proses kepalanya mendapat lebih besar.
Character outline
Selanjutnya kita warna dalam garis besar. Menjaga sederhana desain saya memilih satu warna solid per bagian tubuh, dengan warna tambahan sebagai warna sorot untuk detail tambah.
Character in color

Kami menciptakan karakter dinamis sehingga kita menciptakan karakter kita di bagian yang berbeda. Sebagai contoh kami tetap sederhana dan segmen karakter kita menjadi enam bagian:


  • kepala
  • rambut
  • batang tubuh
  • kaki
  • Lengan kiri
  • Lengan kanan

Setiap bagian akan disimpan sebagai gambar png terpisah. Kami akan menggambar bagian-bagian di atas satu sama lain sehingga kita simpan masing-masing dengan latar belakang transparan.
Character in pieces

Menggambar pada kanvas HTML5

Dengan desain karakter kita lengkap dan dalam bentuk enam foto, kami memulai proses menempatkan karakter kita di atas kanvas. Langkah pertama dari proses itu adalah untuk memuat gambar tersebut menggunakan JavaScript.

var images = {};

loadImage("leftArm");
loadImage("legs");
loadImage("torso");
loadImage("rightArm");
loadImage("head");
loadImage("hair");

function loadImage(name) {

  images[name] = new Image();
  images[name].onload = function() { 
      resourceLoaded();
  }
  images[name].src = "images/" + name + ".png";
}

Pertama kita membuat objek baru untuk menyimpan gambar kita disebut referensi gambar. Selanjutnya kita memuat setiap bagian karakter kita melalui fungsi LoadImage dengan parameter yang sesuai dengan nama bagian (misalnya leftArm, kaki, dll). Fungsi LoadImage membuat objek gambar baru menunjuk ke sebuah gambar dengan nama file dengan nama yang berpisah dengan ekstensi "png." Dan dalam "gambar" folder. Hal ini juga memberikan metode onload masing-masing gambar jadi ketika foto tersebut dimuat ke memori akan caled fungsi resourceLoaded.

Kami ingin tahu kapan semua gambar yang dimuat sehingga kami dapat mulai menggambar.

var totalResources = 6;
var numResourcesLoaded = 0;
var fps = 30;

function resourceLoaded() {

  numResourcesLoaded += 1;
  if(numResourcesLoaded === totalResources) {
    setInterval(redraw, 1000 / fps);
  }
}

Kami menciptakan beberapa variabel untuk melacak proses load gambar: totalResources dan numResourcesLoaded. Kelipatannya fungsi resourceLoaded jumlah gambar yang telah dimuat. Ketika semua gambar siap kita memulai timer menggunakan setInterval yang akan memanggil fungsi redraw 30 kali per detik.

Selama proses redraw kanvas akan dihapus dan semua bagian akan digambar ulang. Urutan proses yang penting. Pertama-tama kita menggambar bagian-bagian paling jauh seperti lengan kiri yang akan dibahas oleh kaki karakter kita dan batang tubuh.
Character in layers
Kita perlu akses ke konteks kanvas HTML5 bahwa kita akan menarik. Untuk informasi lebih lanjut tentang cara mengakses konteks kanvas '(dan solusi untuk IE) Mengacu pada Contoh kanvas HTML5.
var context = document.getElementById('canvas').getContext("2d");
Lapis demi lapis, masing-masing gambar bagian tubuh diposisikan dan kemudian digambarkan dalam sebuah kanvas HTML5.
var charX = 245;
var charY = 185;
  
function redraw() {

  var x = charX;
  var y = charY;

  canvas.width = canvas.width; // clears the canvas 
                      
  context.drawImage(images["leftArm"], x + 40, y - 42);
  context.drawImage(images["legs"], x, y);
  context.drawImage(images["torso"], x, y - 50);
  context.drawImage(images["rightArm"], x - 15, y - 42);
  context.drawImage(images["head"], x - 10, y - 125);
  context.drawImage(images["hair"], x - 37, y - 138);
}
Sebelum menggambar apa pun yang kita pertama membersihkan kanvas menggunakan penempatan aneh canvas.width = canvas.width. Kemudian kita menarik setiap gambar dengan menggunakan metode konteks drawImage menetapkan tiga parameter: referensi gambar, posisi x, posisi y nya. Posisi gambar relatif terhadap sudut kiri atas kanvas.

Berikut adalah apa yang tampak seperti kanvas sejauh ini:
(GAMBAR : Manusia Matanya Hilang)
Ada sesuatu yang hilang ...

Mata
Untuk menambahkan mata kita akan menarik dua oval. Kita bisa menambahkan mata ke mata dengan gambar kepala, tapi kami ingin mereka menjadi dinamis untuk mengaktifkan perilaku pertama kami: berkedip.
Character eyes closeup
Kami memanggil fungsi drawEllipse untuk setiap mata di akhir fungsi redraw. Kami ingin mereka di atas semua gambar bagian tubuh lainnya.
function redraw() {
  ...
  drawEllipse(x + 47, y - 68, 8, 14); // Left Eye
  drawEllipse(x + 58, y - 68, 8, 14); // Right Eye
}
DrawEllipse mengambil empat parameter menentukan posisi dan dimensi elips. Untuk informasi lebih lanjut tentang fungsi drawEllipse melihat singkat: Cara menggambar elips pada kanvas HTML5.
function drawEllipse(centerX, centerY, width, height) {
 
  context.beginPath();
  
  context.moveTo(centerX, centerY - height/2);
  
  context.bezierCurveTo(
    centerX + width/2, centerY - height/2,
    centerX + width/2, centerY + height/2,
    centerX, centerY + height/2);

  context.bezierCurveTo(
    centerX - width/2, centerY + height/2,
    centerX - width/2, centerY - height/2,
    centerX, centerY - height/2);
 
  context.fillStyle = "black";
  context.fill();
  context.closePath(); 
}
Karakter kita cocok dengan versi asli digital kami dikurangi bayangan.

Bayangan
Kami menciptakan bayangan dengan satu oval di kaki kami karakter.
Character shadow closeup
function redraw() {
  ...
  canvas.width = canvas.width; // clears the canvas 
  
  drawEllipse(x + 40, y + 29, 160, 6);
  ...
}
Kami ingin bayangan di balik semua sp lain lapisan gambar elips diambil pada awal fungsi redraw.

Sekarang kita miliki di kanvas HTML5 apa yang kita miliki dengan program gambar. Ingat, kanvas HTML5 dinamis. Mari kita memanfaatkan itu.

Bernafas
var breathInc = 0.1;
var breathDir = 1;
var breathAmt = 0;
var breathMax = 2;
var breathInterval = setInterval(updateBreath, 1000 / fps);
function updateBreath() { 
                        
  if (breathDir === 1) {  // breath in
    breathAmt -= breathInc;
    if (breathAmt < -breathMax) {
      breathDir = -1;
    }
  } else {  // breath out
    breathAmt += breathInc;
    if(breathAmt > breathMax) {
      breathDir = 1;
    }
  }
}
Fungsi updateBreath meningkatkan atau menurunkan jumlah napas. Setelah nafas mencapai maksimum itu berubah arah napas. Napas, keluar napas.

Tujuan dari proses ini adalah untuk memperbarui breathAmt variabel yang akan kita gunakan untuk mewakili pernapasan konstan karakter kita dalam bentuk kenaikan halus dan jatuhnya kepala dan lengan.

Untuk nafas kehidupan ke dalam tumpukan statis kita gambar, kita beralih ke redraw fungsi kita. Kami bantuan atau breathAmt variabel kita mengubah posisi vertikal gambar bagian tubuh tertentu.
function redraw() {
                        
  canvas.width = canvas.width; // clears the canvas 

  drawEllipse(x + 40, y + 29, 160 - breathAmt, 6); // Shadow

  context.drawImage(images["leftArm"], x + 40, y - 42 - breathAmt);
  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);
  context.drawImage(images["rightArm"], x - 15, y - 42 - breathAmt);
 
  drawEllipse(x + 47, y - 68 - breathAmt, 8, 14); // Left Eye
  drawEllipse(x + 58, y - 68 - breathAmt, 8, 14); // Right Eye
}
Kita kurangi lokasi vertikal dengan nilai breathAmt variabel untuk semua bagian kita ingin berosilasi. Bayangan itu akan mencerminkan gerak vertikal terhadap perubahan lebar.

Berkedip
Waktunya telah tiba untuk perilaku kita yang pertama dari seri ini. Setelah jangka waktu tertentu kita akan membuat berkedip karakter kita.
var maxEyeHeight = 14;
var curEyeHeight = maxEyeHeight;
var eyeOpenTime = 0;
var timeBtwBlinks = 4000;
var blinkUpdateTime = 200;                    
var blinkTimer = setInterval(updateBlink, blinkUpdateTime);
Kami menambahkan beberapa GLOBALS:

maxEyeHeight: Mata tinggi ketika mata karakter kita terbuka lebar.
curEyeHeight: tinggi mata saat ini sementara berkedip.
eyeOpenTime: Milidetik sejak berkedip lalu.
timeBtwBlinks: Milidetik antara berkedip.
blinkUpdateTime: Milidetik sebelum memperbarui status berkedip.
blinkTimer: Panggilan fungsi updateBlink setiap milidetik blinkUpdateTime.
Ubah yang redraw fungsi sehingga ketinggian sesuai dengan curEyeHeight variabel baru.
function redraw() {
  ...
  drawEllipse(x + 47, y - 68 - breathAmt, 8, curEyeHeight);
  drawEllipse(x + 58, y - 68 - breathAmt, 8, curEyeHeight);
}
Setiap beberapa saat kami memeriksa untuk melihat apakah waktu untuk berkedip.
function updateBlink() { 
                        
  eyeOpenTime += blinkUpdateTime;
 
  if(eyeOpenTime >= timeBtwBlinks){
    blink();
  }
}

function blink() {

  curEyeHeight -= 1;
  if (curEyeHeight <= 0) {
    eyeOpenTime = 0;
    curEyeHeight = maxEyeHeight;
  } else {
    setTimeout(blink, 10);
  }
}
Bila fungsi updateBlink disebut saat mata terbuka diperbarui dengan meningkatkan eyeOpenTime variabel. Jika waktu mata terbuka lebih besar dari nilai timeBtwBlinks kita mulai berkedip dengan memanggil fungsi berkedip. Fungsi berkedip akan pengurangan tinggi mata saat sampai mencapai nol. Ketika mata tertutup kita mengatur tinggi mata untuk maksimum dan me-reset waktu mata terbuka.

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

Buat Karakter Anda
Sekarang cobalah menciptakan karakter Anda sendiri. Download source code di bawah ini dan mengedit gambar disediakan enam untuk membuat mereka sendiri. Sebagai contoh, saya tweak gambar hanya sedikit dan membuat karakter kita zombie:

Apa Selanjutnya

Dalam Bagian 2 dari seri akan memberikan karakter kita kemampuan untuk melompat.
Series Preview

Download Source Code
Download HTML5 Canvas Game Character (zip format): html5-canvas-drawing-app-1.zip

Related Articles

Sumber :


Bagaimana untuk membuat permainan HTML5 kanvas sederhana


Sejak merilis Onslaught! Arena, aku sudah banyak permintaan untuk tutorial yang sangat dasar tentang cara membuat permainan sederhana di kanvas. Setelah merenungkan untuk beberapa waktu cara terbaik untuk mendekati topik ini kompleks, saya memutuskan hanya untuk mengumpulkan permainan yang sangat sederhana saya bisa membayangkan dan berjalan melalui itu praktis baris demi baris.

Jadi ini dia! Mari kita melompat ke kanan dengan berjalan melalui game.js. Anda juga dapat bermain game di sini.

1. Buat kanvas


// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);


Hal pertama yang perlu kita lakukan adalah membuat elemen kanvas. Saya melakukan ini dalam JavaScript, bukan HTML untuk menunjukkan betapa mudah dicapai. Setelah kita memiliki elemen kita mendapatkan referensi ke konteksnya, mengatur dimensi dan menambahkan ke tubuh dokumen.

2. Sertakan gambar


// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
 bgReady = true;
};
bgImage.src = "images/background.png";


Permainan membutuhkan grafis! Jadi mari kita memuat beberapa gambar. Saya ingin melakukan ini sesederhana mungkin sehingga itu hanya sebuah Gambar bukannya dibungkus dalam Kelas bagus atau sesuatu. bgReady digunakan untuk membiarkan kanvas tahu kalau sudah aman untuk menarik itu, seperti mencoba untuk membuat sebelum itu dimuat akan melempar kesalahan DOM.

3. Permainan objek


// Game objects
var hero = {
 speed: 256, // movement in pixels per second
 x: 0,
 y: 0
};
var monster = {
 x: 0,
 y: 0
};
var monstersCaught = 0;


Sekarang kita mendefinisikan beberapa variabel kita harus menggunakan nanti. pahlawan mendapatkan setup dengan kecepatan yang adalah seberapa cepat itu akan bergerak dalam piksel per detik. rakasa tidak akan bergerak sehingga hanya memiliki koordinat. Terakhir, monstersCaught menyimpan jumlah monster pemain telah tertangkap.

4. Pemain masukan


// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
 keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
 delete keysDown[e.keyCode];
}, false);


Sekarang untuk penanganan masukan. Ini mungkin adalah bagian pertama yang akan perjalanan sampai pengembang yang berasal dari latar belakang pengembangan web. Yang penting untuk diingat adalah bahwa kita tidak selalu ingin untuk bereaksi terhadap suatu peristiwa masukan yang tepat ketika itu terjadi. Dalam tumpukan web, mungkin tepat untuk mulai menghidupkan atau meminta data yang tepat ketika pengguna memulai masukan. Tapi dalam aliran ini, kami ingin permainan logika kita untuk hidup hanya di tempat sekali untuk mempertahankan kontrol ketat atas kapan dan jika sesuatu terjadi. Untuk itu kami hanya ingin menyimpan input pengguna untuk nanti.

Untuk mencapai hal ini kita hanya memiliki keysDown variabel yang menyimpan keyCode setiap acara. Jika kode kunci adalah dalam objek, pengguna saat ini menekan tombol itu. Wikipedia!

5. Baru permainan


// Reset the game when the player catches a monster
var reset = function () {
 hero.x = canvas.width / 2;
 hero.y = canvas.height / 2;

 // Throw the monster somewhere on the screen randomly
 monster.x = 32 + (Math.random() * (canvas.width - 64));
 monster.y = 32 + (Math.random() * (canvas.height - 64));
};


Fungsi reset dipanggil untuk memulai permainan baru, atau tingkat, atau apapun yang Anda ingin menyebutnya. Ini menempatkan pahlawan (pemain) di tengah layar dan rakasa di suatu tempat secara acak.

6. Memperbarui objek

Ini adalah fungsi update dan disebut setiap pelaksanaan selang tunggal. Hal pertama yang dilakukannya adalah memeriksa atas, bawah, kiri dan tombol panah kanan untuk melihat apakah pengguna telah menekan mereka. Jika demikian, pahlawan tersebut akan dipindahkan ke arah yang sesuai.

Apa yang mungkin tampak aneh adalah argumen pengubah masuk ke update. Anda akan melihat bagaimana hal ini direferensikan dalam fungsi utama, tapi biarkan saya menjelaskan di sini. pengubah adalah angka berdasarkan waktu berdasarkan 1. Jika tepat satu detik telah berlalu, nilai akan menjadi 1 dan kecepatan pahlawan akan dikalikan dengan 1, berarti dia akan pindah 256 piksel dalam kedua itu. Jika setengah detik telah berlalu, nilai akan 0,5 dan pahlawan akan pindah setengah dari kecepatan dalam jumlah waktu. Dan sebagainya. Fungsi ini dipanggil begitu cepat sehingga nilai pengubah biasanya akan sangat rendah, tetapi menggunakan pola ini akan memastikan bahwa pahlawan akan bergerak dengan kecepatan yang sama tidak peduli seberapa cepat (atau lambat) script berjalan.

Sekarang kita sudah pindah pahlawan sesuai input pemain, kita dapat memeriksa untuk melihat apa yang terjadi dengan gerakan itu. Jika ada tabrakan dengan pahlawan dan rakasa, itu saja! Itu cukup banyak permainan. Kami penghitungan nilai (+1 untuk monstersCaught) dan me-reset permainan.

7. Render objek

Game lebih menyenangkan bila Anda bisa melihat aksi turun, jadi mari kita menarik segala sesuatu ke layar. Pertama kita mengambil gambar latar belakang dan menariknya ke kanvas. Ulangi untuk pahlawan dan rakasa. Perhatikan bahwa perintah ini penting, karena setiap gambar ditarik ke permukaan akan ditarik selama piksel di bawahnya.

Selanjutnya kita mengubah beberapa sifat pada konteks yang berhubungan dengan cara menggambar font, dan kami membuat panggilan ke fillText untuk menampilkan skor pemain. Seperti kita tidak memiliki animasi yang rumit atau gerakan, kita sudah selesai menggambar.

8. Loop utama permainan

Loop permainan utama adalah apa yang mengontrol aliran permainan. Pertama kita ingin mendapatkan timestamp saat ini sehingga kita dapat menghitung delta (berapa banyak milidetik berlalu sejak interval terakhir). Kami mendapatkan pengubah untuk mengirim memperbarui dengan membaginya dengan 1000 (jumlah milidetik dalam satu detik). Lalu kita sebut membuat dan merekam timestamp.

Lihat juga Onslaught itu! Arena Studi Kasus untuk lebih lanjut tentang loop permainan.

9. Mulai game!

Hampir sana, ini adalah potongan kode terakhir! Pertama kita sebut mengatur ulang untuk memulai permainan baru / tingkat. (Ingatlah bahwa ini pusat pahlawan dan tempat rakasa secara acak untuk pemain untuk menemukan.) Kemudian kita benih timestemp kami (dengan variabel itu) dan mulai interval.

Congraulations! Sekarang Anda (mudah-mudahan!) memahami dasar-dasar dasar pengembangan game dengan menggunakan elemen kanvas dalam JavaScript. Coba saja sendiri! Main game atau garpu kode pada GitHub dan memulai hacking.

Punya masukan?

Apa yang anda pikirkan dari tutorial ini? Apakah itu berguna? Terlalu lambat, terlalu cepat, terlalu teknis, tidak teknis cukup? Tolong beritahu saya dan saya akan mencoba untuk meningkatkan tutorial berikutnya! Pastikan untuk mengikuti kami di Twitter tahu benar saat tutorial berikutnya tersedia.

Artikel terkait

Poles layar Tingkat Pilih: proses dan pelaksanaan
Lostcast Episode 18: Sponsor Sorceror ini
Lostcast Episode 17: Vincent Priceless

Sumber :