0% нашли этот документ полезным (0 голосов)
13 просмотров44 страницы

Lessons For Retards

Авторское право
© © All Rights Reserved
Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.
Доступные форматы
Скачать в формате TXT, PDF, TXT или читать онлайн в Scribd
0% нашли этот документ полезным (0 голосов)
13 просмотров44 страницы

Lessons For Retards

Авторское право
© © All Rights Reserved
Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.
Доступные форматы
Скачать в формате TXT, PDF, TXT или читать онлайн в Scribd
Вы находитесь на странице: 1/ 44

������ � ������� ���� ������� � ���, ��� �������, ���� ����������� ������ �������.

����� �����: ���� � ������ ����������� ��� ��������� ��� � ������� "�� ������ �
�����������" - ������������ (� ��������� ����������������) ������ ��� � ���� ����.

���������� �� ���� ���� � �������� ������������ � �������� ������� ���� javascript,


������ ��� �� ���� ������ �� ������ ����� ���������:"�� �������� ����� � ������ �
����� ������? �� ������, �������. ��� �� ��� � ��������, ��� ����� � ������ ���
������ ����. �� ��������������� ���������? �� ������. � ������������ � �� ���. ���
������� � ��������������� � ������������� ����������, �� ���� ��� �����, ���
������?"

����� ���� ����������� ����� �� ������������ ���������� ������������� ��������: ��


���� ��������� - �� ��������� ����� � ��������; �� ���� ������ ���������� ����
��������, ��� � ��� �������� ������ ������ ���������� - ���������� ������ ������ �
������ ����������� ���� � ���� �� ��������. �� ����� �������� � ����� �����
�������� �������� ����������� ������������� ���� ����������, ��� �� ��������
�������� ����� �������� ��������. ���� �� �������� ����������, �������, �� ���.

��� � ������� ������, ��� ������ �� � ���� ������ ���-������, ��� ������� �����
������ ������ �� ��� ��������, �� � ���-�� �� ����, ��� ��� ��� �� ����� ��������
�� ���.

��� �������������� ����, � ���� ��� � ������ "����� �������". ��� �� ����� ������
��������� ���� ������ ��������/�����������, � �� ���.
������� ����������: http://www.w3schools.com/js/

��������� �� ������������� ������.

���, �� ���� ��������� �� ���������������, ������ ���� �����, � �������


������������� ��� ��, ��� ����� ���������� � ��� �� ����� ��������� � �����. ���
���� ������ �������������� � � �������� ������� � ����� ������� �������� � �������
������������ ��� ���. ���, ������. ��� ����������, ��� ����� (��������) ���������,
����������, ��� ���������� ������ �� � ����?

�����, ��� ��� � ���� ������ � �������� �������, �� � �������� ��� �� �� �����
������� �.

�����-������� ���� ������� ��������� ��������. � ��� ������ �������� ������ �����
lessons_for_retards. � ��� ����� ���� lesson_1.php. ��� ������� ��������� ����� �
����������� .php, ������ ��� ��� � ��� � ������� ���������������� � ���������, �
������� �� .html, ������� ����������� � ���������.

��� ��� ����������:

lesson_1.php

<!DOCTYPE HTML>

<html>

<head>
<script type="text/javascript" src="lesson_1.js"></script>
</head>

<body style="background-color:#FFFFFF">

<div style="width: 1024px; margin: auto auto auto auto;" >


<canvas id="game" width="1024" height="768" style="border: 1px solid black">
Canvas is not supported.
</canvas>
</div>

</body>

</html>

����� ������� �� ���� �����(!!!): �� ���� ������ � ���������� ����� �����(!!!)


����� ������� ��� "���������". �������� ���� ��� � ������. � �� ������� ���-
�������� �� ������� �������� ���� ���� �� �������� �������: ��� ����������� �������
1024 �� 768 ������, ��� �������� �������� ����� ������ � ����������� � ����� �����
������ ������.

������ ���� �� ������ � ���������� ����� �����? ������ ��� ���� ����������� �����
������� � ��������� ����
(������� <script type="text/javascript" src="lesson_1.js"></script> ��������, ���
���� ���� ��������� lesson_1.js
���� ��� ���������� ������� � �������� ���� � ������ lesson_1.php!)

��, �� ����, �� ��� �� ��������-�������� �������� �����, � �������� ������ � ������


"�����" ����� ������ ������.
��������� lesson_1.php � ��������, ��������� lesson_1.js � ��������.
��������� lesson_1.php � ��������. ������ ������� ���������� ����� ������������ ��
���������� ����� ����.

� ������, ��������, ������� ����� ������� ������ ���������������: ���������


��������� �����-�������, ������ ����.

����� �������� ������ �������� ������� ��������������� ���������� ��� ���� ������
������� � javascript. �� ����������� �������� ����� �������� � � ���� lesson_1.js.
��� ���:

alert("���!");

����� ��������� ��� � ������ � �������� f5 ��� �������� � �� �������� lesson_1.php.


���� �� ��� ��� �� ��� ���������� � ��� ��� ������� ���� ����� ��������� ����������
����� ����� �������: ���������� ��� �� ������� � ������ ��������.

���� �� ���� ������� ���������, �� �����-������� ������ �������� ������� ������ �


������� "���!" � ������� "��". ��� ����� ��������� �� ����� ����������� �� ������,
�� � ���� ����� ���������� ���������. �����, ��������, �������� ��������� ������
alert � �� � �������� ����� ����� ���������!

alert("���!");
alert("���");
alert("��");
alert("�����");
alert("����������");
alert(":(");

���������������� ���������� � ���, ��� ������� alert ���������� �����, ���������� �


���������, ������� � �������� ����, ��� ����� ����������.

������ ����� ��� �� ������, ��� �� ����� ���������� � �����.

��������, ������ ������������� ������� �����:

a=5;
b=3;
c=a+b;
alert(c);

�������� ��������, ����� ������, � ������� �������� 8.


������� ������� ����������, ���������� ��� ������ c - ��� �� � ���������.

���������� � �������������: ����� "=" (��� �������) ���������� ������������.


������� ����� �� ���� (��� ����� ���� � �����, � ����� � ���������, � ���������
����, ���������� ������� ������������� - ���� �� �������� ����� ���� �� ����)
������������ �����, ������ ������. ��� �����/�����/��� ������ � ���������
����������.

����� ������ ����� ��������, �� ��������, ���� ������� ����� � ������. ���� �
�����, ��� ������������ �� �������� - �� ����� � ��� ���, �� ��� ����������� ������
���� ��� ����� �������� �������� ����� � ����� ������ (��� ������).

���� �������� ��� ���, �� ����� � ������ ������ ����������:

a = 5; b = 3; c = a + b;
alert(c);

������-�� ���������� ���� ����������������. ��� ���� �������, ��� ������� ��


���������� �������� ������� ����������� ������, ������� ����� ������� � ���������.
�� ����������� ���� �� ������� � ���� ������ ����� ��������� ��������������������
���������� �����-�� �������� ��� ��������������� ���� �����. ��� ������, � ��� ���
� ���� ����������� ����� � ������ � ������������� �� ����. �� ���� ����� ������, ��
������� ��� ��� ���:

var a,b,c; //��� � ��������������� ���������� a,b � c


a = 5; b = 3; c = a - b; //��� � �������� �� �������.
alert(c); //��� � ����� ��������� �� ���������� ������

���������� 2.

��, ��� �������� ����� // � �� ����� ������ ��������� ������������ � �������� ���
�� �����. �� ���� ����� // ����� ������ �������� ����� � � ��� ����� �� ������.
������������� ����������� ���� ���������� � /* ��� ����� */ �������(?)

�� ���� ������ ������, �������� � �����������: ���, ����, ���� �����, ��� ����� �
���� � �������, ��� �� �� ������� � ������ alert-�. ����� �� � ������� �� ����.
������ ���?

���� � ���� ��� � �����-�� ������ ����� ���������������, �� � �� ������, ��� �


������ �����, ��� ���� ���� ������������ � ���������� � �����, ���� ������� ���
���: ���, ����������� ������� �� ������ ��������� �����. ���� �������� ���
��������� � � ��� ��������� �������� ������ ����, � � ������� � ��� ���� ������� -
�������, ���������, ����������, �����������������. ������ �������� - ���������
���������� ������ � ���������� �������� - ������ ��� � ������������ ��� ���� ��
��������.

��� ��������� ����� �� �����, �� � ������������ �� ������� ����� (�� ������� ��).
����, ����� �����, ��� ���� ���������� - ��� ����� � �������: ��� �����, ����� �
���������� ���������� ��������. ��� �� � ��������� �������� ������ ���� ���� ���
������ � �������. ��� �� �������� ����� - ���� ������ �������� �����.

������� ��, ��� ������������ � lesson_1.js. � ����, ����, �� � ������ ����


lesson_1, �� ����� �� �������� �� �������� � ����� ������, � �� ������ �� ������
��� ���� ����.
�����:

var playerX = 5; //��������������� ��������� � �������� �� ��������


�������.
var playerY = 30; //��������������� ��������� � �������� �� ��������
�������.
var playerName = "RETARD"; //��������������� ��������� � �������� �� ���������
��������.
alert("Name: " + playerName + "\n" + "X: " + playerX + "\n" + "Y: " + playerY);
//����

���� �������� �������� �������� ����� ���������:

Name: RETARD
X: 5
Y: 30

��� �� ����������� ��� � �������� ������-�� ������ ����� ����, � ������� �� �����
�������� ���������� ����� ��������� � ������: ��� �� � ��� ����������. � ������� ��
������ �� ����� ���� ����������� ��� ��������������� ��������� ���������� �
���������. �� ��������. �� �������� ���� ������������ ������� �����.

� �� � �����? ��� � ��:

var a = 5;
var b = 5;
var c = a + b;
alert("a + b = "+c);

a = "5"; //���������� � ��������������� ������. ������ var ������ �� �����.


b = "5";
c = a + b;
alert("a + b = "+c);

���������� is pretty self-explanatory. ����� ������� ����. ��� "������������" �����


�� ������? "���������"? ���� �������, ��� "�� �������� ��������". ����������
�������� �� ������.

�����. �� ��� ����� ����� ��, ��� ���������� �� ������� ���.

��� ��������� ����� ����� �����, ��, ������� �����, � ������ ����� �������� �������
� �������� �������, ��� ��������:"��. �� ������� ��������� ���������� � �����������
�� �������. ���������� � ���� ���������� ������� �������������, � ����� �� ��������
�� �������, ��� �� ����� ��� �������� ����������� if"

