JS. Морской бой. Упрощенная версия

Восстановил пример со своими вариациями из книги издательства O’Reilly

Пример достаточно тривиальный, но мне, как человеку, который закрепляет свои навыки после изучения теории – самое то. На сервере издательства не нашел готового варианта упрощенной версии Морского Боя, поэтому пришлось поработать и вот результат. В качестве практики для начинающих изучать JS – идеальный пример.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">


		<title>SeaBattleshipSimple</title>

	</head>

	<body>
		
			<header>
				<h1 style="color:blue">SeaBattleshipSimple</h1>
			</header>
			<p>Imagine that inside those cells below there is a ship, consisting of 3 cells....</p>
			
		
//Рисуем ячейки кораблей
<div style="text-align:center; color:blue;">
			<script>
			for(i=0;i<5;i++){
				j=i+1;
				document.write('<span id="'+j+'">['+j+'...SeaShip May Be Here...]</span>      ');
				
			};
			document.write('<p id="result"></p>');
			</script>
</div>

<script>


//Объявляем глобальные переменные
var isSunk=false; var guesses=0; var guess=0; var hits=0;
var shiplocation1,shiplocation2,shiplocation3;  

function startlocation() {
	//Выставляем корабль в позиции от 1..5
	var randomLoc=Math.floor(Math.random()*3);
	
	 if (randomLoc==0){randomLoc=1;}
	 shiplocation1=randomLoc;
	 shiplocation2=shiplocation1+1;
	 shiplocation3=shiplocation2+1;
	

}

function fire(){
//Уничтожаем корабли	 

while(isSunk==false){
guess=prompt('Enter any number between 1-5','');	
	
	if (guess<1 || guess>5){
		alert('Please enter valid cell number');
	}

else {
	guesses=guesses+1;
	//alert(guesses);
	if (guess==shiplocation1||guess==shiplocation2||guess==shiplocation3){
		alert('HIT');
		document.getElementById(guess).style.color='red';
		hits=hits+1;
		if (hits==3){
			isSunk=true;
	 	alert('CONGRATULATIONS!!! You WON');
	 	document.getElementById('result').innerHTML='CONGRATULATIONS!!! YOU WON';	
		document.getElementById('result').style.color='red';	
		}
	} else alert('MISS');
}	
}
}


function myonclick(){
//Объединяем 2 функции
	startlocation();
	fire();
	
}	


</script>

<br>
<br>
		<div style="text-align:center">
		<button onclick="myonclick()" >FIRE!!!</button>
		</div>
		
		
		
	</body>
</html>

<!DOCTYPE html>

<head>

<title>SeaBattleshipSimple</title>

</head>

<body>

<h1 style="color:blue">SeaBattleshipSimple</h1>

</header>

<p>Imagine that inside those cells below there is a ship, consisting of 3 cells....</p>

//Рисуем ячейки кораблей

for(i=0;i<5;i++){

j=i+1;

document.write('<span id="'+j+'">['+j+'...SeaShip May Be Here...]</span> ');

};

document.write('<p id="result"></p>');

</script>

</div>

//Объявляем глобальные переменные

var isSunk=false; var guesses=0; var guess=0; var hits=0;

var shiplocation1,shiplocation2,shiplocation3;

function startlocation() {

//Выставляем корабль в позиции от 1..5

var randomLoc=Math.floor(Math.random()*3);

if (randomLoc==0){randomLoc=1;}

shiplocation1=randomLoc;

shiplocation2=shiplocation1+1;

shiplocation3=shiplocation2+1;

}

function fire(){

//Уничтожаем корабли

while(isSunk==false){

guess=prompt('Enter any number between 1-5','');

if (guess<1 || guess>5){

alert('Please enter valid cell number');

}

else {

guesses=guesses+1;

//alert(guesses);

if (guess==shiplocation1||guess==shiplocation2||guess==shiplocation3){

alert('HIT');

document.getElementById(guess).style.color='red';

hits=hits+1;

if (hits==3){

isSunk=true;

alert('CONGRATULATIONS!!! You WON');

document.getElementById('result').innerHTML='CONGRATULATIONS!!! YOU WON';

document.getElementById('result').style.color='red';

}

} else alert('MISS');

}

function myonclick(){

//Объединяем 2 функции

startlocation();

fire();

}

</script>

<br>

</div>

</body>

</html>

JS. Морской бой. Упрощенная версия

MY PROJECTS

Recent Posts

Categories