Javascript melaksanakan kemahiran program_javascript permainan mini 'Jangan pijak blok putih'.-tutorial js-php.cn

Baru-baru ini, seorang rakan meminta saya menggunakan JS untuk membantu saya meniru program permainan kecil yang dipanggil Don't Step on White Blocks Namun, kod sumber yang dia berikan kepada saya menyusahkan dan tiada ulasan, menjadikannya sukar untuk difahami. Jadi saya membuatnya sendiri berdasarkan idea saya sendiri Permainan kecil ini menggunakan JS untuk mengendalikan DOM dan tatasusunan.

Idea program: Seperti yang ditunjukkan dalam rajah: Tetapkan CSS kawasan permainan kepada kedudukan relatif dan persembunyian limpahan terdapat 24 petak disusun pada dua "papan permainan", satu petak hitam dijana secara rawak dalam setiap baris, dan "papan permainan" menghadap Tatal ke bawah dan paparkan secara bergilir-gilir, simpan kedudukan blok hitam setiap panel operasi ke dalam tatasusunan, dan keluarkan tatasusunan untuk perbandingan setiap kali anda mengklik (saya rasa kemuncaknya ada di sini...).

Berikut ialah alamat GitHub permainan Anda boleh pergi ke sana dan klik butang Muat Turun ZIP di hujung kanan menu tengah untuk memuat turunnya ke desktop anda. Ia mengandungi HTML dan JS, tiada pelayan diperlukan.

Alamat muat turun

Berikut ialah pelaksanaan khusus, dengan ulasan pada bahagian penting.

Bahagian HTML:

<!DOCTYPE html>

<html>

<head><title>别踩白块</title></head>

<body>

<div id="gameZone"><div id="boardb" style="position: absolute;top: 0px;"></div></div>//初始化一个boardb,使ab同时存在

</body>

</html>

Salin selepas log masuk

Bahagian CSS:

Salin kod Kod adalah seperti berikut:

*{margin: 0px;padding: 0px;box- saiz: sempadan -kotak;} //Tetapan semula mudah, dan gunakan saiz kotak untuk menetapkan saiz kotak dan mengira jidar, yang sesuai untuk mengira kedudukan kotak kecil nanti

#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position: relative;overflow: hidden;} //Kawasan permainan, dua piksel lagi untuk mengalih keluar sempadan Cukup ruang daripada 300*600

.persegi{lebar: 75px;tinggi: 100px;apung: kiri;sempadan: 1px hitam pepejal;}

.squareBlack{width: 75px;height: 100px;border: 1px solid black;float: left;background: black;}//Setiap petak kecil ialah 75*100, dan tetapkan warna latar belakang petak kecil hitam.

Bahagian JS:

Berikut ialah pengenalan kepada fungsi:

Pemulaan pembolehubah global

var loc=600;//黑块落地失败判定

var count=0;//初始化击中黑块总数

var locArr=[];//初始化游戏板上黑块位置的

var order=(function(){

　　　　var ord="A";

　　　　return function(){

　　　　if(ord=='boarda')ord='boardb';

　　　　else ord='boarda';

　　　　return ord;

}

})()

Salin selepas log masuk

//Gunakan fungsi penutupan untuk membuat ID papan permainan yang dibuat setiap kali boarda dan boardb Malah, anda juga boleh menggunakan pembolehubah global, tetapi ia lebih formal. . .

Fungsi untuk menentukan keputusan setiap klik

function judge(){

　　　　var num=this.id.substr(3)//获取元素的ID号

　　　　if(num!=locArr.pop()){ //与位置数组pop出的对比

　　　　　　　　clearTimeout(timer);

　　　　　　　　alert("你的得分为："+count+"分！");

　　　　　　　　return; //失败清除定时器，结算分数。

　　　　}else{

　　　　　　　　loc+=100; 

　　　　　　　　this.style.background="silver";

　　　　　　　　count+=1;//成功将落地标志加方格的高度，将方格背景色改变一下，击中数+1

　　　　}

　　　　if(count!=0&&count%15==0){

　　　　　　　　clearTimeout(timer);

　　　　　　　　newtimer=50-count/15*5;

　　　　　　　　timer=setInterval('fall()',newtimer);

　　　　}//每击中15个后将速度加快一点，这个式子可自行定义。

}

Salin selepas log masuk

Jana nombor rawak untuk kedudukan kotak hitam kecil dalam kotak besar Fungsi ini dipanggil setiap kali papan permainan dicipta, dan kedudukan kotak hitam kecil ditakrifkan berdasarkan nombor yang dijana