����������� if, ������, �������� ���: ������ ������ ����� if, �����, ���������� �
�������, ������ (�������), ����� ���� ��������, ������� ��������� ��� ���� �������.
������� �����, ��� �����!

if (�������) ��������;

var a = 1;
if (a == 1) alert("��������");

��������� � ������ ������ ������ ����� ������ �� ������ "��������", � ��������


�������� ���������� a �������.
��� ������ ������ �� ��� �� �����, �� �� ����� ���� ����������� ���������� ��������
������ ��������� ����������� ����. ��� ����� ��������� ������ ���� �� ����
��������: true (������) ��� false(����). �� ����� ����������� ���� ������:

var a = true;
alert(a);

���� ��� ����� ��������� � ���������� ����� ��� ��������� (� ������ ��� �������
������� �����, �� ����� �� ����������� ������� �, ��������, ������� �� ����, ������
������� � ������� ����� if � ������ ���������):

var a = 5;
var b = 10;
var c = (a > b);
alert("a ������ b? ���������� �����: "+c);

��� ���. ���� � ���������� � ������� � if �������� true, �� �������� ���������� ��


��� ���������. ���� ��� - ��� ����� ���������������.

����� ������ ���������� ���������:


== - �����
!= - �� �����
> - ������
< - ������
>= - ������ ��� �����
<= - ������ ��� �����

��� ��������� ������ ��������� ������� �������� �� �����, ���� ��� � ���������.

���� �� ���� ��� ���� ��������� ����� ��������� ������� ���� ���������� � ������
�������� ����:

|| - ���
&& - �
! - ��

��������:

var a = 5;
var b = 10;
var c = 15;
if ((a == 5) && !(c == 30)) alert("��� ������� ������ �������� true, \n��� ��� a
������������� ����� ���,\n � c �� ����� ��������!");

�� ���, ���� ����������. � ����� ������� ����� ����� ����� � ������ ���� �������
������ ������ ���, � �� �����.

"������" � ���� ������, � ������� � �������� ����� ����� � ��������� ���-�� �������
�� ����. ��� � ������ ������� ����� ������ ������� � �������� ������� ��� ���� ���
�� ��������.

������� ��, ���� ��� �� �� ���� ������� � ���������� � ���� lesson_1.js ��������:

var canvas;
var context;

function update()
{

}
window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");
setInterval(update, 100);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

��������, ��������, ������? �� ����� ��� �� ��� ������ ������ ������� �� ����!
����, ��� ��, ����� if!

���� ��� ������ ��������:

var canvas; //�������������� ���������, � ������� ����� �������� "�����"


(��������, ��� � ����������) �� //�������� �� ��
var context; //�������������� ���������, � ������� ����� �������� ��������. � ��
���� �������� ������� ��� ���,
//��, ������ �����, � ������ ���� ������������ ������� ��������.

function update() //��� �������� ������� update(). ������ ������ �������, ��� � ���
������ �� �������� �������
{ //����������, ���, ��������, � alert �������� ������, ������ ���
������� �� ���������� ����.
//�������� ������ ������� ��� ��������� ������ ��������, �������
��� ������, � ��� ��
} //������������. ������ ��� ������ �� ������ ������, �� ��� ������
������� ������� ����.

window.onload = function() //����� ������, ������� ����������� ��� ������ ���������


��������, �������� �
//lesson_1.php, ������������ ������. ������ ����� ���
������ �������� ��������� ��
//����� �������� �������� �������:

{ //��� ������ ������ ���� ��������. ������ ����� ��� ��������� '������������
������'. ���� ���������� �������
//������ ���������� ���. ���� ����������, ��� �� ����� if ����������� ������
����� �������
//���������� ����� ���. ������, ���� ���� ���������� ������ �������� � ���� - ��
���� ���� � ����� ������.

canvas = document.getElementById("game"); //� ���������� canvas ������������


������� canvas, ��������� ��
//��������. ���� ������� lesson_1.php,
�� ����� �������, ��� � ���
//��� �� game.

if (canvas.getContext) //��� �������� ����������� �������� ��������� ������. ��


����� ���� � ����� �� ������
//��� ��� �� ���� ����������� ��������� �� �������������.
��, �����, ����� ���������
//������ IE.
{ //��� ��, � �� � �������. ��� ���� ������� ����� ��� ���� �������� ��� �������,
��� �� ����� �������� ��������
//��������� �� ����� ������� ������, ��� �� ���������� ��� ������� �������.

context = canvas.getContext("2d"); //�������� "��������". �� ���� ������ ��� ���


������.

setInterval(update, 100); //������ setInterval �������� ����� ������ (������


�������� � � �������) ������
//����������� � ������������ �������� ������� (������
��������, ���������� �����
//�����. ��� ��������� ������� ��������� �������).
����� ������� ��
//����������� ����� ��������� ������ 100 ����������
(����� 0.1 �������) ��������
//������ update(). ���� ����� ����� ��������: ������
update ������� ���� � ��� (����)
//������ �� ������.

} //������ ����������

else //����� else ������ � if, ���� ���� ������� ����� ������� ���� ��������, ����
��� �������
//������ ��������� ������. � ���� ������: ���� �������� �� ����� ����
�������. ����� ������� �������� ������
//��������� � ��������, ��� ��� ��������� (��� ����� �������� �����������
������������� �� ����������� //�������, ��� ��� ��� ������� ������ �
���������).

{ //��� �� ����������. ���� �������� � ����, �� � �� ����� ������ ��� � ������.

alert("�� ���������� �������� ��������!"); //���� ����� �� �������� �����


�������� ������� ��� ������������.

} //������ ����������
} //���������� ������, ������������� ����� �������.

�� ������ ���� ���� ������. �� ������������� ������������, �������� �� ����������


������, ������������ ������������ ��� ���������� "����������� ������". ������
����������?

��� ������: http://geekworksllc.com/images/posts/egyptian-brackets.png

���� ����-�� ��������� �� ������ - ��� ���: ��� ��������.

� ���� ��������� ������ ������ ��� ����������. ‫������ ���������� ����� ���� ���׸‬
������������ ����� ����������. �������� �� ������������� ��� ������� ������ �����.

�������� ������: ���� ������� ������ ���������� ������ � ������� � ������ �������
����. ������ ������ ����� ������� ��������. ������ � �������� - �� ����������
���������� ������ � ������� (�������, �������!). ������ - ���� ����� � ���
��������� ����, ��, ������ ����� (�� �� ����������), �� ����� ���������� ����.

� ������ ���� ����� �������� �������� �����:


1.������ �������� �� ���������.
2.���-��, ��� ������ ���� ��������, �� �������.
3.������ ������ ������� ����.
4.�������� ���������, �� �� ������ ������ �� ����� ���������� ������.

��������� ��� �������� �������. ��� ����� ��� �� ��������?

�����-������� (���� ������� �����) - ������ ������ ������� � �������� � �������


"����������������� �������". ����� ������� ������, � ������� ���� ���������� ��
������� "������". ���� ������ ���� ���� �� ���������, ����� � ���������. � ��������
������� � �������� ������ �� ������ � �������� ������. ���� ����� �� �������, ��
����������� �� ���� ������ ����� ������� �������� ������ ��� ������ �����.

���� ������ ����, �� ����� ������ ���������������� ��������� �������� � ���� ����,
��� �� ���������� �� ���������� �� ��� �������� ����� �����. � ������ ��� �� ���
��� ���� ��������� �� ���������� �����. ��� ������ ��� ���������� - ������ �������
� � ���� ���������.

����. ������ FPS.

�����. ��� �� � ����. �� ���� ���������� �����������. �� ���� ��� ����������. ����
������ �� ��������� ��������. ��� �� �������� ��������� ���� ������ �������� ����
�������� ������ � ������� ������. ���������� ����� ������� �� ����� ����,
���������� �� �����, ���������� ����� ����� ������� �� ������� ������ �������,..
�������� ��� ������������������ �� ���� � ����� ������� ����� ��� ����� ������.

�������� �������� - ����� ����� ����. �����-������� ������� �������� ��� �������
����� �������� ������ ������� update:

context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

� ����� ������ ��������� ��������. �� ����� ����� ������� ��� ������ ���������
������� �� �������� ��� �������:

var canvas;
var context;

function update()
{
context.fillStyle="#FFFFFF"; //��� ������� �� ��������
context.fillRect(0,0,canvas.width,canvas.height); //��� ������� �� ��������
}

window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");
setInterval(update, 100);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

���� ��� �������� ��������, �� ����� �� ������ ��������� �� ����������, �� �� �����


���� ��� �� ���.

context.fillStyle="#FFFFFF"; //��� �� ����������� "���������" ����� ���� "�������".


