javascript - 在自动生成的网格上选择一行
问题描述
我需要帮助我与几个朋友一起制作的游戏,我们正在制作带有角色和“力量”的战舰游戏,他们中的大多数人选择了几个插槽或行并同时击中它们,因为我自动生成了网格并使用 xy 坐标来定位要点击的位置我不知道如何选择整行,我可以使用一些帮助。
这是代码:
JS:
/* diseña navios */
var ship = [[[1,5], [1,2,5], [1,2,3,5], [1,2,3,4,5]], [[6,10], [6,7,10], [6,7,8,10], [6,7,8,9,10]]];
/* array para posicion de nave */
var dead = [[[201,203], [201,202,203], [201,202,202,203], [201,202,202,202,203]], [[204,206], [204,205,206], [204,205,205,206], [204,205,205,205,206]]];
/* descripcion de navios */
var shiptypes = [["Lancha",2,4],["Submarino",3,4],[ "Buque",4,2],[ "Porta-aviones",5,1]];
var gridx = 16, gridy = 16;
var player = [], computer = [], playersships = [], computersships = [];
var playerlives = 0, computerlives = 0, playflag=true, statusmsg="";
/* Funcion para cargar imagenes */
var preloaded = [];
function imagePreload() {
var i,ids = [1,2,3,4,5,6,7,8,9,10,100,101,102,103,201,202,203,204,205,206];
window.status = "Precarga de imagenes.";
for (i=0;i<ids.length;++i) {
var img = new Image, name = "batt"+ids[i]+".gif";
img.src = name;
preloaded[i] = img;
}
window.status = "";
}
/* Funcion para colocar naves */
function setupPlayer(ispc) {
var y,x;
grid = [];
for (y=0;y<gridx;++y) {
grid[y] = [];
for (x=0;x<gridx;++x)
grid[y][x] = [100,-1,0];
}
var shipno = 0;
var s;
for (s=shiptypes.length-1;s>=0;--s) {
var i;
for (i=0;i<shiptypes[s][2];++i) {
var d = Math.floor(Math.random()*2);
var len = shiptypes[s][1], lx=gridx, ly=gridy, dx=0, dy=0;
if ( d==0) {
lx = gridx-len;
dx=1;
} else {
ly = gridy-len;
dy=1;
}
var x,y,ok;
do {
y = Math.floor(Math.random()*ly);
x = Math.floor(Math.random()*lx);
var j,cx=x,cy=y;
ok = true;
for (j=0;j<len;++j) {
if (grid[cy][cx][0] < 100) {
ok=false;
break;
}
cx+=dx;
cy+=dy;
}
} while(!ok);
var j,cx=x,cy=y;
for (j=0;j<len;++j) {
grid[cy][cx][0] = ship[d][s][j];
grid[cy][cx][1] = shipno;
grid[cy][cx][2] = dead[d][s][j];
cx+=dx;
cy+=dy;
}
if (ispc) {
computersships[shipno] = [s,shiptypes[s][1]];
computerlives++;
} else {
playersships[shipno] = [s,shiptypes[s][1]];
playerlives++;
}
shipno++;
}
}
return grid;
}
/* Funcion para poner imagenes en cuadricula */
function setImage(y,x,id,ispc) {
if ( ispc ) {
computer[y][x][0] = id;
document.images["pc"+y+"_"+x].src = "batt"+id+".gif";
} else {
player[y][x][0] = id;
document.images["ply"+y+"_"+x].src = "batt"+id+".gif";
}
}
/* Funcion que diseña cuadricula y x */
function showGrid(ispc) {
var y,x;
for (y=0;y<gridy;++y) {
for (x=0;x<gridx;++x) {
if ( ispc )
document.write ('<a href="javascript:gridClick('+y+','+x+');"><img name="pc'+y+'_'+x+'" src="batt100.gif" width=20 height=20></a>');
else
document.write ('<a href="javascript:void(0);"><img name="ply'+y+'_'+x+'" src="batt'+player[y][x][0]+'.gif" width=20 height=20></a>');
}
document.write('<br>');
}
}
/* funcion para dar clicks en cuadricula */
function gridClick(y,x) {
if ( playflag ) {
if (computer[y][x][0] < 100 ) {
setImage(y,x,103,true);
var shipno = computer[y][x][1];
if ( --computersships[shipno][1] == 0 ) {
sinkShip(computer,shipno,true);
updateStatus();
if ( --computerlives == 0 ) {
alert("Has ganado!, apreta F5\n para volver al menú");
playflag = false;
}
}
if ( playflag ) computerMove();
} else if (computer[y][x][0] == 100) {
setImage(y,x,102,true);
computerMove();
}
}
}
/* IA DE PC */
function computerMove() {
var x,y,pass;
var sx,sy;
var selected = false;
/* Cambio de turno */
for (pass=0;pass<2;++pass) {
for (y=0;y<gridy && !selected;++y) {
for (x=0;x<gridx && !selected;++x) {
/* Si le da a un barco */
if (player[y][x][0]==103) {
sx=x; sy=y;
var nup=(y>0 && player[y-1][x][0]<=100);
var ndn=(y<gridy-1 && player[y+1][x][0]<=100);
var nlt=(x>0 && player[y][x-1][0]<=100);
var nrt=(x<gridx-1 && player[y][x+1][0]<=100);
if ( pass == 0 ) {
/* Para poder dar a una linea */
var yup=(y>0 && player[y-1][x][0]==103);
var ydn=(y<gridy-1 && player[y+1][x][0]==103);
var ylt=(x>0 && player[y][x-1][0]==103);
var yrt=(x<gridx-1 && player[y][x+1][0]==103);
if ( nlt && yrt) { sx = x-1; selected=true; }
else if ( nrt && ylt) { sx = x+1; selected=true; }
else if ( nup && ydn) { sy = y-1; selected=true; }
else if ( ndn && yup) { sy = y+1; selected=true; }
} else {
/* Para dno darle de nuevo a parte atinada */
if ( nlt ) { sx=x-1; selected=true; }
else if ( nrt ) { sx=x+1; selected=true; }
else if ( nup ) { sy=y-1; selected=true; }
else if ( ndn ) { sy=y+1; selected=true; }
}
}
}
}
}
if ( !selected ) {
/* Funcion que, elige aleatoriamente las posiciones de los navios en el campo */
do {
sy = Math.floor(Math.random() * gridy);
sx = Math.floor(Math.random() * gridx/2)*2+sy%2;
} while( player[sy][sx][0]>100 );
}
if (player[sy][sx][0] < 100) {
/* Atina */
setImage(sy,sx,103,false);
var shipno = player[sy][sx][1];
if ( --playersships[shipno][1] == 0 ) {
sinkShip(player,shipno,false);
if ( --playerlives == 0 ) {
knowYourEnemy();
alert("has perdido!, presiona F5\n para volver al menú");
playflag = false;
}
}
} else {
/* Erra */
setImage(sy,sx,102,false);
}
}
/* Cambia imagen de navio por imagen de hundido */
function sinkShip(grid,shipno,ispc) {
var y,x;
for (y=0;y<gridx;++y) {
for (x=0;x<gridx;++x) {
if ( grid[y][x][1] == shipno )
if (ispc) setImage(y,x,computer[y][x][2],true);
else setImage(y,x,player[y][x][2],false);
}
}
}
/* Muestra donde estan los navios cuando perdes */
function knowYourEnemy() {
var y,x;
for (y=0;y<gridx;++y) {
for (x=0;x<gridx;++x) {
if ( computer[y][x][0] == 103 )
setImage(y,x,computer[y][x][2],true);
else if ( computer[y][x][0] < 100 )
setImage(y,x,computer[y][x][0],true);
}
}
}
/* Muestra cuantos navios el enemigo tiene */
function updateStatus() {
var f=false,i,s = "O";
for (i=0;i<computersships.length;++i) {
if (computersships[i][1] > 0) {
if (f) s=s+", "; else f=true;
s = s + shiptypes[computersships[i][0]][0];
}
}
if (!f) s = s + "Ninguno";
statusmsg = s;
window.status = statusmsg;
}
function setStatus() {
window.status = statusmsg;
}
/* Inicia el juego */
imagePreload();
player = setupPlayer(false);
computer = setupPlayer(true);
document.write("<center><table><tr><td align=center><p class='heading'>Flota enemiga</p></td>"+
"<td align=center><p class='heading'>Flota aliada</p></td></tr><tr><td>");
showGrid(true);
document.write("</td><td>");
showGrid(false);
document.write("</td></tr></table></center>");
updateStatus();
setInterval("setStatus();", 500);
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.heading { font-size:14pt; font-weight:bold; font-family:sans-serif }
</style>
<script src="battleship.js" type="text/javascript"></script>
</head>
</html>
解决方案
如果“选择”表示选择网格的一行html元素,则需要在showGrid()
下面添加类名。
f (ispc)
document.write('<a class="pc row'+ y +'" href="javascript:gridClick(' + y + ',' + x + ');"><img name="pc' + y + '_' + x + '" src="batt100.gif" width=20 height=20></a>');
else
document.write('<a class="npc row'+ y +'" href="javascript:void(0);"><img name="ply' + y + '_' + x + '" src="batt' + player[y][x][0] + '.gif" width=20 height=20></a>');
可以使用下面的函数调用选择一行网格。
const row0 = document.getElementsByClassName("pc row0")
推荐阅读
- javascript - 扩展成功后 AWS AutoScaling Down 策略失败:无法执行自动扩展操作:未找到指标值的步进调整
- javascript - 请为我解释这个java脚本代码
- git - Git 将一个分支的内容复制到另一个分支
- reactjs - React Native:将多个联系人保存到电话联系人
- azure - Azure Blob 存储生命周期管理 - 在容器级别设置筛选器
- django - 鹡鸰管理员过滤器按钮
- c# - 如何使用 Microsoft.Office.Interop 自动从 Excel 中选择数据
- javascript - 贝宝订阅集成 | 与捕获资金混淆
- objective-c - Objective c / 如何将用户实现的静态函数调用到 nsstring 类中?
- python - Python shell csv 问题 FileNotFoundError: [Errno 2] No such file or directory: 'iris.csv'