function generateRand(){

　　　　var numArr=[];

　　　　for(var j=0;j<6;j++){

　　　　　　　　var num=Math.floor(Math.random()*4)+j*4;

　　　　　　　　numArr.push(num);

　　　　}

　　　　return numArr;

}

Salin selepas log masuk

Setiap panggilan menjana papan permainan untuk ditatal ke bawah di atas kawasan permainan dan MENOLAK nombor di bahagian hitam ke locArr

function drawBoard(){

　　　　var temArr=generateRand();//这里应用一个临时的位置数组，为了防止两块游戏板之间的位置冲突。

　　　　locArr=temArr.concat(locArr);//将临时数组相连到全局位置数组中

　　　　var board=document.createElement('div');

　　　　board.setAttribute('id',order());

　　　　board.style.position="absolute";

　　　　board.style.top='-600px';

　　　　for(var i=0;i<24;i++){

　　　　　　　　var ele=document.createElement('div');

　　　　　　　　ele.setAttribute('id',"ele"+i);

　　　　　　　　if(temArr.indexOf(i)>-1){  //判断当前创建的小方块的ID序列是否属于临时位置数组

　　　　　　　　　　　　ele.setAttribute('class','squareBlack')

　　　　　　　　}else{

　　　　　　　　　　　　ele.setAttribute('class','square');

　　　　　　　　}

　　　　　　　　ele.addEventListener('click',judge,false); //给每一个小方格添加点击判定函数judge

　　　　　　　　board.appendChild(ele);

　　　　}

　　　　var gameZone=document.getElementById('gameZone');

　　　　gameZone.appendChild(board);

}

Salin selepas log masuk

Cari dua papan permainan yang wujud dalam skrip dan buat mereka tatal ke bawah

function fall(){

　　　　gameZone=document.getElementById('gameZone');

　　　　var boarda=document.getElementById('boarda');//因为ab两个游戏板全局一直存在，所以不需要定义找不到时的逻辑

　　　　var anowtop=parseInt(boarda.style.top);//因为获取到的top位置是xxxpx类型，所以用一个parseInt()将其转换为整数便于处理。

　　　　if(anowtop==595){ //这里数目为595而不是600是因为在这一帧删除后，下一帧正好600px，刚好使两块游戏板衔接完好。

　　　　　　　　gameZone.removeChild(boarda);

　　　　　　　　drawBoard();//删除游戏区域的游戏板，并在最上方新生成一个。

　　　　}

　　　　anowtop+=5;

　　　　boarda.style.top=anowtop+"px";

　　　　var boardb=document.getElementById('boardb');

　　　　var bnowtop=parseInt(boardb.style.top);

　　　　if(bnowtop==595){

　　　　　　　　gameZone.removeChild(boardb);

　　　　　　　　drawBoard();

　　　　}

　　　　bnowtop+=5;

　　　　boardb.style.top=bnowtop+"px";

　　　　loc-=5;

　　　　if(loc==0){

　　　　　　　　clearTimeout(timer);

　　　　　　　　alert("你的得分为："+count+"分！");

　　　　　　　　return;

　　　　} //每一帧将落地判定减5，当落地判定为0时表示落地，结算分数。

}

Salin selepas log masuk

Tulis panggilan utama dalam fungsi window.onload, supaya fungsi itu boleh dipanggil selepas kawasan permainan halaman dimuatkan.

window.onload=function(){

　　　　drawBoard();

　　　　fall();

　　　　var timer=setInterval('fall()',50);

}

Salin selepas log masuk

Pelanjutan Permainan:

Tambah UI halaman: Oleh kerana HTML pada permulaan adalah sangat mudah, UI juga mudah untuk diubah suai Tetapkan butang dan klik untuk mencetuskan fungsi mula.

Tukar kesukaran permainan: Ubah suai nilai setInterval, anda juga boleh mengubah suai bilangan selang dalam fungsi hakim, atau mengoptimumkan ekspresi pecutan jatuh.

Tambah skor, kedudukan, dsb.: Gunakan ajax untuk menyambung ke pelayan, tulis keputusan pada pangkalan data selepas permainan tamat dan rujuk kedudukan dalam data.

Tukar kepada mod arked: alih keluar masa dan ubah suai fungsi hakim supaya ia berkurangan dengan segi empat sama kecil setiap kali anda mengklik pada papan permainan. Tetapkan jumlah bilangan, masa mula dan masa tamat.