���� ��� � ��:
//�������������� ������ ��� ��������� ����� ����
������� �� ��������� (��� ���������
//stroke), ���� "������" (��� ��������� fill). ��
����, ��� �� ������ ����� ������
//������ ���� ����������� ���� "�������".
//���� ����� ������ ��� #FFFFFF - ��� �
����������������� ���� ��� ���������� ����� ����
//����� ��������� "���� ������" � ����� ��� �����
������, � ����� ���������� ������
//��� ��� �������� � ��������� ����� � ����� �� ������
������.

context.fillRect(0,0,canvas.width,canvas.height); //��� ������ ��������


�������������. �� ���������� � ������
//�������� ���������, �������
���� �� �������� ���������� ���
//����� ������ ��������-
������������� ���������.
//����� �� ��������� "������"
������������ ������ �����.
//�������� �� ����������� �
�������� ������ ���� ������
//(������ ��� ��� � �������
������� �� ���, ��� ������������
//���������� � � y, ������ �����
����� � ��������, � �� �
//������� ������ ���� ������) �
������ � �������
//����� ������������� ������ ����
����� ������ � ������ ������.

������ ����� ����� ������� ����� ���� �� �������� ���:

context.fillRect(0,0,1024,768);

� ���� ��������� �� ����������� �� ���� ���������, ��� ��� ��� ������� � ��


���������, � ��� ��, ��� ��� �������� ������� "��������" �� ���������� �� ��������,
� ��� ������ � ������ ������ ��� ����� ������� "�����", ���������� ����� �����.

�� ���������� �������� �� ���� ������������ ������� �������� ������ �����:

var canvas;
var context;

function update()
{
context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

context.fillStyle="#000000"; // <<--------------- �� �������� ���


context.fillRect(50,30,10,20); // <<--------------- �� �������� ���
}

window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");
setInterval(update, 100);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

�����-������� �� �������, ��� ���� �������, ����� ���� ��� �� ��������� �� �����,
������ �����. � ����� ��������� ���������� ������������ ���������� �������� ������
������ ��������: 50 �������� �� ����� �������, 30 �������� �� ������� �������; �
������ � ������ ������������� 10 � 20 ��������.

�������� �����. ����� ����� ������.

�, � ��� �������� �� �������:

var canvas;
var context;

var x = 50; // <<------------------------------------------------ �� �������� ���

function update()
{
context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

context.fillStyle="#000000";
context.fillRect(x,30,10,20); // <<----------------------------- �� �������� ���
x++; // <<------------------------------------------------------ �� �������� ���
}

window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");
setInterval(update, 100);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

�������� �������� - �����. ����, ������, ���������������� ������, � ������� �������


����� ������������ �� ���� �����, �� ����� ������� ��� ���������� ������� ���� ����
��������� �� ������� � ������� - ��� ��� ����� ������������ ��������������� ������
���, �� ��� ���������� ��������� �� ��������.

��������� ��������, �������� �������:

������� ����� ���� - � ������ �� �������������� ��������� � � ���������� � ��


�������� 50 - ��� ����� ������������� ����������, � ������� ��� ����� ������������
����� ���� ����.

������� ����� ��� - ��� ��������� ������ �������������. ������ ������ ����� ��
��������� �������� ��������� x. �����, ������� � �� ��������, ���������� ����������
�� �����������, �� ������� �� ����� ��������� ��� ������� ���� ������ ���, �����
��� ����� ��������.

������� ����� ��� - ��� ���������� ���������� x �� �������. ���� ������� ���������
����������� � ����������� �� ����, ��� �� �������� �����. ��� ������� ����� ���� ��
�������� ��� � ����� ����:
x = x + 1;
�� �� ����� �������� ����� � ����� ���������.

���������� ������� update, ��� �� ������� ����� (������ "setInterval(update, 100);"


) , ��������� ���� ��� � 0.1 �������. ����� ��, ���������� ������������,
����������� ���, �����, ����������, �����������, �����, ����������, �����������,..

FPS! Frames per second!

�������� ����� �������� FPS �� ����� ������ �� � ������ �������� FPS, � � ������
�������� ����� ������. ��, � ��������� ������-������� ��� �������� ����� �����
������, �� ���� � ���, ��� ����� ���������������� ���������� ���������. ��� �������
� ����� ������ � ������ ������ �� ������ � ������. �� ����� ���� ����� ������ ����
�� ��� ������ �������, �� � �� �� ���.

�� ����, ��� �� �������� ����� �� �������/�����/������... ������ ��� �� ������ ����


������ �������� - ��� �� ����� ��������� ��������� ����. ������ ��� ��� ����� ����
�����������.. � ��������� ������ ��� ������� �������� �������:

context.font = "12px sans-serif";


context.textAlign = "right";
context.textBaseline = "top";
context.fillText("FPS", canvas.width, 0);

���� ������ ����� ����� ���� �������, ������� ����� ��������� ����� ��. � ������
������ ��� ������� ������ �����-��-�������� � ������ � 12 ��������. ������ �
������� � ����� ���� ������ ������������:"The font property uses the same syntax as
the CSS font property." ��� � �������� �� ������� ���� ������:"������ ����� CSS,
����!"

��, ��� ���� ������ ����� ������������. ���� � �������, ��� ������ ��� ��������� �
�������, ������� �������������, ����� ������ �������� ������ ���� ������������. ���
����� ������� ����� ���� ����� �������. ��� ��� FPS ��� ������ ������������ ���
����� � ������ ������� ���� - �� ������������ ��������� �� ������ �������.

�� ���� - �� �� ������, ������ �� ���������. � ������� "top". ���� ���������� �


���������� �������� ������, ��� �������� �� ����� ������������ ������� ������ �����
������.

���������� ������� ������ �������� �� ��������� (��� �������� fill, ��� � � �������
���� - "�������") ����� ����. ��� ��� ���� ����� �� ���� ���������� � ������ ������
���� ����� "FPS" � �������� ���������� � ������� ������ ���� ������.

������� ������:

var canvas;
var context;

var x = 50;

function update()
{
context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

context.fillStyle="#000000";
context.fillRect(x,30,10,20);
x++;

context.font = "12px sans-serif"; // <<----------------------------- ��


�������� ���
context.textAlign = "right"; // <<----------------------------- ��
�������� ���
context.textBaseline = "top"; // <<----------------------------- ��
�������� ���
context.fillText("FPS", canvas.width, 0); // <<----------------------------- ��
�������� ���

window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");
setInterval(update, 100);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

���� �������� �������� ����� ��������, ��� � ������ ������� ���� ������ ��������
������� "FPS".

������ ���������� ���������� ������ � �������. ��, ���� �� ������ �� �������, ���
����� �������� ����� (�������� ������ update) ��� � 0.1 �������. �������������� FPS
= 10. �� �� ���� �� ����� ��������� � � ������� ���� ������� ���� �����, ��� ��
��������� �.

��� ���� ������, ��� �� ������ FPS? ���� ������ ���� ����� �������� ������� update.
��������� ��� ��� ���� ��� ����������: thisTime � pervTime.

perv - ��� �� ����� previous (����������), � �� �� ����� pervert(����������).

� ������ "�������� �� �����":

var canvas;
var context;

var thisTime = new Date().getTime(); // <<----------------------------- ��


�������� ���
var pervTime = thisTime; // <<----------------------------- ��
�������� ���

var x = 50;

function update()
{
thisTime = new Date().getTime(); //
<<----------------------------- �� �������� ���
var diffTime = Math.floor(1000 / (thisTime - pervTime)); //
<<----------------------------- �� �������� ���

context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

context.fillStyle="#000000";
context.fillRect(x,30,10,20);
x++;

context.font = "12px sans-serif";


context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0); // <<-----------------------------
�� �������� ���

pervTime = thisTime; // <<-----------------------------


�� �������� ���
}

window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");
setInterval(update, 100);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

����� ����� ������ ��������. ��������: ��� ������ "new Date().getTime();" ?


� ������������� ���� ����� ����� �����-������ ��������: Array, Date (<--��� ���),
Math, String.
�� ����� ���� ���� � ��, �� � ��� ������ ���� �� �����.

��������� ��� ��� ������ ������� ������������ ����� ���:


http://www.w3schools.com/jsref/default.asp

� ��, ����. ��� ������� � �� ���������. ����� �� �����: ��� � ������� ������ ����
�������� ����� new. ��� �� �������������� ��������, ������ ����� � ������ ����
�������� � ����� ����� ����� �������. �� ����� ������ ����� ��� ������, �����
������������ �������� ���������.

������ ������� Date().getTime() ���������� ���������� ����������, ������� ������ ��


������ ����� (�� ������� ����� 1970 ����).

����� ������ ����( getMonth() ), ��� ���( getFullYear() ), ���, ���, � �� ���, ����
���� ( getHours(), getMinutes(), setSeconds() ). �� �� ������ ���������� ����������
�� ������ ����� ( getTime() ).

������ ����������� ������ update. ��� � ������ ����� ��� ������ �����. �����-
������� �������� ����.
� �������� ������ ����� �������� ��� � ������������ ��������� diffTime. ����
���������������� ���������� ������ �������, �� ��� ����� ������������ ������ ������
�������. ��� ��������� ��������� ����������.

� ����� �� ���� � ������������� � ��������� �� ��������: ���� ������ (��� ����


�������) ��������� �� ������� ����� ����� ���‫������� ����ר‬. ��, ��� ������. ����
��� ��������� � ���� ����� ������� update. ���� ��� � ����������.

Math.floor(�����-�� �����). ��������! ��� �� ���� �����-������ ������. � ����


������ ����� ������ ����� �� ����������. ������, ���, ��������, �� �����.
������ �������� ������ ������� Math:
http://www.w3schools.com/jsref/jsref_obj_math.asp
�����, ����� ������ � ����� �����. ��� �� �� ������ ������ ��� �� ������ ����������
������������� ���������� ��� �������� ���� � ��� �� ����.

Math.floor, ������, �������� "���������� ����". �� ���� ����������� ������ ����� ��


�����.

����� ������ ����� �� ������� ����� ���������? ���� ����� �� �� �������� - �������
����� �������� ��� ���������� ���������� ����� ���� ��������. ��� �� ������ �������
��� ��� ���� ��������� � ���� ������� (����� ����������) ���� � (�������) ���������
�� ��� �������.

� �������� "������" ������ �� ������� ��������� ���������� � ������ ������� ����, �


������ ����������� ����, ������� �� ��������� � ���� ��� ���������� pervTime -
����� ���� ��� ������ ���������� ������ ��� ���� �� � ����� ��������.

������ � ��� ������ ������ � ����� �����? ������ ��� ���� ����� ������ �������
update ���-�� ����� �� ��� - ������ fps ����� � ����.

��������� ��������� �� ������ � �������: � ���������� ����� ���, ���������� �����


������� � ����� ������ � ��������� ���������� ������.

�������� �� �����:

var canvas;
var context;

var thisTime = new Date().getTime();


var pervTime = thisTime;

var FPS = 30; // <<----------------------------- �� �������� ���, ��� ��� �����


��������

var x = 50;

function update()
{
thisTime = new Date().getTime();
var diffTime = Math.floor(1000 / (thisTime - pervTime));

context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

context.fillStyle="#000000";
context.fillRect(x,30,10,20);
x++;

context.font = "12px sans-serif";


context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0);

pervTime = thisTime;
}

window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");
setInterval(update, 1000/FPS); // <<----------------------------- �� ��������
���
}
else
{
alert("�� ���������� �������� ��������!");
}
}

��� ����� ������� ��������� ��� ����� �� ���� ������, ��� �����������, �� ���
�������, ���� ���� ��� ����, ������ �� �����.

� �������� 30 fps ��� ���-wannabe-����������. ��� ������ ��� �����: 30 � 100, ��


100 - ��� ������� ����� ������.

������ � ���� ������� ������� ����� � ���������� ��� ��������� ������� ��


���������� � ����, ������ ��� ��� ������� ����������, ��� ��������, ������, �����
��� �������� ������� ������������ �������. ����� ���� ����� ������� � ��
������������ ���������������� � ������������, �� ���������� ���� ��� �����������
����� �� ����������� �� ������ (������ ����� ����� ��������� ���� ���������, �� ��
����� ������ ���, ��� �� ����������� � ��������� ��������� � ZPG) ����������.

��� �������������� � ���������� ����� ������������ �������� ������� �������


������������� ������.

