Anda bisa melakukannya sejuta cara. Namun Anda merasa paling nyaman dan teknisi Anda merasa paling percaya diri.
Jika Anda mencari inspirasi atau contoh kode, inilah salah satu cara yang saya lakukan. Saya memiliki fungsi yang berulang kali menggambar menu sampai tombol ditekan. Saat tombol ditekan, game memuat dan pendengar acara klik menu lama dihapus dan pendengar acara klik permainan baru ditambahkan. Saya juga mengakhiri loop draw lama dari menu dan memulai loop draw game baru. Berikut beberapa cuplikan terpilih untuk memberi Anda gagasan tentang bagaimana hal ini dilakukan:
Game.prototype.loadMenu = function() {
var game = this;
var can = this.canvas;
// now we can use the mouse for the menu
can.addEventListener('click', game.menuClickEvent, false);
can.addEventListener('touchstart', game.menuClickEvent, false);
// draw menu
this.loop = setInterval(function() { game.drawMenu() }, 30);
};
Game.prototype.drawMenu = function() {
// ... draw the menu
}
Game.prototype.loadLevel = function(levelstring) {
// unload menu
var can = this.canvas;
var game = this;
can.removeEventListener('click', game.menuClickEvent, false);
can.removeEventListener('touchstart', game.menuClickEvent, false);
if (this.loop) clearInterval(this.loop);
// ... other level init stuff
// now we can press keys for the game
//can.addEventListener('click', game.gameClickEvent, false);
can.addEventListener('touchstart', game.gameClickEvent, false);
can.addEventListener('keydown', game.gameKeyDownEvent, false);
this.loop = setInterval(function() { game.tick() }, 30);
}
// called from tick()
Game.prototype.draw = function(advanceFrame) {
// ...
}
Dengan cara ini saya dapat memisahkan gambar permainan dan acara permainan dari menggambar menu dan acara menu. Ini juga memberi saya keleluasaan untuk menggunakan elemen permainan / animasi di menu saya jika saya ingin membuatnya terlihat sangat cantik.