2.9/5 (1096 гласа)

Как се прави игра на Javascript

Обичате ли да играете? А обичате ли да учите докато играете?

Ако е така, тази статия е точно за вас!

Първо трябва да измислим как играчът ще спечелва или губи точки. Например може да решава задачи по смятане. За да покажа как се пише такава програма ще използвам задачи за събиране на едноцифрени числа.

За да е интересна играта ще я направим като автомобилно рали. При правилен отговор една количка ще се мести напред, а при неправилен – ще се мести назад.

Алгоритъм

Започваме с правене на блок-схема на алгоритъма (последователността от стъпки).



  1. Измисли задача – тук програмата ще генерира задача за събиране на две случайни еднооцифрени числа

  2. Въвеждане на отговор – играчът ще трябва да въведе отговор в текстова кутийка и да натисне бутон за проверка

  3. Проверка на отговора – програмата ще проверява отговора и ще премества количката напред или назад. При неправилен отговор ще се връщаме на стъпка 2.

  4. След като преместим количката напред ще трябва да проверим дали е достигнат финалът. Ако не е достигнат, ще се връщаме към стъпка 1. Ако сме на финалът ще трябва да дадем награда на победителя.


Програма

За да бъде програмата достъпна за всички, ще я направим като уеб страница като използваме езиците HTML и Javascript.

Външният вид на играта се прави на езика HTML, като ползваме:

  • текстова кутия за въвеждане на отговор

  • бутон за проверка

  • DIV елементи за картинките на количката, флага за финала и наградата.


Всички проверки и движения на картинките ще се направят на Javascript.

DIV елементите са малки правоъгълничета, в които може да сложим картинки или текст.

Например, количката може да се опише с DIV елемент с ID (име) car и вътре в него да сложим картинка на количка като ползваме IMG елемент:

<div id="car">
  <img src="car.png">
</div> 

Самото движение на количката може да се направи като се сменя най-лявата позиция на DIV елемента.

/* Взимаме елемента с ID = car */
car = document.getElementById('car'); 

/* Взимаме най-лявата позиция на количката и я запомняме в променлива left  */
left = parseInt(car.style.left); 

/* При правилен отговор най-лявата позиция се премества с 1 пиксел напред */
left = left + 1;

/* При неправилен отговор най-лявата позиция се премества с 1 пиксел назад */
left = left - 1;

/* Сменяме най-лявата позиция на количката */
car.style.left = left + 'px';

/* Извикваме doMove функцията отново след 10 милисекунди, за да имитираме движението на количката */
setTimeout(doMove, 10);


Това е крайният код на HTML страницата:


<html> 
<head> 
<title>Javascript Game</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css"> 

/* Тук се описват стиловете за DIV елементите */

#car {
 position:relative;
 left:0px;
 top:10px;
}

#flag {
 position:relative;
 left:690px;
 top:10;
}

#final {
 position:relative;
 left:300px;
 top:10px;
 display: none;
}

</style> 
<script type="text/javascript"> 

/* Променливи, които ще ни трябват във функциите */

var w = 700;
var num_steps = 10;
var step = parseInt(w/num_steps);
var direction = 0;
var correct_result = 0;
var step_end = 0;

/* Тази функция се вика в началото */

function begin()
{
	car = document.getElementById('car');
    	car.style.left = '0px';
	generateTask();
}

/* Тази функция генерира нова задача */

function generateTask()
{
	a1 = Math.round(Math.random()*9) + 1;
	a2 = Math.round(Math.random()*9) + 1;

	correct_result = a1 + a2;

	el = document.getElementById('task');
	el.innerHTML = a1 + " + " + a2 + " = " + 
	"<input type='text' id='res'>" + " " + 
	"<input type='button' value='Провери!' onClick='checkResult()'>";
}

/* Тази функция проверява резултата въведен от играча */

function checkResult() 
{
	l = parseInt(car.style.left);

	res = document.getElementById('res').value;

    	if (res == "" )
	{
		alert ("Моля, въведете отговор!");
		return;
	}

	if (res == correct_result)
	{
		direction = 1;
		step_end = l + (step * direction);
		doMove();		
	}
	else
	{
		if (l >= step)
		{
			direction = -1;
			step_end = l + (step * direction);
			doMove();
		}
	}
}

/* Тази функция премества количка премества количката напред или назад */
 
function doMove()
{
 	l = parseInt(car.style.left);

	if ( direction == 1)
	{
		if (l < step_end)
		{
			l = l + 1;
  			car.style.left = l + 'px';	
			setTimeout(doMove, 10);
		}	
		else
		{
			l = parseInt(car.style.left);
			if (l < num_steps*step)
			{	
				generateTask();
			}	
			else
			{
				fin = document.getElementById('final');
				fin.style.display = "block";

				task = document.getElementById('task');
				task.style.display = "none";
			}
		}
	}
	else
	{
		if (l > step_end)
		{
			l = l - 1;
  			car.style.left = l + 'px';	
			setTimeout(doMove, 10);
		}
	}
}

/* След зареждане на страницата се извиква функцията begin() */
window.onload = begin;
 
</script> 
</head> 
<body>
<div id="task"></div>
<div id="flag"> 
 <img src="flag.jpg">
</div> 
<div id="car"> 
 <img src="car.png">
</div> 
<div id="final"> 
 <img src="final.jpg">
</div> 
</body> 
</html>

А сега дойде ред за самата игра!







Божидар, 9г.
Категории: Полезно