������ ������� ������ � ������ ����� ������ ������������� � ���������� ����� ���
������ �������.
����� ������� ������ (������), ������� ��� ���������: �� ������� ������ �����, ��
���������� ������ �����, �� ����������� �����, �� ������� ���� ������� ����������
�, ��������������, �� ���������� ���� ������� ����������.

���� �����, �������� ���� ����� �������������, ������, � ���� ��������� ���
�������. ��� ��� �����, ������� ����������� ����� �������� ���������� ��������.
������� � ���� ��� ������:

var canvas;
var context;

var thisTime = new Date().getTime();


var pervTime = thisTime; //��� ��� �������� � ������������ ������ � "����������"
����� "previous".
//� �� ���� ��� "pervious" ���������� ��� "�����������",
"��������� �����"

var mousePressed = false; // <<------ �� �������� ���, � ����������� ����������, �


������� ����� ����� ����
var mouseX = 0; //� ���� ���� - ���������� ����� ������ ���� ���
���������
var mouseY = 0; //� ���������� ��������� � ��� ������ �� ���
var keys = new Array(); //� ��� ������ ������. ������ ������� ������� �����
���������� ������ ������ ��� ���.

//� ��� ������� �� ���������, �� ���� � ���� ������ - ��� ��� ������������
��������� ������� ����. �������� -
//���� ����� ����� ����������, � ������� ���� ������. ������ ���� - ��� �������
����������� ������� ���.
//���� ��� ����� �������� ���� ��� ������, �� ������ �������� ���������. ����
�������� ������ ���� �� ��� - �� ��
//����������. ���� - ����������. �������� ������ ���� ������ ��������� � ����� -
��� ��������� ��� �����.
//������ ����� ���������� � ��� - ������ ������� ������ (�� �� ������, �� ����� ���
������) ��������� � ���
//������ ������ ��� ���.

var FPS = 30;

var x = 50;

function update()
{
thisTime = new Date().getTime();
var diffTime = Math.floor(1000 / (thisTime - pervTime));

context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

context.fillStyle="#000000";
context.fillRect(x,30,10,20);
x++;

context.font = "12px sans-serif";


context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0);

pervTime = thisTime;
}

window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");

canvas.onmousemove = function(e) // <<------ �� �������� ���. � ����


�� ������� ������� ����� ���
{ //������� ������, � ������� ��������
� ���������� ������������ �����
mouseX = e.clientX - canvas.offsetLeft - 1;//������ � ���������,
����������������� ����. � ������ � �����
mouseY = e.clientY - canvas.offsetTop - 1;//�������, ��� �������� ������� � �
��� �� ���� ������.
}
canvas.onmousedown = function(e) //��� ������ ������ �� ������ ����� -
�������, ��� ��� ������ �� ����
{
mousePressed = true;
}
canvas.onmouseup = function(e) //��� ������ ��������� � - �������,
��� ��� �� ������ �� ����
{
mousePressed = false;
}

for (i=0;i<225;i++) {keys[i] = false;} //��� ��������� ���� ������ ������ �


�������� "�� ������"
document.onkeydown = function(e) //��� ������ �� ������� ������ ������
����������� ����, ��� ��� ������
{
keys[e.which] = true; //���� ������ �������� ����� ������ if
(keys[����� ������]) { ��������; }
}
document.onkeyup = function(e) //�� �� ����� �� ���������� ������.
{
keys[e.which] = false;
}

setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

�����. ������� ��������� � ����������� �������� ����� �� �����. � ������ ������ � �


����� ������� ����.

����� ��� ��������� ����� ������� ������ � ������ ������������!!!

var canvas;
var context;

var thisTime = new Date().getTime();


var pervTime = thisTime;

var mousePressed = false;


var mouseX = 0;
var mouseY = 0;
var keys = new Array();

var FPS = 30;

var x = 50;

function update()
{
var i; // <<------------------------------------------------�������� ��������
��������� i, �� ������������ �
thisTime = new Date().getTime(); //� ����� for.
var diffTime = Math.floor(1000 / (thisTime - pervTime));
context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

context.fillStyle="#000000";
context.fillRect(x,30,10,20);
x++;

context.font = "12px sans-serif";


context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0);

context.textAlign = "left"; // <<---------- �� �������� ���. ������ � ����


����������� ����� �� ������ ���, ���
//�� �� ������ ������� �� �������� ����� �� ������ �
����� �� ������ ����� ��� ������

context.fillText("mouseX: "+mouseX, 0, 0*12); //��� �� �������: � �������� �������


����� ��������� ������� ������
//� ��� (� ��� ������ ����), ���
������ ���� - 12 ��������
//�������������� ����� �������
������ ����� �� 12 �������� ����
//����������. ������� � ���� ������
0*12, ����� 1*12, ����� 2*12
//� ��� �����, ��� �� ������ ��
����������� ������� ������ �� y.
context.fillText("mouseY: "+mouseY, 0, 1*12);
context.fillText("mousePressed: "+mousePressed, 0, 2*12);

//� ��� ��� ����� ���� �����, �� ������ �� ������ � �� �������� ��������� � ���
����� ������ ������?
//��� ����� ������ �������, ���������� �������� ������� �� ������� keys � ��������
//����� �� ��� ��������� ����� true. � ����� �������� ����� ��������������� �����
������ �� ����������.
//��� �� ������� ����� ������ ����� ������ ������������ ����� ���� ��������� "����
������", ���� �������� �
//����� ���� ������, ���� �� ������� ��������� � ������� ������� � �����������
����.

var keysPressed = "keysPressed: "; //�������� ���������� (���� ��������


���������),
//� ������ ����� ���������� ���� ���� �������
������
//�������:"������ ����� �������� ����� ���
�������, � �� ����?"

for (i=0;i<225;i++) //���� for, ������ �������� �������, ����� � �������� ������
�, ������ ����, ������������
//����������-����������. � ������ ������ �� ��������� � ����,
��� ��� ����� ��� (i=0)
//� ���, � ������ ����� ����������� ���� ��������,
������������ �� ������� (i++)
//� ��������� ��� ����� �� ��� ���, ���� ��� ������ 225
(i<225)
//����� ��� �������� ��� 225 ��������� ������� keys, ������ �
0-�� � ��������� 224-��
{
if (keys[i]) //���� ������ ������, �� � ����� ���� �������� � ����������
{
keysPressed = keysPressed + i + ", "; //����������
}
}
keysPressed = keysPressed.slice(0,keysPressed.length - 2); //�������� ������
������ � ����� �� ������, ������
//����������. ���
��������� �������, �� ������������
//���������� ���
�������� ����� ������ ��� �� ����
//������:
www.w3schools.com/jsref/jsref_obj_string.asp

context.fillText(keysPressed, 0, 3*12); //����� ��� ������ �������� - ������� ���


������ �� �����

pervTime = thisTime;
}

window.onload = function()
{
var i; // <<--------------------------------����� ����� ���������������� ��������
��������� � ������� ��� ����
canvas = document.getElementById("game"); //���� �� ������ ���������� ��� ��� �
������ �� ������ �������
if (canvas.getContext)
{
context = canvas.getContext("2d");

canvas.onmousemove = function(e)
{
mouseX = e.clientX - canvas.offsetLeft - 1;
mouseY = e.clientY - canvas.offsetTop - 1;
}
canvas.onmousedown = function(e)
{
mousePressed = true;
}
canvas.onmouseup = function(e)
{
mousePressed = false;
}

for (i=0;i<225;i++) {keys[i] = false;}


document.onkeydown = function(e)
{
keys[e.which] = true;
}
document.onkeyup = function(e)
{
keys[e.which] = false;
}

setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

�������� � ����� ������� ������ ����� ������ ��� ��������� ������ ����� �������
����� ����.

var canvas;
var context;

var thisTime = new Date().getTime();


var pervTime = thisTime;

var mousePressed = false;


var mouseX = 0;
var mouseY = 0;
var keys = new Array();

var FPS = 30;

var x = 200;
var y = 200;

function update()
{
var i;
thisTime = new Date().getTime();
var diffTime = Math.floor(1000 / (thisTime - pervTime));

context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

context.fillStyle="#000000";
context.fillRect(x,y,50,50);

// x++; // <-----------------� ������� ��� ������ �������������

context.font = "12px sans-serif";


context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0);

context.textAlign = "left";

var keysPressed = "keysPressed: ";

for (i=0;i<225;i++) {if (keys[i]) {keysPressed = keysPressed + i + ", "; } } //


<-----� ���������� ��� � ������,
keysPressed = keysPressed.slice(0,keysPressed.length - 2); //
��� �� ��������� �������� ��������

context.fillText("mouseX: "+mouseX, 0, 0*12);


context.fillText("mouseY: "+mouseY, 0, 1*12);
context.fillText("mousePressed: "+mousePressed, 0, 2*12);
context.fillText(keysPressed, 0, 3*12);
if (keys[87]) { y--; } //� �������� �� ������ w, a, s, d ����������� �����������
������ �������� �� ������
if (keys[83]) { y++; }
if (keys[65]) { x--; }
if (keys[68]) { x++; }

pervTime = thisTime;
}

window.onload = function()
{
var i;
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");

canvas.onmousemove = function(e)
{
mouseX = e.clientX - canvas.offsetLeft - 1;
mouseY = e.clientY - canvas.offsetTop - 1;
}
canvas.onmousedown = function(e)
{
mousePressed = true;
}
canvas.onmouseup = function(e)
{
mousePressed = false;
}

for (i=0;i<225;i++) {keys[i] = false;}


document.onkeydown = function(e)
{
keys[e.which] = true;
}
document.onkeyup = function(e)
{
keys[e.which] = false;
}

setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

������ ��� ���������� � ������ ������� �������� � ����� �� �������� ��, ����������,
������� ������ � �� ��������. ����� � �������. � ����������, ����� �������������,
�������, �������, � ������� �� ��������� �������� �� ���������, ����� ���������
�������� ������.

��� ����� ��������� ����� ���� ������� ��� �����? ����� �� � ����� �� ������
��������� ����. ������ ������ ������. �� ���, ��� �����, ��������:

��������� ����� ���� ������� = ������ ���������� �� ( x1 - x2 )^2 + ( y1 - y2 )^2


���� � ����-�� ������ ����� � ���� ������ �� ������ �� ��� � �������� �����, �
������� ��������� ����� ����� � ������. ���� ��� ��������� ������, ��� ������
�������, �� ��� ����� � ��� ���� � ������� ��� ����.

������� ����������� �������� ����� ���� ������� � ���� �������:

function getDist(x1,y1,x2,y2)
{
return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
}

Math.sqrt(�) - ��������� ������ �� ����, ��� � �������


Math.pow(�,�) - �������� � � ������� �.

����� ��� ������� ������� �������� ���:

function ���������(���������) _���� ����� � �������_


{

�����-�� �������

return ��, ��� ������ ����������;


}

����� � ����� � ����� � ���������� ������ ����� ������, ��� ������ "����������"
��������. ������� ������ �� ���� ���������! ��� ������, ��� �� ������� ������
������ ����� ������ �� �������, ��� � � ����������.

� �������� ���, ����� � ���� ������ � ����� ��������� getDist � ������ ����������-
��������� � �������, ��� "�����" ��� ��������� ����� ����� ������������. �� ���
�������: ������ ����� ���������.

�� ���� ������ �� must have ������. ���� ���������, �������, ���� ������:

function getAngle(x1,y1,x2,y2)
{
if ((x2 >= x1) && (y2 <= y1))
{
return Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 <= x1) && (y2 <= y1))
{
return 180 - Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 <= x1) && (y2 >= y1))
{
return 180 + Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 >= x1) && (y2 >= y1))
{
return 360 - Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
}

