Wie man mit JS ein Tic-Tac-Toe-Spiel erstellt
Dieses Mal zeige ich Ihnen, wie Sie mit JS ein Tic-Tac-Toe-Spiel erstellen. Was sind die Vorsichtsmaßnahmen, um mit JS ein Tic-Tac-Toe-Spiel zu erstellen? Fall, werfen wir einen Blick darauf.
Vor kurzem ging ein Kurs zu Ende und ich musste ein Tic-Tac-Toe-Spiel erstellen. Ich habe eines mit JavaScript geschrieben. Erstens sollte die Schnittstelle kein großes Problem darstellen. Schreiben Sie sie einfach in HTML. Vor allem der KI-Algorithmus, der in Mensch-Computer-Schachspielen zum Einsatz kommt, ist eine Überlegung wert. Nach Spielbeginn ist der Spieler zuerst dran. Aus Computersicht können mehrere Situationen analysiert und nach Wichtigkeit gewichtet werden.
Die Situation ist wie folgt:
1. Es gibt nur zwei Schachfiguren in derselben Reihe (Reihe, Spalte, Diagonale) und sie sind beide Ihre eigenen Solange man einen Schritt weiter geht, kann man gewinnen, dann hat die verbleibende Position das höchste Gewicht und die höchste Priorität. Gewichtung der ersten Ebene zuweisen.
2. Es gibt nur zwei Schachfiguren in derselben Reihe (Reihe, Spalte, Diagonale), und sie gehören beide dem Gegner (also dem Spieler), solange er einen Schritt weiter geht Erfolgreich, also „I“ Um zu blockieren, erhält die verbleibende Position ein sekundäres Gewicht.
3. Da sich der Computer rückwärts bewegt, müssen Sie, wenn Sie schlau sind, die Seite des Spielers ständig blockieren, wenn es nur eine Schachfigur in einer Reihe gibt und es die Schachfigur des Spielers ist. dann werden die Gewichtungen der anderen Positionen in der Zeile auf Stufe drei gesetzt.
4. Gewicht der Stufe 4: Es gibt nur Ihre eigenen (computerseitigen) Schachfiguren in einer Reihe.
5. Autorität der Stufe 5: Es gibt keine Schachfiguren in derselben Reihe, auch nicht die des Gegners und Ihre eigenen.
Bei der Implementierung können die Schachfiguren in jeder Position durch ein zweidimensionales Array full dargestellt werden, und das Gewicht jeder Position wird auch durch ein zweidimensionales Array val dargestellt. Nachdem der Spieler mit dem Spielen fertig ist, wird die Funktion der KI-Seite aufgerufen. Bevor sich die KI-Seite bewegt, aktualisiert sie zuerst das Gewicht und wählt dann die Position mit dem größten Gewicht aus (optimale Lösung). Ob es die KI oder der Spieler ist, sie müssen nach jedem Zug feststellen, ob es einen Sieg oder eine Niederlage gibt. Verwenden Sie die Funktion „alert()“, um die Ergebnisse auszugeben.
Um die Größe des Gewichts auszudrücken, ist festgelegt, dass 10000, 1000, 10, 5, 3 in der Reihenfolge von Stufe eins bis Stufe fünf addiert werden sollten
Hinweis: Da die Möglicherweise muss der Quellcode übermittelt werden. Ich habe ihn nicht getrennt, um CSS-Stile und JS-Dateien zu erstellen. Es ist jedoch am besten, sie separat zu schreiben, um sie standardisierter zu gestalten. Bei Mängeln sind Kritik und Korrekturen willkommen.
Der Quellcode lautet wie folgt:
<html>
<head>
<meta charset="utf-8">
<title>井字棋</title>
<script>
//定义全局变量
var full=[[0,0,0],[0,0,0],[0,0,0]];//0表示null，1表示我下的，2表示电脑下的
var val=[[1,1,1],[1,1,1],[1,1,1]];//表示每个位置的权值
function judge(){
//检测是否有人赢
//行
for(var i=0;i<3;i++){
if(full[i][0]==full[i][1]&&full[i][1]==full[i][2]&&full[i][0]!=0){
if(full[i][0]==1){
window.alert("you win!");
return true;
}
else {
window.alert("you lose");
return true;
}
}
}
//列
for(var i=0;i<3;i++){
if(full[0][i]==full[1][i]&&full[1][i]==full[2][i]&&full[0][i]!=0){
if(full[0][i]==1){
window.alert("you win!");
return true;
}
else {
window.alert("you lose");
return true;
}
}
}
//主对角线
if(full[0][0]==full[1][1]&&full[1][1]==full[2][2]&&full[0][0]!=0){
if(full[0][0]==1){
window.alert("you win!");
return true;
}
else {
window.alert("you lose");
return true;
}
}
if(full[0][2]==full[1][1]&&full[2][0]==full[1][1]&&full[0][2]!=0){
if(full[0][2]==1){
window.alert("you win!");
return true;
}
else {
window.alert("you lose");
return true;
}
}
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
if(full[i][j]==0)
return false;//说明还没结束
if(i==2&&j==2)
{window.alert("平局！");
return true;
}
}
}
return false;//无结果
}
function bn(i,j){
//如果已经下过，则无效
if(full[i][j]!=0){
return 0;
}else{
//没下过
full[i][j]=1;
num1=(i*3+j+1)+"";
document.getElementById(num1).value="X";
if(judge()==true){
return;
}
ai();//切换
}
}
//重置权值：
function resetValue(){
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
if(full[i][j]!=0)
val[i][j]=0;
else{
//看行和列：
//最高权值
if(((full[0][j]+full[1][j]+full[2][j])==4)&&(full[0][j]*full[1][j]*full[2][j])==0
&&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==-1)
val[i][j]=val[i][j]+10000;
if(((full[i][0]+full[i][1]+full[i][2])==4)&&(full[i][0]*full[i][1]*full[i][2])==0
&&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==-1)
val[i][j]=val[i][j]+10000;
//次级权值
if(((full[0][j]+full[1][j]+full[2][j])==2)&&(full[0][j]*full[1][j]*full[2][j])==0
&&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==0)
val[i][j]=val[i][j]+1000;
if(((full[i][0]+full[i][1]+full[i][2])==2)&&(full[i][0]*full[i][1]*full[i][2])==0
&&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==0)
val[i][j]=val[i][j]+1000;
//三级权值（一排只有一个X）
if(((full[0][j]+full[1][j]+full[2][j])==1)&&(full[0][j]*full[1][j]*full[2][j])==0
&&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==0)
val[i][j]=val[i][j]+10;
if(((full[i][0]+full[i][1]+full[i][2])==1)&&(full[i][0]*full[i][1]*full[i][2])==0
&&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==0)
val[i][j]=val[i][j]+10;
//四级权值（一排只有一个O）
if(((full[0][j]+full[1][j]+full[2][j])==2)&&(full[0][j]*full[1][j]*full[2][j])==0
&&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==1)
val[i][j]=val[i][j]+5;
if(((full[i][0]+full[i][1]+full[i][2])==2)&&(full[i][0]*full[i][1]*full[i][2])==0
&&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==1)
val[i][j]=val[i][j]+5;
//五级权限（该行没有X或O）
if(((full[0][j]+full[1][j]+full[2][j])==0)&&(full[0][j]*full[1][j]*full[2][j])==0
&&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==-1)
val[i][j]=val[i][j]+2;
if(((full[i][0]+full[i][1]+full[i][2])==0)&&(full[i][0]*full[i][1]*full[i][2])==0
&&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==-1)
val[i][j]=val[i][j]+2;
//主对角线：同上
if((i==0&&j==0)||(i==2&&j==2)||(i==1&&j==1)){
if(((full[0][0]+full[1][1]+full[2][2])==4)&&(full[0][0]*full[1][1]*full[2][2])==0
&&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==-1)
val[i][j]=val[i][j]+10000;
//次级权值
if(((full[0][0]+full[1][1]+full[2][2])==2)&&(full[0][0]*full[1][1]*full[2][2])==0
&&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==0)
val[i][j]=val[i][j]+1000;
//三级权值（一排只有一个X）
if(((full[0][0]+full[1][1]+full[2][2])==1)&&(full[0][0]*full[1][1]*full[2][2])==0
&&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==0)
val[i][j]=val[i][j]+10;
//四级权值（一排只有一个O）
if(((full[0][0]+full[1][1]+full[2][2])==2)&&(full[0][0]*full[1][1]*full[2][2])==0
&&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==1)
val[i][j]=val[i][j]+5;
//五级权值（该行没有X或O）
if(((full[0][0]+full[1][1]+full[2][2])==0)&&(full[0][0]*full[1][1]*full[2][2])==0
&&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==-1)
val[i][j]=val[i][j]+2;
}
//副对角线(同上)
if((i==0&&j==2)||(i==2&&j==0)||(i==1&&j==1)){
//一级
if(((full[0][2]+full[1][1]+full[2][0])==4)&&(full[0][2]*full[1][1]*full[2][0])==0
&&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==-1)
val[i][j]=val[i][j]+10000;
//二级
if(((full[0][2]+full[1][1]+full[2][0])==2)&&(full[0][2]*full[1][1]*full[2][0])==0
&&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==0)
val[i][j]=val[i][j]+1000;
//三级权值（一排只有一个X）
if(((full[0][2]+full[1][1]+full[2][0])==1)&&(full[0][2]*full[1][1]*full[2][0])==0
&&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==0)
val[i][j]=val[i][j]+10;
//四级权值（一排只有一个O）
if(((full[0][2]+full[1][1]+full[2][0])==2)&&(full[0][2]*full[1][1]*full[2][0])==0
&&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==1)
val[i][j]=val[i][j]+5;
//五级权值（该行没有X或O）
if(((full[0][2]+full[1][1]+full[2][0])==0)&&(full[0][2]*full[1][1]*full[2][0])==0
&&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==-1)
val[i][j]=val[i][j]+2;
}
}
}
}
}
function ai(){
if(judge()==true){
return;
}
//挑选权值最大的
resetValue();
var mi=0,mj=0,temp=0;
for(var i=0;i<3;i++)
for(var j=0;j<3;j++){
if(val[i][j]>temp){
temp=val[i][j];
mi=i;
mj=j;
}
}
full[mi][mj]=2;
num1=(mi*3+mj+1)+"";
document.getElementById(num1).value="O";
if(judge()==true){
return;
}
}
function lose(){
window.alert("you lose");
location.reload();
}
</script>
</head>
<body>
<h1 align=center> 井字棋</h1>
<table border=2px bordercolor="blue"width="300"height="300" style="font-size:50 " align=center>
<tr>
<td><input type="button" id="1" Style="width:100px;height:100px;" value=" " onclick="bn(0,0)"/></td>
<td><input type="button" id="2" Style="width:100px;height:100px;" value=" " onclick="bn(0,1)"/></td>
<td><input type="button" id="3" Style="width:100px;height:100px;" value=" " onclick="bn(0,2)"/></td>
</tr>
<tr>
<td><input type="button" id="4" Style="width:100px;height:100px;" value=" " onclick="bn(1,0)"/></td>
<td><input type="button" id="5" Style="width:100px;height:100px;" value=" " onclick="bn(1,1)"/></td>
<td><input type="button" id="6" Style="width:100px;height:100px;" value=" " onclick="bn(1,2)"/></td>
</tr>
<tr >
<td><input type="button" id="7" Style="width:100px;height:100px;" value=" " onclick="bn(2,0)"/></td>
<td><input type="button" id="8" Style="width:100px;height:100px;" value=" " onclick="bn(2,1)"/></td>
<td><input type="button" id="9" Style="width:100px;height:100px;" value=" " onclick="bn(2,2)"/></td>
</tr>
</table>
<p ><input type="button" style="position:relative;left:500px;top:5px;width:100px;height:50px;" value="重新开始" onclick="location.reload() "/>
<input type="button" style="position:relative;left:550px;top:5px;width:100px;height:50px;" value="认 输" onclick="lose()"/>
</p>
<body>
</html>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!
Empfohlene Lektüre:
JS implementiert den einfachsten Such-, Sortier- und Deduplizierungsalgorithmus
Wie man mit jQuery erreicht Erwerb Zufällige Farbe
Das obige ist der detaillierte Inhalt vonWie man mit JS ein Tic-Tac-Toe-Spiel erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie hoch sollte die CPU-Auslastung beim Spielen sein?
Feb 19, 2024 am 11:21 AM
Es kommt häufig vor, dass Spiele Ihren Computer verlangsamen, weil sie viele Ressourcen verbrauchen. Es ist wichtig, die CPU-Auslastung beim Spielen zu kennen, um eine Überlastung zu vermeiden. Daher ist es wichtig, die angemessene CPU-Auslastung im Auge zu behalten, um ein reibungsloses Spielerlebnis zu gewährleisten. In diesem Artikel schauen wir uns die angemessene CPU-Auslastung an, die Sie erreichen sollten, während Ihr Spiel läuft. CPU-Auslastung beim Gaming Die CPU-Auslastung ist ein wichtiger Indikator für die Prozessorauslastung und hängt von den Leistungsspezifikationen der CPU ab. Leistungsstärkere CPUs haben im Allgemeinen eine höhere Auslastung. Eine CPU mit mehr Kernen und Threads kann die Gesamtleistung Ihres Systems verbessern. Die Multi-Threading-Unterstützung hilft dabei, das volle Potenzial Ihrer CPU auszuschöpfen. In Spielen hängt die CPU-Auslastung von der Prozessorauslastung ab, was sich auf das Spiel auswirken kann
NAT Boost vs. Qos für Spiele; was ist besser?
Feb 19, 2024 pm 07:00 PM
In der heutigen Situation, in der fast alle Spiele online stattfinden, ist es nicht ratsam, die Optimierung des Heimnetzwerks außer Acht zu lassen. Fast alle Router sind mit NATBoost- und QoS-Funktionen ausgestattet, die das Spielerlebnis der Benutzer verbessern sollen. In diesem Artikel werden die Definition, Vor- und Nachteile von NATBoost und QoS untersucht. NATBoost vs. Qos für Spiele; welches ist besser? NATBoost, auch bekannt als Network Address Translation Boost, ist eine in Router integrierte Funktion, die deren Leistung verbessert. Dies ist besonders wichtig für Spiele, da es dazu beiträgt, die Netzwerklatenz zu reduzieren, also die Zeit, die für die Datenübertragung zwischen dem Spielgerät und dem Server benötigt wird. Durch die Optimierung der Datenverarbeitungsmethode innerhalb des Routers erreicht NATBoost eine schnellere Datenverarbeitungsgeschwindigkeit und eine geringere Latenz und verändert so die
Nvgpucomp64.dll führt zum Absturz von Windows-PC-Spielen;
Mar 26, 2024 am 08:20 AM
Wenn Nvgpucomp64.dll dazu führt, dass Ihr Spiel häufig abstürzt, können Ihnen die hier bereitgestellten Lösungen helfen. Dieses Problem wird normalerweise durch veraltete oder beschädigte Grafikkartentreiber, beschädigte Spieledateien usw. verursacht. Das Beheben dieser Probleme kann Ihnen dabei helfen, Spielabstürze zu beheben. Die Datei Nvgpucomp64.dll ist mit NVIDIA-Grafikkarten verknüpft. Wenn diese Datei abstürzt, stürzt auch Ihr Spiel ab. Dies geschieht normalerweise in Spielen wie LordsoftheFallen, LiesofP, RocketLeague und ApexLegends. Nvgpucomp64.dll stürzt Spiele auf Windows-PCs ab, wenn N
NVIDIA führt RTX HDR-Funktion ein: Nicht unterstützte Spiele nutzen KI-Filter, um wunderschöne visuelle HDR-Effekte zu erzielen
Feb 24, 2024 pm 06:37 PM
Laut Nachrichten dieser Website vom 23. Februar hat NVIDIA gestern Abend die NVIDIA-Anwendung aktualisiert und gestartet und bietet Spielern ein neues einheitliches GPU-Kontrollzentrum, das es Spielern ermöglicht, wunderbare Momente durch das leistungsstarke Aufzeichnungstool des In-Game-Floating festzuhalten Fenster. In diesem Update hat NVIDIA auch die RTXHDR-Funktion eingeführt. Die offizielle Einführung ist wie folgt beigefügt: RTXHDR ist ein neuer KI-gestützter Freestyle-Filter, der die großartigen visuellen Effekte von High Dynamic Range (HDR) nahtlos in Spiele einführen kann, die dies ursprünglich nicht tun unterstützt HDR. Sie benötigen lediglich einen HDR-kompatiblen Monitor, um diese Funktion mit einer Vielzahl von DirectX- und Vulkan-basierten Spielen nutzen zu können. Nachdem der Player die RTXHDR-Funktion aktiviert hat, läuft das Spiel auch dann, wenn es HD nicht unterstützt
Einführung in das Herunterladen und Installieren des Superpeople-Spiels
Mar 30, 2024 pm 04:01 PM
Das Superpeople-Spiel kann über den Steam-Client heruntergeladen werden. Die Größe dieses Spiels beträgt normalerweise eineinhalb Stunden. Hier ist ein spezielles Download- und Installations-Tutorial. Neue Methode zur Beantragung globaler geschlossener Tests 1) Suchen Sie nach „SUPERPEOPLE“ im Steam-Store (Steam-Client-Download) 2) Klicken Sie unten auf der „SUPERPEOPLE“-Store-Seite auf „Zugriff auf geschlossene SUPERPEOPLE-Tests anfordern“ 3) Nachdem Sie auf geklickt haben Schaltfläche „Zugriff anfordern“. Das Spiel „SUPERPEOPLECBT“ kann in der Steam-Bibliothek bestätigt werden. 4) Klicken Sie auf die Schaltfläche „Installieren“ in „SUPERPEOPLECBT“ und laden Sie es herunter
Wo ist Spider Solitaire in Win11? Wie spielt man das Spider Solitaire-Spiel in Win11?
Mar 01, 2024 am 11:37 AM
Freunde, die genug AAA-Meisterwerke und Handyspiele gespielt haben, möchten Sie die Computerspiele Ihrer Kindheit noch einmal erleben? Dann lasst uns gemeinsam nach Spider Solitaire in Windows 11 suchen! Klicken Sie auf der Benutzeroberfläche auf das Startmenü und dann auf die Schaltfläche „Alle Apps“. Suchen und wählen Sie „MicrosoftSolitaireCollection“, die Spieleanwendung der Solitaire-Serie von Microsoft. Nachdem der Ladevorgang abgeschlossen ist, rufen Sie die Auswahloberfläche auf und suchen Sie nach „Spider Solitaire“. Wählen Sie „Spider Solitaire“. Obwohl sich die Benutzeroberfläche geringfügig geändert hat, ist sie immer noch dieselbe wie zuvor
![Thrustmaster-Bedienfeld funktioniert nicht oder wird nicht richtig angezeigt [Behoben]](https://img.php.cn/upload/article/000/887/227/170831073283375.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Thrustmaster-Bedienfeld funktioniert nicht oder wird nicht richtig angezeigt [Behoben]
Feb 19, 2024 am 10:45 AM
Thrustmaster ist ein Unternehmen, das sich auf die Herstellung von Gaming-Rädern und anderem Gaming-Zubehör spezialisiert hat. Seine Lenkradprodukte erfreuen sich in der Gaming-Community großer Beliebtheit. Thrustmaster-Radeinstellungen können über das Thrustmaster-Bedienfeld installiert und angepasst werden. Wenn Sie Probleme damit haben, dass das Bedienfeld nicht funktioniert oder nicht angezeigt wird, kann dies Ihr Spielerlebnis beeinträchtigen. Daher müssen Sie in diesem Fall überprüfen, ob die Verbindung normal ist und sicherstellen, dass der Softwaretreiber korrekt installiert und auf die neueste Version aktualisiert ist. Darüber hinaus können Sie auch versuchen, das Gerät neu zu starten oder das Gerät erneut anzuschließen, um mögliche Fehler zu beheben. Wenn Sie auf Probleme stoßen, können Sie die offizielle Website von Thrustmaster besuchen oder sich für weitere Hilfe an den Kundendienst wenden. So greifen Sie auf Thrustma zu
ASUS veröffentlicht BIOS-Update zur Verbesserung der Spielestabilität auf Intels Prozessoren der 13./14. Generation
Apr 20, 2024 pm 05:01 PM
Laut Nachrichten dieser Website vom 20. April hat ASUS kürzlich ein BIOS-Update veröffentlicht, das Instabilitäten wie Abstürze beim Ausführen von Spielen auf Intel-Prozessoren der 13./14. Generation verbessert. Diese Seite berichtete zuvor, dass Spieler Probleme gemeldet hätten, unter anderem, dass beim Ausführen der PC-Demoversion von Bandai Namcos Kampfspiel „Tekken 8“ das System abstürzte und eine Fehlermeldung über unzureichenden Speicher ausgab, selbst wenn der Computer über ausreichend Arbeits- und Videospeicher verfügte. Ähnliche Absturzprobleme traten auch in vielen Spielen wie „Battlefield 2042“, „Remnant 2“, „Fortnite“, „Lord of the Fallen“, „Hogwarts Legacy“ und „The Finals“ auf. RAD veröffentlichte im Februar dieses Jahres einen langen Artikel, in dem erklärt wurde, dass das Spielabsturzproblem eine Kombination aus BIOS-Einstellungen, hoher Taktfrequenz und hohem Stromverbrauch von Intel-Prozessoren ist.
