Récemment, un ami m'a demandé d'utiliser JS pour m'aider à imiter un petit programme de jeu appelé Don't Step on White Blocks. Cependant, le code source qu'il m'a donné était encombrant et ne comportait aucun commentaire, ce qui le rendait difficile à comprendre. Je l'ai donc réalisé moi-même en me basant sur mes propres idées. Ce petit jeu utilise principalement JS pour faire fonctionner le DOM et les tableaux.
Idée de programme : Comme le montre la figure : Réglez le CSS de la zone de jeu sur positionnement relatif et masquage du débordement ; il y a 24 carrés disposés sur les deux « plateaux de jeu », un carré noir est généré aléatoirement dans chaque rangée, et les faces du "plateau de jeu" font défiler vers le bas et s'affichent alternativement, stockent la position du bloc noir de chaque panneau de commande dans un tableau et sortent le tableau pour comparaison à chaque fois que vous cliquez (je pense que le point culminant est ici...).
Voici l'adresse GitHub du jeu. Vous pouvez y aller et cliquer sur le bouton Télécharger ZIP à l'extrême droite du menu du milieu pour le télécharger sur votre bureau. Il contient du HTML et du JS, aucun serveur requis.
Ce qui suit est la mise en œuvre spécifique, avec des commentaires sur les éléments clés.
Partie 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>
Partie CSS :
#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position: relative;overflow: Hidden;} //Zone de jeu, deux pixels supplémentaires doivent supprimer la bordure. de 300*600
.square{largeur : 75px;hauteur : 100px;float : gauche;bordure : 1px noir uni;}
.squareBlack{width: 75px;height: 100px;border: 1px solid black;float: left;background: black;}//Chaque petit carré mesure 75*100 et définissez la couleur d'arrière-plan du petit carré noir.
Partie JS :
Voici une introduction aux fonctions :
Initialisation des variables globales
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;
}
})()
//Utilisez la fonction de fermeture pour faire les identifiants des plateaux de jeu créés à chaque fois boarda et boardb. En fait, vous pouvez aussi utiliser une variable globale, mais c'est un peu plus formel. . .
Fonction pour déterminer le résultat de chaque clic
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个后将速度加快一点，这个式子可自行定义。
}
Générer un nombre aléatoire pour la position de la petite boîte noire dans la grande boîte. Cette fonction est appelée à chaque création du plateau de jeu, et la position de la petite boîte noire est définie en fonction du nombre généré
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;
}
Chaque appel génère un plateau de jeu qui défile au-dessus de la zone de jeu et POUSSE les chiffres dans la partie noire dans 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);
}
Retrouvez les deux plateaux de jeu qui existent dans le script et faites-les défiler vers le bas
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时表示落地，结算分数。
}
Écrivez l'appel principal dans la fonction window.onload, afin que la fonction puisse être appelée après le chargement de la zone de jeu de la page.
window.onload=function(){
drawBoard();
fall();
var timer=setInterval('fall()',50);
}
Extensions de jeu :
Ajouter une interface utilisateur de page : parce que le code HTML au début est très simple, l'interface utilisateur est également facile à modifier. Définissez le bouton et cliquez pour déclencher la fonction de démarrage.
Changer la difficulté du jeu : Modifiez la valeur de setInterval, vous pouvez également modifier le nombre d'intervalles dans la fonction juge, ou optimiser l'expression de l'accélération descendante.
Ajouter des scores, des classements, etc. : utilisez ajax pour vous connecter au serveur, écrivez les résultats dans la base de données une fois le jeu terminé et référencez les classements dans les données.
Passer en mode arcade : supprimez le timing et modifiez la fonction juge pour qu'elle baisse d'un petit carré à chaque fois que vous cliquez sur le plateau de jeu. Définissez le nombre total, le timing de début et le timing de fin.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