��������� ���� ����� ���� �������. ����� ���� �������: "�����, ����� ���� �������
����� ���������� ����, ������ ��� �������� ����, � ����� ���� ��� ������� ���, ���
�� �������� ����!" ������ � � �����, ��� ��� �������� �����������.
_________________>
| x
| .b
| /
| /
| / �����
| .a_____
|
|
V
y

������ ��� ������ ���������� ���� ����� ��� ����� ���������, ��� � ���������
��������� ������ ��� ������.

������ if-� ��������� � ����� �������� �������� ������� ����.


Math.atan - ��������� ����������.
Math.abs - ���������� ������ �� ����� (����������� ���� �����, ���� �� ����)

��������� �� 180/Math.PI ����� �� ����, ��� �� ���� ���������� � ��������. ��� ���,
�� ����� ������, ���������� �����������, ������ ��������������� ���������
���������, � � �� �� ������ � ������ ���� ��������� � ��������. �������� � ���, ���
��� ����������� ����� ����� ������� � ��������� ��� ���� ����� �������� �� �� �
��������� �� 180, ��� �� ����� ���������� � �������.

� ��� ������������ ���������, � ���� ���� ��������� ��� ��������! :)

������ �� ������: ���������, ������� ��������� � �����, ������ �����. ������ ���
���������� ��� ����������� �������� � ������� � �������.

���� ��������� � ��������� �� ����� �������, ��� ��� � ��� �������� ��������, �
��������� ������������� � ��� �� ���� �������� ������:

a = b
c = d
a*d = c*b

� ������ � ���������/��������� ���� ������� ��������: �� - ��� 180 ��������.


ProTip: ���� ������ ��������� ��, ��� �� - ��� 180 ��������, ��, ��������, �����
����� ���������, ��� 360 �������� ��� 2*��.

a = b, � ����� ������, ��� 180 = �� ��� 360 = 2*��


����� ������� ��������� ������� ����� ������� � �������� (� ��������) ���������
����� �������.
���� �������� ������� � �� ���� ���������� � �������, �� ������� ���� ���������� �
����� c � ������ ��������� � ������� �������� � ����.
���� �������� �������, �� �� ���� ���������� � ����� d � ������ ��������� � �������
�������� � ����.

���������� �� ��������. � ������� �� ������������� ������� � � �������� ���


���������� �������:

var canvas;
var context;

var thisTime = new Date().getTime();


var pervTime = thisTime;
var mousePressed = false;
var mouseX = 0;
var mouseY = 0;
var keys = new Array();

var FPS = 100; //� ����� FPS �� ����� � ������� ����� ��� �� �� ��� �
������. � ������ �� �� � ������.
//�������� ��������� ����� � ���������� ���������.
//���� � ���, ��� �� �������� ������� ��������� FPS. �� ����
������������ � ������
//��������� ���� ����, �� �������� FPS ����� ���������� �����
��� � �������!!!

var x = 200;
var y = 200;
var size = 50; // ����� ������� � ����������� ���������� �� �����. � ����
����� ������ ������ ��������.
var breathe = 0; // � ����, ��� �� �� �����
var breatheint= 0; // � ��� ���������� ��� �������
var inhale = true; // � �������� ������� �� ��� ���
var eyesize = 10; // � ����, ��� �� � ���� ���� ����� � ��� �� ������
var pupilsize = 2; // � ����, ��� �� � ���� � ������ ���� ������ � ��� �� ������
var blink = false;// � ����, ��� �� �� ������ � ��� ��������� ��������� ���
������� �� ��� �����
var blinkint = 0; // � �������� ���� � ���� �� ���� �� ������� ��� �����������

function getDist(x1,y1,x2,y2) //��� ���! ��� ��� ������� ���� �����!


{
return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
}

function getAngle(x1,y1,x2,y2) //��� ���! ��� ���!


{
if ((x2 >= x1) && (y2 <= y1))
{
return Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 <= x1) && (y2 <= y1))
{
return 180 - Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 <= x1) && (y2 >= y1))
{
return 180 + Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 >= x1) && (y2 >= y1))
{
return 360 - Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
}

function update()
{
var i;
thisTime = new Date().getTime();
var diffTime = Math.floor(1000 / (thisTime - pervTime));

context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);
context.fillStyle="#000000";
context.fillRect(x+breathe,y-breathe,size-breathe*2,size+breathe); //� ���������
"�������" � �������� ��������

if (blink) //���� ��� ������� �������, �� ���������� ���������� �������� �����


