A zamanin yau, mutane da yawa suna son su koya yadda ake gina ƙananan wasanni (games) a wayar su ta Android, ba tare da amfani da kwamfuta ba. Abin farin ciki shi ne, yanzu zaka iya yin hakan cikin sauƙi ta amfani da JavaScript — ɗaya daga cikin shahararrun harsunan programming a duniya. JavaScript ba wai kawai ana amfani da shi wajen gina websites ba, har ma yana iya taimaka maka wajen ƙirƙirar karamin game mai motsi kai tsaye daga wayarka. A wannan cikakken bayani, zaka koyi yadda ake amfani da JavaScript don gina karamin game a Android, daga mataki na farko har zuwa lokacin da zaka iya gwada shi da hannu.
Menene JavaScript Kuma Me Yasa Ake Amfani da Shi Wajen Game Development?
JavaScript harshe ne da ake amfani da shi wajen sa websites su zama masu motsi da rayuwa. Idan ka taba ganin shafin da abubuwa ke motsi kamar button, animation, ko game mai sauƙi, to JavaScript ne ke bayan sa.
Amma abin da mutane da yawa ba su sani ba shine, JavaScript zai iya yin game mai sauƙi kamar su:
-
Wasan clicking game
-
Wasan jumping game (kamar Flappy Bird)
-
Wasan reaction time
-
Wasan matching game
Kuma zaka iya yin wannan duka daga wayar Android ɗinka ta amfani da app ɗaya kawai.
Mataki Na Farko: Shiryawa Don Gina Game
Kafin ka fara rubuta lambar (code), ka tabbata kana da kayan aiki masu zuwa:
-
A browser (Google Chrome ko Kiwi Browser)
-
A text editor kamar Acode, Spck Editor, ko Dcoder (ana samunsu a Play Store).
-
Ilmi kadan na HTML da CSS, saboda zaka hada JavaScript da su don game ɗinka ya yi kyau.
Bayan ka sauke ɗaya daga cikin waɗannan apps, zaka iya fara rubuta game ɗinka kai tsaye daga wayarka.
Mataki Na Biyu: Gina Asalin Tsarin Game
Game ɗin JavaScript yawanci yana da sassa uku:
-
HTML – don tsara abubuwan da za a gani.
-
CSS – don kayatar da abin da aka tsara.
-
JavaScript – don sa abubuwan su motsa ko su amsa aiki.
Ga karamin misali na HTML da zaka iya rubutawa:
<!DOCTYPE html>
<html>
<head>
<title>My First Game</title>
<style>
#player {
width: 50px;
height: 50px;
background: red;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="player"></div>
<script src="game.js"></script>
</body>
</html>
Wannan yana ƙirƙirar ƙaramin jan murabba’i (player) wanda za ka iya motsa daga baya da JavaScript.
Mataki Na Uku: Rubuta JavaScript Don Sa Abubuwa Su Motsa
A cikin fayil ɗin game.js, zaka iya rubuta lambar kamar haka:
let player = document.getElementById("player");
let position = 100;document.addEventListener(“keydown”, function(event) {if (event.key === “ArrowRight”) {
position += 10;
player.style.left = position + “px”;
}
if (event.key === “ArrowLeft”) {
position -= 10;
player.style.left = position + “px”;
}
});
Wannan code yana ba da damar ka motsa player ɗinka daga hagu zuwa dama ta amfani da maballan kibiyoyi. A wayar Android, zaka iya haɗa wannan da touch event domin motsa shi da yatsanka.
Mataki Na Hudu: Ƙara Animation da Collision Detection
Don ka sa wasan ya zama mai daɗi, zaka iya ƙara abubuwa kamar abokan hamayya (obstacles) da ƙarfin bugawa (collision detection). Misali:
function checkCollision() {
let enemy = document.getElementById("enemy");
let playerRect = player.getBoundingClientRect();
let enemyRect = enemy.getBoundingClientRect();if (playerRect.x < enemyRect.x + enemyRect.width &&
playerRect.x + playerRect.width > enemyRect.x &&
playerRect.y < enemyRect.y + enemyRect.height &&
playerRect.height + playerRect.y > enemyRect.y
) {
alert(“Game Over!”);
}
}
Wannan yana duba idan player ya taɓa wani abu kamar enemy sannan yana nuna Game Over idan hakan ta faru.
Mataki Na Biyar: Gwada Game ɗinka Kai Tsaye
Bayan ka gama rubutawa, ka buɗe fayil ɗin HTML ɗinka a browser ɗin da ke wayarka.
Zaka ga player ɗin yana motsawa idan ka taɓa ko ka matsa kibiya. Wannan shine mataki na farko na zama game developer mai amfani da JavaScript.
Mataki Na Shida: Ƙara Sauti, Points, da Background
Don ka sa wasan ya zama mai kayatarwa, zaka iya ƙara abubuwa kamar:
-
Background Image: don ba da yanayin wasa.
-
Sound Effects: amfani da
Audio()object don kunna sautuka. -
Score System: ƙirƙiri ƙidayar maki don ƙara nishaɗi.
Misali:
let score = 0;
function addPoint() {
score += 1;
document.getElementById("score").innerText = "Score: " + score;
}
Mataki Na Bakwai: Rarraba Game ɗinka
Idan kana so ka nuna wa mutane game ɗinka, zaka iya:
-
Loda shi a GitHub Pages.
-
Yin amfani da Netlify ko Vercel don free hosting.
-
Ko kuma ka mayar da shi Android App ta hanyar Cordova ko WebView App Maker daga Play Store.
Kammalawa
JavaScript hanya ce mai sauƙi kuma mai ƙarfi da zaka iya amfani da ita wajen ƙirƙirar ƙananan wasanni daga wayarka ta Android. Ba sai kana da kwamfuta ba, kawai da wayarka da ɗan haƙuri zaka iya gina wasan ka na farko. Ka fara da ƙaramin project, ka ci gaba da ƙara abubuwa a hankali, har sai ka koyi yadda ake yin full game. Idan kana da niyya da ƙoƙari, zaka iya zama game developer daga wayarka kaɗai.