Kürzlich bat mich ein Freund, JS zu verwenden, um mir bei der Nachahmung eines kleinen Spielprogramms namens Don't Step on White Blocks zu helfen. Der Quellcode, den er mir gab, war jedoch umständlich und enthielt keine Kommentare, was das Verständnis erschwerte. Also habe ich es selbst gemacht, basierend auf meinen eigenen Ideen. Dieses kleine Spiel verwendet hauptsächlich JS, um DOM und Arrays zu betreiben.
Programmidee: Wie in der Abbildung gezeigt: Stellen Sie das CSS des Spielbereichs auf relative Positionierung und Überlaufausblendung ein. Auf den beiden „Spielbrettern“ sind 24 Quadrate angeordnet. In jeder Zeile wird zufällig ein schwarzes Quadrat generiert Die „Spielbrett“-Gesichter scrollen nach unten und zeigen abwechselnd an, speichern die schwarzen Blockpositionen jedes Bedienfelds in einem Array und blenden das Array bei jedem Klicken zum Vergleich aus (ich denke, das Highlight ist hier ...).
Hier ist die GitHub-Adresse des Spiels. Klicken Sie dort ganz rechts im mittleren Menü auf die Schaltfläche „ZIP herunterladen“, um es auf Ihren Desktop herunterzuladen. Es ist kein Server erforderlich.
Adresse herunterladen
Im Folgenden finden Sie die spezifische Implementierung mit Kommentaren zu den wichtigsten Teilen.
HTML-Teil:
<!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>
Nach dem Login kopieren
CSS-Teil:
*{margin: 0px;padding: 0px;box- sizing: border -box;} // Einfach zurücksetzen und Box-Sizing verwenden, um die Boxgröße festzulegen und den Rand zu berechnen, was für die spätere Berechnung der Position der kleinen Box praktisch ist
#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position: relative;overflow: versteckt;} //Spielbereich, zwei weitere Pixel sollen den Rand entfernen von 300*600
.square{width: 75px;height: 100px;float: left;border: 1px solid black;}
.squareBlack{width: 75px;height: 100px;border: 1px solid black;float: left;background: black;}//Jedes kleine Quadrat ist 75*100 groß und legt die Hintergrundfarbe des schwarzen kleinen Quadrats fest.
JS-Teil:
Hier eine Einführung in die Funktionen:
Globale Variableninitialisierung
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;
}
})()
Nach dem Login kopieren
//Verwenden Sie die Abschlussfunktion, um die IDs der Spielbretter jedes Mal zu erstellen, wenn Boarda und Boardb erstellt werden. Tatsächlich können Sie auch eine globale Variable verwenden, dies ist jedoch etwas formaler. . .
Funktion zur Bestimmung des Ergebnisses jedes Klicks
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个后将速度加快一点，这个式子可自行定义。
}
Nach dem Login kopieren
Generieren Sie eine Zufallszahl für die Position der kleinen Blackbox in der großen Box. Diese Funktion wird jedes Mal aufgerufen, wenn das Spielbrett erstellt wird, und die Position der kleinen Blackbox wird basierend auf der generierten Zahl definiert
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;
}
Nach dem Login kopieren
Jeder Aufruf generiert ein Spielbrett, das über den Spielbereich nach unten gescrollt wird, und SCHiebt die Zahlen im schwarzen Teil in 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);
}
Nach dem Login kopieren
Suchen Sie die beiden Spielbretter, die im Skript vorhanden sind, und lassen Sie sie nach unten scrollen
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时表示落地，结算分数。
}
Nach dem Login kopieren
Schreiben Sie den Hauptaufruf in die Funktion window.onload, damit die Funktion aufgerufen werden kann, nachdem der Spielbereich der Seite geladen wurde.
window.onload=function(){
drawBoard();
fall();
var timer=setInterval('fall()',50);
}
Nach dem Login kopieren
Spielerweiterungen:
Seiten-Benutzeroberfläche hinzufügen: Da der HTML-Code am Anfang sehr einfach ist, lässt sich die Benutzeroberfläche auch leicht ändern. Legen Sie die Schaltfläche fest und klicken Sie, um die Startfunktion auszulösen.
Ändern Sie den Schwierigkeitsgrad des Spiels: Ändern Sie den Wert von setInterval. Sie können auch die Anzahl der Intervalle in der Richterfunktion ändern oder den Ausdruck der fallenden Beschleunigung optimieren.
Ergebnisse, Ranglisten usw. hinzufügen: Verwenden Sie Ajax, um eine Verbindung zum Server herzustellen, die Ergebnisse nach dem Ende des Spiels in die Datenbank zu schreiben und in den Daten auf die Ranglisten zu verweisen.
Wechseln Sie in den Arcade-Modus: Entfernen Sie das Timing und ändern Sie die Richterfunktion so, dass sie jedes Mal, wenn Sie auf das Spielbrett klicken, um ein kleines Quadrat nach unten geht. Legen Sie die Gesamtzahl, den Startzeitpunkt und den Endzeitpunkt fest.