{ //������ ����� ���������� � �������� ����������������, ������� ��
�������� ����� �������
context.fillStyle="#FFFFFF";
context.fillRect(x+size/2+eyesize-eyesize/2
,y+eyesize-breathe+eyesize/4,eyesize+eyesize/4,eyesize-eyesize/2);
context.fillRect(x+size/2-eyesize-eyesize/1.5,y+eyesize-breathe+eyesize/
4,eyesize+eyesize/4,eyesize-eyesize/2);
}
else //���� ��� ������� ���������, �� ���������� �������� �������� �����
{
context.fillStyle="#FFFFFF"; //����� ���� �����, � ������ ����� ���� � ���� ��
//�������� �������� �����: ����� ���� ����
���������� �� ���� ���� � �� ��������
//�����, ��� �������� ��������. � ������ �� ��
�����, �� ��������. ����� ����������
//�� ���� � ��������� ���� ���������� ��������
������������� � ������� ������
//�����.
context.fillRect(x+size/2+eyesize - eyesize/2,y+eyesize -
breathe,eyesize,eyesize);
context.fillRect(x+size/2-eyesize - eyesize/2,y+eyesize -
breathe,eyesize,eyesize);

context.fillStyle="#000000"; //������ �����, � ����� ������ ����� ����

var eyeposx = x + size/2 + eyesize - pupilsize/2; //� ������


�������� ��������� �� ���������
var eyeposy = y + eyesize - breathe + eyesize/2 - pupilsize/2; //��������� ����,
��� ��� � ��� ��������� ��
//����������
��������� �������, � ��� ����� ������.
context.fillRect(eyeposx + Math.cos(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*
(eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,
eyeposy + Math.sin(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*

(eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,pupilsize,pupilsize);

//�����, ��������, �����: ����� ����� �� ������, ������� � �������� "�������


������" ���� �������� �������
//���� ����� ������ � "������" � �������� ��� �� "�����" �� ������ �� ������
������� �� "�������� �����".
//�� ��������� "������� ������" �� �� �� �����, ������ �����, ������ ��������.

//� ������ �������� ����� ������� eyeposx, eyeposy, ��� �� ������ ����������
����� � ������ �����, � ����� ������
//������� ������-��������, �������� ����������� ������.

//
// .----------------------->
// |
// | .b
// | dist / |
// | / |<--sin(getAngle(eyeposx,eyeposy,mouseX,mouseY))*dist
// | / |
// | .a____
// | ^
// | |
// | cos(getAngle(eyeposx,eyeposy,mouseX,mouseY))*dist
// |
// |
// V

//� ���������, ��� � ������ ���-�� � ������� getAngle � ���� ����� �������� -
getAngle, ��� �� �� ���� �� ��� ��
//� �������� ����� a ��� ���������� �����: eyeposx, eyeposy
//� �������� ����� b ��� ���������� �����: mouseX , mouseY

//������������ ����������� ������ � ����� - ��� ����������� �� ��������. �� ����


������ � �� ������� �� ���
//�������. �� ����, � �������� dist, ����� ���� �� ��������� eyesize/2, �� �����
������ ����� �������� �� ����
//����� � ������� �� ��������, ��������, ���� � ����� ������. ������� � �����
������� ���������, �� ������� ���
//������� ��������� �� �������� ������� ����� �� �����.

//������� �� ����� ����������!


//a=b
//c=d
//� - ��� ������������ �������� �������� ������ �� ������ ����� - �� ����
eyesize/2
//b - ��� ������������ �������� "�����" �� ������ �����. ��, ��� ������� ������
����� � ��� ���.
// � ����� ��� �������� �� 800. ������ ������ ��� � ��� �������.
//� - ��� �������� ������ �� ������ �����, ������� ��� ���� �����
//d - ��� ��������� �� ������ ����� �� ����� - �� ����
getDist(eyeposx,eyeposy,mouseX,mouseY).
//a*d=c*b
//c = a*d/b
//c = (eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800

//��� ��� � ������� ���� ������� �� ������� �������� ������ ������. �� ������� ��
�� �� �����.

eyeposx = x + size/2 - eyesize - pupilsize/2;


eyeposy = y + eyesize - breathe + eyesize/2 - pupilsize/2;
context.fillRect(eyeposx + Math.cos(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*
(eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,
eyeposy + Math.sin(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*

(eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,pupilsize,pupilsize);
}

if (breatheint % 10 == 0) //��� ������� �������� �� ������ ���������. ���� ������


�������, ��� a % b ��� �������
//�� ������ a �� b. �� ���� ����� ������� ��
breatheint/10 ����� 0, ����� ������� � true
//��� ������� �� ����, ��� � ������� �� ����� ��� ����,
��������� � �����
//� ��������� ������ ���������� Cyberdyne Systems
{
if (inhale) { breathe++; } else { breathe--; } //������� ���������� �� ����� �
�������� �� ������
}
if (breathe > 3) { inhale=false; } //������� �������
if (breathe < -3) { inhale=true; } //����������� ���� �� ����� � �������

breatheint++; //���������

if (breatheint > 500) { breatheint = 0; }//� �� �� ��������� ����� ����� �������


500 ������ ���.

blinkint++; //���������
if (blink) //� ������� �� �� ������, ��� � � ��������, ������ �������
�� ��������, � ����������� - ���
{ if (blinkint > 50) { blink = false; blinkint =
0; } }
else
{ if (blinkint > 200 + Math.round(Math.random()*1000)) { blink = true; blinkint =
0; } }

context.fillStyle="#000000";
context.font = "12px sans-serif";
context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0);

context.textAlign = "left";

var keysPressed = "keysPressed: ";

for (i=0;i<225;i++) {if (keys[i]) {keysPressed = keysPressed + i + ", "; } }


keysPressed = keysPressed.slice(0,keysPressed.length - 2);

context.fillText("mouseX: "+mouseX, 0, 0*12);


context.fillText("mouseY: "+mouseY, 0, 1*12);
context.fillText("mousePressed: "+mousePressed, 0, 2*12);
context.fillText(keysPressed, 0, 3*12);

if (keys[87]) { y--; }
if (keys[83]) { y++; }
if (keys[65]) { x--; }
if (keys[68]) { x++; }

pervTime = thisTime;
}

window.onload = function()
{
var i;
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");

canvas.onmousemove = function(e)
{
mouseX = e.clientX - canvas.offsetLeft - 1;
mouseY = e.clientY - canvas.offsetTop - 1;
}
canvas.onmousedown = function(e)
{
mousePressed = true;
}
canvas.onmouseup = function(e)
{
mousePressed = false;
}

for (i=0;i<225;i++) {keys[i] = false;}


document.onkeydown = function(e)
{
keys[e.which] = true;
}
document.onkeyup = function(e)
{
keys[e.which] = false;
}

setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

������� ��������� �������� � ����������, �����, �������, ������ �� ������ �


�������� ������������� ������.

���� ��� ������, �� ���� � ������ ������� ������, ��� ������ ��� �������� ����
������� ������ �� ���, ������� ����� ���������� � ������ �������� �������. ���
�������� �� ��� �������. ���� � ������.

��������� �������:
������ � ����

��_������� = function(���������, ������� ����� �������� ��� ��������� ��������)


{
� ����� ��� ��� �������� ��� ���������, ������� ��������� �� ����� this. �
�������� ������ ����������. � �������
����������� � ���������� ��� � ������ � ������� �� � ������ ���������. � �������
��������.
}

var canvas;
var context;

var thisTime = new Date().getTime();


var pervTime = thisTime;

var mousePressed = false;


var mouseX = 0;
var mouseY = 0;
var keys = new Array();

var FPS = 100;


blob = function(x,y) //��� ��, � �� � �������. � ������ ������. ������ ���
blob. ������ ��� � ������ ��� ���.
{
this.x = x; //����� � ������ ��� blob � ������ ��� ����������.
��������� ��������� �� ��� �����.
this.y = y; //�� � �� ����� ����� �������� ��. � ������ � ������, ���
����� ������� ���������
this.size = 50; //���������� ������� ����������, ��� ���������� � ������
����� �������� �� 500 ����.
this.breathe = 0; //� ���, ��� ��� ����� � ������ � ������� �������.
this.breatheint= 0; //����� "this" ����!
this.inhale = true;
this.eyesize = 10;
this.pupilsize = 2;
this.blink = false;
this.blinkint = 0;
}

blob.prototype.draw = function() //� � ������ ����� ����������� ����� ���������� �


������� ����������� ���-�� ������
{ //�������� � ������ ��� ���� ������� ��������
����� ���.
context.fillStyle="#000000"; //������������� ��� ��, ��� ���� � ������� update
� ������� �������,
//�������� ����� ��������� ����������
context.fillRect(this.x+this.breathe,this.y-this.breathe,this.size-
this.breathe*2,this.size+this.breathe);

if (this.blink) //������ �� ���� ���������� �������� this.


{ //� ������� ��� ����� ��� ������ ��� ��� �����
������ ��� ������� � ������� ����,
context.fillStyle="#FFFFFF"; //����� ��������� �������� ��� � ��� ����� �
�����.

context.fillRect(this.x+this.size/2+this.eyesize-this.eyesize/2 ,
this.y+this.eyesize-this.breathe+this.eyesize/4,this.eyesize+this.eyesize/
4,this.eyesize-this.eyesize/2);
context.fillRect(this.x+this.size/2-this.eyesize-this.eyesize/1.5,
this.y+this.eyesize-this.breathe+this.eyesize/4,this.eyesize+this.eyesize/
4,this.eyesize-this.eyesize/2);
}
else
{
context.fillStyle="#FFFFFF";
context.fillRect(this.x+this.size/2+this.eyesize - this.eyesize/2,
this.y+this.eyesize - this.breathe,this.eyesize,this.eyesize);
context.fillRect(this.x+this.size/2-this.eyesize - this.eyesize/2,
this.y+this.eyesize - this.breathe,this.eyesize,this.eyesize);
context.fillStyle="#000000";

var eyeposx = this.x + this.size/2 + this.eyesize - this.pupilsize/2; //�����


eyeposx � y ���� ����� this
//������
��� ��� �� �������� �����
//�������,
� ��������� ����������
//�
������� ������ �������������

//���������
var eyeposy = this.y + this.eyesize - this.breathe + this.eyesize/2 -
this.pupilsize/2;
context.fillRect(eyeposx + Math.cos(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*
(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,
eyeposy + Math.sin(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*

(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,this.pupilsize,this.pup
ilsize);

var eyeposx = this.x + this.size/2 - this.eyesize - this.pupilsize/2;


var eyeposy = this.y + this.eyesize - this.breathe + this.eyesize/2 -
this.pupilsize/2;
context.fillRect(eyeposx + Math.cos(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*
(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,
eyeposy + Math.sin(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*

(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,this.pupilsize,this.pup
ilsize);
}

if (this.breatheint % 10 == 0)
{
if ( this.inhale) { this.breathe++; } else { this.breathe--; }
}
if (this.breathe > 3) { this.inhale=false; }
if (this.breathe < -3) { this.inhale=true; }
this.breatheint++;
if (this.breatheint > 500) { this.breatheint = 0; }

this.blinkint++;
if (this.blink)
{ if (this.blinkint > 50) { this.blink = false;
this.blinkint = 0; } }
else
{ if (this.blinkint > 200 + Math.round(Math.random()*1000)) { this.blink = true;
this.blinkint = 0; } }

} //��� ������ ��������� �������� �������. ������, ��� �� �� �����������, ����


��� �������
//� ��� ����� � ������� init(), ������ ����� ���� ���� � ������ ����� �������
setInterval(update,1000/FPS)

function getAngle(x1,y1,x2,y2)
{
if ((x2 >= x1) && (y2 <= y1))
{
return Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 <= x1) && (y2 <= y1))
{
return 180 - Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 <= x1) && (y2 >= y1))
{
return 180 + Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 >= x1) && (y2 >= y1))
{
return 360 - Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
}

function getDist(x1,y1,x2,y2)
{
return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
}

function update()
{
var i;
thisTime = new Date().getTime();
var diffTime = Math.floor(1000 / (thisTime - pervTime));

context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

bobby.draw(); //� ���� ���� �����. � ���� ���� ������ �����������.


rupert.draw(); //� ����� � �� ����� ���������� ��� ������ ���, ��� ������ ����
������� ��������� � ����������
//�������.

context.fillStyle="#000000";
context.font = "12px sans-serif";
context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0);

context.textAlign = "left";

var keysPressed = "keysPressed: ";

for (i=0;i<225;i++) {if (keys[i]) {keysPressed = keysPressed + i + ", "; } }


keysPressed = keysPressed.slice(0,keysPressed.length - 2);

context.fillText("mouseX: "+mouseX, 0, 0*12);


context.fillText("mouseY: "+mouseY, 0, 1*12);
context.fillText("mousePressed: "+mousePressed, 0, 2*12);
context.fillText(keysPressed, 0, 3*12);

// if (keys[87]) { y--; } //�������� �������������� ������ ���������


// if (keys[83]) { y++; }
// if (keys[65]) { x--; }
// if (keys[68]) { x++; }

pervTime = thisTime;
}

function init() //������ init(). � ������ ������� ������������� �� �


��������� �������.
{ //�� � �� ���� ����� � ����� ������ ��������� ������
��� ��� �� �� �����������
//"��������" �� �������� �� ������ - �� ���������
�������� � ��������.
//����� ��� � �������, �� ��� ��� ���������.

bobby = new blob(200,200); //������ ��������� "�����" � ������ � �� ��������


������� ����. 200,200 - ���
//����������. �������������� ���� ����� ������.
rupert = new blob(800,200); //� ����� ���. �� ����� ����� ����� ����� ��������.
800 - ����� ����� ������.

//����� ������� bobby � rupert ���� ����� var ��


������, ��� ��� �������, � ������,
//��� ����� ��� ������ ���������� ����������� �
������� init() � �������� ��� ������ ���
//���������. ��� �� ����� �������� ����� �������
���������� ����� �� ����� � �������,
//������� ���-�� ��� ������� var bobby � var rupert,
�� ��� ��� ����������� ��������� ��
//������ � ����� �� ������.
}

window.onload = function()
{
var i;
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");

canvas.onmousemove = function(e)
{
mouseX = e.clientX - canvas.offsetLeft - 1;
mouseY = e.clientY - canvas.offsetTop - 1;
}
canvas.onmousedown = function(e)
{
mousePressed = true;
}
canvas.onmouseup = function(e)
{
mousePressed = false;
}

for (i=0;i<225;i++) {keys[i] = false;}


document.onkeydown = function(e)
{
keys[e.which] = true;
}
document.onkeyup = function(e)
{
keys[e.which] = false;
}

init(); //����� ������� init(). ��� ������ �������, ��� ���


����� �� ������� ��������,
//� ����� ����� ������:"������ �� ��������?!?!?!" ��
������, ��� ������ �� ������,
//��������, � ������� �����.
setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

������ ����-���� ��������� �� �������� ����.

���� ������� �������� � ���������� �� ���������, �� ����� �������� �������� �� ��,


��� ����� � ������ ��� ������������. ������ ������ ��������. �������� �����. �� ��
����� ���� ��� �� ����� �������. ������ � ��� �������,
� ������ ������ �� ���� �����, ������, � ������ �������� �, �������� ��� �����
���������.

�����-������� ������� ����� � ������� ���������� ���� �� ����� �, ������, ����� ��


��������.
����� ������ ������ �������� ������� ������� ���, ������� ��� ��� ���� "� �� �����
��� ���!"
"Unique doesn't mean useful"

var canvas; //�������� ������ ����������� ����� ������. �� ��� �� �������


������, � ��� �� �������� �
var context; //����������� ��������� ���������. � ������� ��������� ������
�����, ������� � ����� ����.
//��, ����� ���� ���, ��� � ����� ������.

var thisTime = new Date().getTime();


var pervTime = thisTime;

var mousePressed = false;


var mouseX = 0;
var mouseY = 0;
var keys = new Array();

var FPS = 100;

var selected = 0; //��� ��� ���������.

blob = function(x,y)
{
this.x = x;
this.y = y;
this.size = 40;
this.breathe = 0;
this.breatheint= 0;
this.inhale = true;
this.eyesize = 10;
this.pupilsize = 2;
this.blink = false;
this.blinkint = 0;
}

blob.prototype.draw = function()
{
context.fillStyle="#000000";
context.fillRect(this.x+this.breathe,this.y-this.breathe,this.size-
this.breathe*2,this.size+this.breathe);

if (this.blink)
{
context.fillStyle="#FFFFFF";
context.fillRect(this.x+this.size/2+this.eyesize-this.eyesize/2 ,
this.y+this.eyesize-this.breathe+this.eyesize/4,this.eyesize+this.eyesize/
4,this.eyesize-this.eyesize/2);
context.fillRect(this.x+this.size/2-this.eyesize-this.eyesize/1.5,
this.y+this.eyesize-this.breathe+this.eyesize/4,this.eyesize+this.eyesize/
4,this.eyesize-this.eyesize/2);
}
else
{
context.fillStyle="#FFFFFF";
context.fillRect(this.x+this.size/2+this.eyesize - this.eyesize/2,
this.y+this.eyesize - this.breathe,this.eyesize,this.eyesize);
context.fillRect(this.x+this.size/2-this.eyesize - this.eyesize/2,
this.y+this.eyesize - this.breathe,this.eyesize,this.eyesize);
context.fillStyle="#000000";

var eyeposx = this.x + this.size/2 + this.eyesize - this.pupilsize/2;


var eyeposy = this.y + this.eyesize - this.breathe + this.eyesize/2 -
this.pupilsize/2;
context.fillRect(eyeposx + Math.cos(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*
(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,
eyeposy + Math.sin(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*

(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,this.pupilsize,this.pup
ilsize);

var eyeposx = this.x + this.size/2 - this.eyesize - this.pupilsize/2;


var eyeposy = this.y + this.eyesize - this.breathe + this.eyesize/2 -
this.pupilsize/2;
context.fillRect(eyeposx + Math.cos(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*
(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,
eyeposy + Math.sin(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*

(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,this.pupilsize,this.pup
ilsize);
}

if (this.breatheint % 10 == 0)
{
if ( this.inhale) { this.breathe++; } else { this.breathe--; }
}
if (this.breathe > 3) { this.inhale=false; }
if (this.breathe < -3) { this.inhale=true; }
this.breatheint++;
if (this.breatheint > 500) { this.breatheint = 0; }

this.blinkint++;
if (this.blink)
{ if (this.blinkint > 50) { this.blink = false;
this.blinkint = 0; } }
else
{ if (this.blinkint > 200 + Math.round(Math.random()*1000)) { this.blink = true;
this.blinkint = 0; } }
}

function getAngle(x1,y1,x2,y2)
{
if ((x2 >= x1) && (y2 <= y1))
{
return Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 <= x1) && (y2 <= y1))
{
return 180 - Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 <= x1) && (y2 >= y1))
{
return 180 + Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 >= x1) && (y2 >= y1))
{
return 360 - Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
}

function getDist(x1,y1,x2,y2)
{
return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
}

function update()
{
var i;
thisTime = new Date().getTime();
var diffTime = Math.floor(1000 / (thisTime - pervTime));

context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

for (i=0;i<blobs.length;i++) //���� � ���� ����� �������������� ���� � �����.


{ //�������� �� � �� ����������
blobs[i].draw();
context.fillStyle="#000000";//����� ���� � ���� �������, �����������,
//��� ����� ������ ����� ����� ������ �������.
if (i == selected) {context.fillRect(blobs[i].x+blobs[i].size/2-5,blobs[i].y-
30,10,10);}
}

context.fillStyle="#000000";
context.font = "12px sans-serif";
context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0);

context.textAlign = "left";

var keysPressed = "keysPressed: ";


for (i=0;i<225;i++) {if (keys[i]) {keysPressed = keysPressed + i + ", "; } }
keysPressed = keysPressed.slice(0,keysPressed.length - 2);

context.fillText("mouseX: "+mouseX, 0, 0*12);


context.fillText("mouseY: "+mouseY, 0, 1*12);
context.fillText("mousePressed: "+mousePressed, 0, 2*12);
context.fillText(keysPressed, 0, 3*12);

if (keys[87] ) { blobs[selected].y--; }
if (keys[83] ) { blobs[selected].y++; }
if (keys[65] ) { blobs[selected].x--; }
if (keys[68] ) { blobs[selected].x++; }
if (keys[221]) { selected++; if (selected > blobs.length-1) {selected = 0;}} //�
������ ������� ��������� selected
if (keys[219]) { selected--; if (selected < 0) {selected = blobs.length-1;}} //���
��������� �������� �� ���������
//����� ����������, ����� �������� ������
�������. �������������� �� �� ����� ����
//������ ��� � ������, ��� �� ���������� �����
����. �������� [ � ] � ���� �����
//���� �����. ����� � ���, ��� � ���� � �������
�������� �������� ���������
//�� �� ������� ��������������, ������� ��� ��
������� ����. ��� �������� �������
//����� ������� �������, ��� ���������. �����
���������� - �����, � ������� ����,
//������ ����� ������, ��� ��� �����������
������� �� �������� ������, � �� ��
//������. �������� � ��� ��� ��� ��������� �����
���� �������� ��������.
//������������ �� ���.
pervTime = thisTime;
}

var blobs = new Array(); //��������� ��������� ���������� ��������� �� ���� ������.

function init()
{
var i; //���� �������� i � ����� ������!
for (i=0;i<5;i++) //� ����� ����� ��� ������. ���� � �� ����������� ���
����������� ������� ���������� �
{ //��� ��������, �� ������ ����� ����. ���������:
//��_�������.push(�������)
//���� � ����� ������ (��������� = �� ������ ��������) �
��������� ������� ������
//���� � ��� ���� ��������� ������� ��� � ��������
��������������� ���������.
//������� ������ ����� � ��������. ������ ��� ���������
����, ��������� ����, ���, ���, �,
//��������������, ������.

blobs.push(new blob(60 + Math.random()*(canvas.width-


120),60+Math.random()*(canvas.height-120)));
blobs[i].size = 40 + Math.random()*20; //�� ��� �� ���� ���� �����������,
������� � ��������� ���� ������,
blobs[i].breathe = Math.random()*7 - 3; //��� ����� � ������. ��� ������.
������ ��������, � ��� ������ �����,
blobs[i].eyesize = 4 + Math.random()*7; //��� �� ����� ���������. ���-��
�������, ���-�� ��������. ���-��
blobs[i].blinkint = Math.random()*200; //��������, ���-�� ����� � ���������
�������, � ���-�� ��� ���������.
if(Math.floor(Math.random()*2) == 0) {blobs[i].inhale = false;}
//�������� ���� ���� ���� ����� - ���
��� ������ ����,
//���� ��������� ������� ����.
}
}

window.onload = function()
{
var i;
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");

canvas.onmousemove = function(e)
{
mouseX = e.clientX - canvas.offsetLeft - 1;
mouseY = e.clientY - canvas.offsetTop - 1;
}
canvas.onmousedown = function(e)
{
mousePressed = true;
}
canvas.onmouseup = function(e)
{
mousePressed = false;
}

for (i=0;i<225;i++) {keys[i] = false;}


document.onkeydown = function(e)
{
keys[e.which] = true;
}
document.onkeyup = function(e)
{
keys[e.which] = false;
}

init();

setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

����. ������� ������. � ������ ������� �������� ����� ������ ����� � � ��� �����.

������ �� ���, ��� ������ ������� �� �����������:


http://www.w3schools.com/tags/ref_canvas.asp
���� ���� ���������� �������, �� � ���� ���� ������ � ��������� �������. ������
������� � ������� ������ ������.
�����-������� ����� �������: ��� �� ���������� ���-����, ����� �������������, ����
�������� ������������� ������� ����� ��������:

beginPath() � ���� stroke(), ���� fill()

��� ������� ��������, � �� ������� � ������ ���������, ��� ���:

context.beginPath();
//��� ������
context.stroke();

��� ���� ���� ���������� ����������� ����.

context.beginPath();
//��� ������
context.fill();

� ��� ���� ���� ���������� ����������� ���� � ����� ���������� ��, ��� ������.

�� ����� ���� ���� �� ������ closePath(), ������ �� ���� ������ "���������" ���
���������, �� ������� � ������������ �� ��������� ����� ��������, ��� ��� �����
������� ��� ����� ������������� "���������" ������� "����".

����. ��� �� ���������� ���� ���� ������ ������� � ����� ���������� ���������
������������ ������������� ����������. ������� ��� �������� moveTo(x,y). � �����
������� ������ �������� �����: lineTo(x1,y1).

�� ���� ��� �� ���������� ���� ���� ������� ���� ������ (� ������) �������:

context.beginPath(); //�������� ���������


moveTo(x,y); //�������� � �����, � ������� ��� ������
lineTo(x1,y1); //�������� ����������� ����
lineTo(x2,y2); //����� �������� �� ���� ����������� ����. ��� ������ � ���
�����, ��� ����������� �����.
moveTo(x3,y3); //����� ������������ �� � ����-������ �����
lineTo(x1,y1); //� ���������� ���� ���� ��, ���� � � ��������� � ������ ���!
context.stroke(); //����������� ��������� � �� ������������ ����� ������ ��
��������.

���������� �����������. ���� ������ (����� ������?!) � ���� ������ ���.

�������� ����� ���� ���� ����� ���������. ��� � ���������� ���� ���� ��������
��������:

context.beginPath();
context.arc(x,y,radius,0,2*Math.PI);
context.stroke();

����������� ������ �������� ����� �������� �������� �� ������ �����, �� � �� �����


- ��������� ��� ��������� ��� ��������� � �������� ����. � ������� 0 � 2*�� ������
��� ��� ������ ������ �� ���� ��������. �� ����� ���� �������� � ������ ���� �
����� ���� ����� ��������� ������ �� ������.

���� �� ������ arcTo(), ��� � ���������� ���������� �� ����� � � ���� ����� ������
���� ���������� ����. � �� ������� �� ����������, �� �������� ���������� �����
�����������. � ��� ���� ��� � ���� �����. ‫����� ����׸‬.
�������� �� ����������, ������� � ���:

var canvas;
var context;

var thisTime = new Date().getTime();


var pervTime = thisTime;

var mousePressed = false;


var mouseX = 0;
var mouseY = 0;
var keys = new Array();

var FPS = 100;

var selected = 0;

flower = function(x,y) //����� ������ ������ "������"


{
this.x = x; //�� ���������� ���� � ������ � ����� ���������� �����
this.y = y; //� ������� �� �������� "� ����"
this.height = 80; //��� ��� ������. Ÿ ����� �����������, ��� �� ����� ��
�������� ���������
this.radius = 30; //��� ������ �� ��� �� �����.
}

flower.prototype.draw = function()
{
var i; //������ ����� i!
context.strokeStyle="#000000";
context.fillStyle="#000000";

context.beginPath(); //���� �������


context.moveTo(this.x,this.y);
context.lineTo(this.x,this.y-this.height+this.radius);
context.stroke(); //���������

context.beginPath(); //����... � �������� �� ���������. ��� ���������


"�������".
context.arc(this.x,this.y-this.height,this.radius,0,2*Math.PI);
context.stroke(); //���������... ������� : /

context.beginPath(); //����... ������?


context.arc(this.x,this.y-this.height,this.radius-5,0,2*Math.PI);
context.moveTo(this.x + (Math.cos( 60*(0+0) * Math.PI / 180))*this.radius, //�
������� ������� � ������� �����
this.y - this.height + (Math.sin( 60*(0+0) * Math.PI /
180))*this.radius);//��������... �������.
context.stroke(); //���
����� �� �������� �������,
//���
��� ��������� ����� ����, ����
//�
����� �� �����.

for (i=6;i>0;i--) //������ ����� ��� �� 6 � ���, � �� ��������? ������ ��� �����
�������� ��������� ��������, �
{ //��� ��� ������ ������ �������� ��������.
context.arcTo(this.x + (Math.cos( 60*(i+0) * Math.PI / 180))*this.radius, //�����
���� ���������� - ����������
this.y - this.height + (Math.sin( 60*(i+0) * Math.PI / 180))*this.radius,
//������ ��������
this.x + (Math.cos( 60*(i-1) * Math.PI / 180))*this.radius, //�����
���� - ���������� �����
this.y - this.height + (Math.sin( 60*(i-1) * Math.PI / 180))*this.radius,
10); //��������� ����� - ��� ������.
}

context.fill(); //��� ����� - �����, ������� �������� � ���������� ������.


}

blob = function(x,y)
{
this.x = x;
this.y = y;
this.size = 40;
this.breathe = 0;
this.breatheint= 0;
this.inhale = true;
this.eyesize = 10;
this.pupilsize = 2;
this.blink = false;
this.blinkint = 0;
}

blob.prototype.draw = function()
{
context.fillStyle="#000000";
context.fillRect(this.x+this.breathe,this.y-this.breathe,this.size-
this.breathe*2,this.size+this.breathe);

if (this.blink)
{
context.fillStyle="#FFFFFF";
context.fillRect(this.x+this.size/2+this.eyesize-this.eyesize/2 ,
this.y+this.eyesize-this.breathe+this.eyesize/4,this.eyesize+this.eyesize/
4,this.eyesize-this.eyesize/2);
context.fillRect(this.x+this.size/2-this.eyesize-this.eyesize/1.5,
this.y+this.eyesize-this.breathe+this.eyesize/4,this.eyesize+this.eyesize/
4,this.eyesize-this.eyesize/2);
}
else
{
context.fillStyle="#FFFFFF";
context.fillRect(this.x+this.size/2+this.eyesize - this.eyesize/2,
this.y+this.eyesize - this.breathe,this.eyesize,this.eyesize);
context.fillRect(this.x+this.size/2-this.eyesize - this.eyesize/2,
this.y+this.eyesize - this.breathe,this.eyesize,this.eyesize);
context.fillStyle="#000000";

var eyeposx = this.x + this.size/2 + this.eyesize - this.pupilsize/2;


var eyeposy = this.y + this.eyesize - this.breathe + this.eyesize/2 -
this.pupilsize/2;
context.fillRect(eyeposx + Math.cos(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*
(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,
eyeposy + Math.sin(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*

(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,this.pupilsize,this.pup
ilsize);

var eyeposx = this.x + this.size/2 - this.eyesize - this.pupilsize/2;


var eyeposy = this.y + this.eyesize - this.breathe + this.eyesize/2 -
this.pupilsize/2;
context.fillRect(eyeposx + Math.cos(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*
(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,
eyeposy + Math.sin(-getAngle(eyeposx,eyeposy,mouseX,mouseY) *
Math.PI / 180)*

(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,this.pupilsize,this.pup
ilsize);
}

if (this.breatheint % 10 == 0)
{
if ( this.inhale) { this.breathe++; } else { this.breathe--; }
}
if (this.breathe > 3) { this.inhale=false; }
if (this.breathe < -3) { this.inhale=true; }
this.breatheint++;
if (this.breatheint > 500) { this.breatheint = 0; }

this.blinkint += 0.2;
if (this.blink)
{ if (this.blinkint > 50) { this.blink = false;
this.blinkint = 0; } }
else
{ if (this.blinkint > 200 + Math.round(Math.random()*1000)) { this.blink = true;
this.blinkint = 0; } }
}

function getAngle(x1,y1,x2,y2)
{
if ((x2 >= x1) && (y2 <= y1))
{
return Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 <= x1) && (y2 <= y1))
{
return 180 - Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 <= x1) && (y2 >= y1))
{
return 180 + Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
if ((x2 >= x1) && (y2 >= y1))
{
return 360 - Math.abs(Math.atan((y2 - y1)/(x2 - x1)) * 180/Math.PI);
}
}

function getDist(x1,y1,x2,y2)
{
return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
}

function update()
{
var i;
thisTime = new Date().getTime();
var diffTime = Math.floor(1000 / (thisTime - pervTime));

context.fillStyle="#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);

for (i=0;i<flowers.length;i++) //���������� � ������� � ������ ����� �� ����,


������� �����
{
flowers[i].draw(); //���� �� �����. ���� � ������ ���� ������,
������� ����� ��������.
}

for (i=0;i<blobs.length;i++)
{
blobs[i].draw();
context.fillStyle="#000000";
if (i == selected) {context.fillRect(blobs[i].x+blobs[i].size/2-5,blobs[i].y-
30,10,10);}
}

context.fillStyle="#000000";
context.font = "12px sans-serif";
context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0);

context.textAlign = "left";

var keysPressed = "keysPressed: ";

for (i=0;i<225;i++) {if (keys[i]) {keysPressed = keysPressed + i + ", "; } }


keysPressed = keysPressed.slice(0,keysPressed.length - 2);

context.fillText("mouseX: "+mouseX, 0, 0*12);


context.fillText("mouseY: "+mouseY, 0, 1*12);
context.fillText("mousePressed: "+mousePressed, 0, 2*12);
context.fillText(keysPressed, 0, 3*12);

onKeyPress(); //� ������ ����������� ������ � �������� ������.

pervTime = thisTime;
}

function onKeyPress() //������, ������ ����������� ����� � ���� �� ����-�� ������


{
if (keys[87] ) { blobs[selected].y--; } //������� ���� �� ������� � ���� ����
if (keys[83] ) { blobs[selected].y++; } //�������������� ���������� ����������
������� ��������
if (keys[65] ) { blobs[selected].x--; } //�����. ������ �����. ������� ���������
���� � ������� update.
if (keys[68] ) { blobs[selected].x++; }
}

function onKeyDown(key) //���� ������� ������� ���������� �� ������� � ��


���������� ������
{ //�����? ������ ��� ������ �� ������� ��� ������� ����.
//� �����, ����, ����� ���, "��������� ��������", ��� �����
������
//� ���� ����� �� ����������
if (key == 221) { selected++; if (selected > blobs.length-1) {selected = 0;}}
//������ ����������� ��������������
if (key == 219) { selected--; if (selected < 0) {selected = blobs.length-1;}}
//���������� "������", ��� ���

//����������� ������ ���� ���


}

function onKeyUp(key)
{
}

var blobs = new Array();


var flowers = new Array(); //� ������ ������ � �� ������

function init()
{
var i;
for (i=0;i<4;i++)
{
blobs.push(new blob(60 + Math.random()*(canvas.width-
120),60+Math.random()*(canvas.height-120)));
blobs[i].size = 40 + Math.random()*20;
blobs[i].breathe = Math.random()*7 - 3;
blobs[i].eyesize = 4 + Math.random()*7;
blobs[i].blinkint = Math.random()*200;
if(Math.floor(Math.random()*2) == 0) {blobs[i].inhale = false;}
}
for (i=0;i<3;i+
+) //�� �������� �
�������
{
flowers.push(new flower(60 + Math.random()*(canvas.width-
120),canvas.height)); //� ����� ��� ������,
}
}

window.onload = function()
{
var i;
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");

canvas.onmousemove = function(e)
{
mouseX = e.clientX - canvas.offsetLeft - 1;
mouseY = e.clientY - canvas.offsetTop - 1;
}
canvas.onmousedown = function(e)
{
mousePressed = true;
}
canvas.onmouseup = function(e)
{
mousePressed = false;
}

for (i=0;i<225;i++) {keys[i] = false;}


document.onkeydown = function(e)
{
keys[e.which] = true;
onKeyDown(e.which); //����� �������, ������������ �� ������ ��
������.
}
document.onkeyup = function(e)
{
keys[e.which] = false;
onKeyUp(e.which); //����������� �������� �����, �� �� ����������
������.
}

init();

setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}

� ���� ���� �������� ���� �������������� �����, ������� ������ �� ����� � ���������
� ����� ����������� ������.

���� ��������� �������� ��������:

function RectIntersect(x11,y11,x12,y12,x21,y21,x22,y22)
{
if (x11<x22 && x12>x21 && y11<y22 && y12>y21) {return true;} else {return false;}
}

������ ������ ���� ���������: ������� �����, ������ ������ ���� ��������������.
���� ������������� ��������� ���� ����� - ������ ����� true. ���� ��� - �� �����.

��������� ������ ������� ����:

Вам также может понравиться