Розробки гри "ОХОРОНЕЦЬ"
- Створюємо файл HTML
<!DOCTYPE html>
<html>
<head>
<title> Гра для охоронців</title>
</head>
<body>
</body>
</html>
2. Робимо гральне поле
Вставте в тег <body> тег <div> з ідентифікатором:
.....
<body>
<div id ="board">
</div>
</body>
.....
Вставте в тег <head> тег <style> стиль грального поля:
<head>
....
<style>
#board
{
border: 1px solid black;
background-color: gray;
height:350px;
width:650px;
}
</style>
</head>
....
3. Установлюємо кнопку
установлюємо кнопку "Грати" з виклаком функції startGame()
...
<body>
<input type='button' value='Грати' onclick="startGame()"; />
...
установлюємо блок script в тег <body>
<script>
function startGame()
{
}
</script>
4. Установлюємо таймер JavaScript
.....
<script>
function startGame()
{
setTimeout(startGame(), 1000);
}
</script>
.....
5. Створюємо гральний цикл
.....
<script>
function startGame()
{
gameLoop();
}
function startGame()
{
alert("Гру завершено!");
setTimeout(gameLoop, 1000);
}
</script>
.....
7. Застосовуємо цикл, щоби зупинити гру
<script>
function startGame()
{
gameLoop();
}
var loops=0;
function gameLoop()
{
loops++;
if (loops<12)
{
setTimeout(gameLoop,3000);
}
else{
alert("Гру завершено!);
}
}
</script>
8. Приховуємо й показуємо персонажів за допомогою CSS
.hidden{
display:none;
}
.visible{
display:block;
}
9. Анімуємо персонажів
...
var loops=0;
var peopleVisible= false;
function gameLoop()
{
peopleVisible=!peopleVisible;
...
10. Застосовуємо CSS за допомогою JavaScript
Оголошуємо функцію, яка буде задавати персонажі
function createCharacters()
{
var board=document.getElementById("board");
var classToSet="";
if (peopleVisible)
{
classToSet="character visible";
}
else{
classToSet="character hidden";
}
for(var index = 0; index < 6; index++)
{
board.children[index].className=classToSet;
}
}
11. Спрощуємо умовні вказівки
...
var classToSet=peopleVisible ? "character visible":"character hidden";
...
...
function gameLoop()
{
peopleVisible=!peopleVisible;
createCharacters();
loops++;
...
12. Вводимо крадія
...
var randomNumber = Math.floor(Math.random()*8)+1;
board.children[randomNumber-1].innerHTML="Крадій";
board.children[randomNumber-1].onclick=function(){gameScore++;}
board.children[randomNumber-1].className=classToSet+ " thief";
...
...
peopleVisible=!peopleVisible;
createCharacters();
...
Весь код
<!DOCTYPE html>
<html>
<head>
<title> Гра для охоронців</title>
<style>
#board
{
background: url("background.png");
background-size: cover;-->
border: 4px solid black;
background-color: gray;
height:350px;
width:650px;
}
.character
{
background: url("pupels.jpg");
background-size: cover;
height:120px;
width:120px;
padding:10px;
margin:10px;
float:left;
}
.thief{
background: url("perat.jpg");
background-size: cover;
}
.hidden{
display:none;
}
.visible{
display:block;
}
</style>
</head>
<body style="width: 660px;">
<center><input type='button' value='Грати' onclick="startGame()"; /></center>
<div id ="board">
<div class="character">1</div>
<div class="character">2</div>
<div class="character">3</div>
<div class="character">4</div>
<div class="character">5</div>
<div class="character">6</div>
<div class="character">7</div>
<div class="character">8</div>
</div>
<script>
function startGame()
{
loops=0;
gameScore=0;
gameLoop();
}
var loops=0;
var peopleVisible= false;
var gameScore=0;
function gameLoop()
{
peopleVisible=!peopleVisible;
createCharacters();
loops++;
if (loops<12)
{
setTimeout(gameLoop,peopleVisible ? 1000:1200);
}
else{
alert("Гру завершено! Твій рахунок " + gameScore);
peopleVisible=true;
}
}
function createCharacters()
{
var board=document.getElementById("board");
var classToSet=peopleVisible ? "character visible":"character hidden"
for(var index = 0; index < 8; index++)
{
board.children[index].className=classToSet;
board.children[index].innerHTML="Гість";
board.children[index].onclick=function(){gameScore+=-2; }
}
var randomNumber = Math.floor(Math.random()*8)+1;
board.children[randomNumber-1].innerHTML="Крадій";
board.children[randomNumber-1].onclick=function(){gameScore++;}
board.children[randomNumber-1].className=classToSet+ " thief";
}
</script>
</body>
</html>