Lessons For Retards
Lessons For Retards
����� �����: ���� � ������ ����������� ��� ��������� ��� � ������� "�� ������ �
�����������" - ������������ (� ��������� ����������������) ������ ��� � ���� ����.
��� � ������� ������, ��� ������ �� � ���� ������ ���-������, ��� ������� �����
������ ������ �� ��� ��������, �� � ���-�� �� ����, ��� ��� ��� �� ����� ��������
�� ���.
��� �������������� ����, � ���� ��� � ������ "����� �������". ��� �� ����� ������
��������� ���� ������ ��������/�����������, � �� ���.
������� ����������: 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">
</body>
</html>
������ ���� �� ������ � ���������� ����� �����? ������ ��� ���� ����������� �����
������� � ��������� ����
(������� <script type="text/javascript" src="lesson_1.js"></script> ��������, ���
���� ���� ��������� lesson_1.js
���� ��� ���������� ������� � �������� ���� � ������ lesson_1.php!)
����� �������� ������ �������� ������� ��������������� ���������� ��� ���� ������
������� � javascript. �� ����������� �������� ����� �������� � � ���� lesson_1.js.
��� ���:
alert("���!");
alert("���!");
alert("���");
alert("��");
alert("�����");
alert("����������");
alert(":(");
a=5;
b=3;
c=a+b;
alert(c);
����� ������ ����� ��������, �� ��������, ���� ������� ����� � ������. ���� �
�����, ��� ������������ �� �������� - �� ����� � ��� ���, �� ��� ����������� ������
���� ��� ����� �������� �������� ����� � ����� ������ (��� ������).
a = 5; b = 3; c = a + b;
alert(c);
���������� 2.
��, ��� �������� ����� // � �� ����� ������ ��������� ������������ � �������� ���
�� �����. �� ���� ����� // ����� ������ �������� ����� � � ��� ����� �� ������.
������������� ����������� ���� ���������� � /* ��� ����� */ �������(?)
�� ���� ������ ������, �������� � �����������: ���, ����, ���� �����, ��� ����� �
���� � �������, ��� �� �� ������� � ������ alert-�. ����� �� � ������� �� ����.
������ ���?
��� ��������� ����� �� �����, �� � ������������ �� ������� ����� (�� ������� ��).
����, ����� �����, ��� ���� ���������� - ��� ����� � �������: ��� �����, ����� �
���������� ���������� ��������. ��� �� � ��������� �������� ������ ���� ���� ���
������ � �������. ��� �� �������� ����� - ���� ������ �������� �����.
Name: RETARD
X: 5
Y: 30
��� �� ����������� ��� � �������� ������-�� ������ ����� ����, � ������� �� �����
�������� ���������� ����� ��������� � ������: ��� �� � ��� ����������. � ������� ��
������ �� ����� ���� ����������� ��� ��������������� ��������� ���������� �
���������. �� ��������. �� �������� ���� ������������ ������� �����.
var a = 5;
var b = 5;
var c = a + b;
alert("a + b = "+c);
��� ��������� ����� ����� �����, ��, ������� �����, � ������ ����� �������� �������
� �������� �������, ��� ��������:"��. �� ������� ��������� ���������� � �����������
�� �������. ���������� � ���� ���������� ������� �������������, � ����� �� ��������
�� �������, ��� �� ����� ��� �������� ����������� if"
����������� if, ������, �������� ���: ������ ������ ����� if, �����, ���������� �
�������, ������ (�������), ����� ���� ��������, ������� ��������� ��� ���� �������.
������� �����, ��� �����!
if (�������) ��������;
var a = 1;
if (a == 1) alert("��������");
var a = true;
alert(a);
���� ��� ����� ��������� � ���������� ����� ��� ��������� (� ������ ��� �������
������� �����, �� ����� �� ����������� ������� �, ��������, ������� �� ����, ������
������� � ������� ����� if � ������ ���������):
var a = 5;
var b = 10;
var c = (a > b);
alert("a ������ b? ���������� �����: "+c);
��� ��������� ������ ��������� ������� �������� �� �����, ���� ��� � ���������.
���� �� ���� ��� ���� ��������� ����� ��������� ������� ���� ���������� � ������
�������� ����:
|| - ���
&& - �
! - ��
��������:
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!
function update() //��� �������� ������� update(). ������ ������ �������, ��� � ���
������ �� �������� �������
{ //����������, ���, ��������, � alert �������� ������, ������ ���
������� �� ���������� ����.
//�������� ������ ������� ��� ��������� ������ ��������, �������
��� ������, � ��� ��
} //������������. ������ ��� ������ �� ������ ������, �� ��� ������
������� ������� ����.
{ //��� ������ ������ ���� ��������. ������ ����� ��� ��������� '������������
������'. ���� ���������� �������
//������ ���������� ���. ���� ����������, ��� �� ����� if ����������� ������
����� �������
//���������� ����� ���. ������, ���� ���� ���������� ������ �������� � ���� - ��
���� ���� � ����� ������.
} //������ ����������
else //����� else ������ � if, ���� ���� ������� ����� ������� ���� ��������, ����
��� �������
//������ ��������� ������. � ���� ������: ���� �������� �� ����� ����
�������. ����� ������� �������� ������
//��������� � ��������, ��� ��� ��������� (��� ����� �������� �����������
������������� �� ����������� //�������, ��� ��� ��� ������� ������ �
���������).
} //������ ����������
} //���������� ������, ������������� ����� �������.
� ���� ��������� ������ ������ ��� ����������. ������ ���������� ����� ���� ���
������������ ����� ����������. �������� �� ������������� ��� ������� ������ �����.
�������� ������: ���� ������� ������ ���������� ������ � ������� � ������ �������
����. ������ ������ ����� ������� ��������. ������ � �������� - �� ����������
���������� ������ � ������� (�������, �������!). ������ - ���� ����� � ���
��������� ����, ��, ������ ����� (�� �� ����������), �� ����� ���������� ����.
���� ������ ����, �� ����� ������ ���������������� ��������� �������� � ���� ����,
��� �� ���������� �� ���������� �� ��� �������� ����� �����. � ������ ��� �� ���
��� ���� ��������� �� ���������� �����. ��� ������ ��� ���������� - ������ �������
� � ���� ���������.
�����. ��� �� � ����. �� ���� ���������� �����������. �� ���� ��� ����������. ����
������ �� ��������� ��������. ��� �� �������� ��������� ���� ������ �������� ����
�������� ������ � ������� ������. ���������� ����� ������� �� ����� ����,
���������� �� �����, ���������� ����� ����� ������� �� ������� ������ �������,..
�������� ��� ������������������ �� ���� � ����� ������� ����� ��� ����� ������.
�������� �������� - ����� ����� ����. �����-������� ������� �������� ��� �������
����� �������� ������ ������� 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.fillRect(0,0,1024,768);
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("�� ���������� �������� ��������!");
}
}
�����-������� �� �������, ��� ���� �������, ����� ���� ��� �� ��������� �� �����,
������ �����. � ����� ��������� ���������� ������������ ���������� �������� ������
������ ��������: 50 �������� �� ����� �������, 30 �������� �� ������� �������; �
������ � ������ ������������� 10 � 20 ��������.
var canvas;
var context;
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("�� ���������� �������� ��������!");
}
}
������� ����� ��� - ��� ��������� ������ �������������. ������ ������ ����� ��
��������� �������� ��������� x. �����, ������� � �� ��������, ���������� ����������
�� �����������, �� ������� �� ����� ��������� ��� ������� ���� ������ ���, �����
��� ����� ��������.
������� ����� ��� - ��� ���������� ���������� x �� �������. ���� ������� ���������
����������� � ����������� �� ����, ��� �� �������� �����. ��� ������� ����� ���� ��
�������� ��� � ����� ����:
x = x + 1;
�� �� ����� �������� ����� � ����� ���������.
�������� ����� �������� FPS �� ����� ������ �� � ������ �������� FPS, � � ������
�������� ����� ������. ��, � ��������� ������-������� ��� �������� ����� �����
������, �� ���� � ���, ��� ����� ���������������� ���������� ���������. ��� �������
� ����� ������ � ������ ������ �� ������ � ������. �� ����� ���� ����� ������ ����
�� ��� ������ �������, �� � �� �� ���.
���� ������ ����� ����� ���� �������, ������� ����� ��������� ����� ��. � ������
������ ��� ������� ������ �����-��-�������� � ������ � 12 ��������. ������ �
������� � ����� ���� ������ ������������:"The font property uses the same syntax as
the CSS font property." ��� � �������� �� ������� ���� ������:"������ ����� CSS,
����!"
��, ��� ���� ������ ����� ������������. ���� � �������, ��� ������ ��� ��������� �
�������, ������� �������������, ����� ������ �������� ������ ���� ������������. ���
����� ������� ����� ���� ����� �������. ��� ��� FPS ��� ������ ������������ ���
����� � ������ ������� ���� - �� ������������ ��������� �� ������ �������.
���������� ������� ������ �������� �� ��������� (��� �������� 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++;
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.
var canvas;
var context;
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++;
window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");
setInterval(update, 100);
}
else
{
alert("�� ���������� �������� ��������!");
}
}
� ��, ����. ��� ������� � �� ���������. ����� �� �����: ��� � ������� ������ ����
�������� ����� new. ��� �� �������������� ��������, ������ ����� � ������ ����
�������� � ����� ����� ����� �������. �� ����� ������ ����� ��� ������, �����
������������ �������� ���������.
����� ������ ����( getMonth() ), ��� ���( getFullYear() ), ���, ���, � �� ���, ����
���� ( getHours(), getMinutes(), setSeconds() ). �� �� ������ ���������� ����������
�� ������ ����� ( getTime() ).
������ ����������� ������ update. ��� � ������ ����� ��� ������ �����. �����-
������� �������� ����.
� �������� ������ ����� �������� ��� � ������������ ��������� diffTime. ����
���������������� ���������� ������ �������, �� ��� ����� ������������ ������ ������
�������. ��� ��������� ��������� ����������.
����� ������ ����� �� ������� ����� ���������? ���� ����� �� �� �������� - �������
����� �������� ��� ���������� ���������� ����� ���� ��������. ��� �� ������ �������
��� ��� ���� ��������� � ���� ������� (����� ����������) ���� � (�������) ���������
�� ��� �������.
������ � ��� ������ ������ � ����� �����? ������ ��� ���� ����� ������ �������
update ���-�� ����� �� ��� - ������ fps ����� � ����.
�������� �� �����:
var canvas;
var context;
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++;
pervTime = thisTime;
}
window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");
setInterval(update, 1000/FPS); // <<----------------------------- �� ��������
���
}
else
{
alert("�� ���������� �������� ��������!");
}
}
��� ����� ������� ��������� ��� ����� �� ���� ������, ��� �����������, �� ���
�������, ���� ���� ��� ����, ������ �� �����.
������ ������� ������ � ������ ����� ������ ������������� � ���������� ����� ���
������ �������.
����� ������� ������ (������), ������� ��� ���������: �� ������� ������ �����, ��
���������� ������ �����, �� ����������� �����, �� ������� ���� ������� ����������
�, ��������������, �� ���������� ���� ������� ����������.
���� �����, �������� ���� ����� �������������, ������, � ���� ��������� ���
�������. ��� ��� �����, ������� ����������� ����� �������� ���������� ��������.
������� � ���� ��� ������:
var canvas;
var context;
//� ��� ������� �� ���������, �� ���� � ���� ������ - ��� ��� ������������
��������� ������� ����. �������� -
//���� ����� ����� ����������, � ������� ���� ������. ������ ���� - ��� �������
����������� ������� ���.
//���� ��� ����� �������� ���� ��� ������, �� ������ �������� ���������. ����
�������� ������ ���� �� ��� - �� ��
//����������. ���� - ����������. �������� ������ ���� ������ ��������� � ����� -
��� ��������� ��� �����.
//������ ����� ���������� � ��� - ������ ������� ������ (�� �� ������, �� ����� ���
������) ��������� � ���
//������ ������ ��� ���.
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++;
pervTime = thisTime;
}
window.onload = function()
{
canvas = document.getElementById("game");
if (canvas.getContext)
{
context = canvas.getContext("2d");
setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}
var canvas;
var context;
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++;
//� ��� ��� ����� ���� �����, �� ������ �� ������ � �� �������� ��������� � ���
����� ������ ������?
//��� ����� ������ �������, ���������� �������� ������� �� ������� keys � ��������
//����� �� ��� ��������� ����� true. � ����� �������� ����� ��������������� �����
������ �� ����������.
//��� �� ������� ����� ������ ����� ������ ������������ ����� ���� ��������� "����
������", ���� �������� �
//����� ���� ������, ���� �� ������� ��������� � ������� ������� � �����������
����.
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
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;
}
setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}
�������� � ����� ������� ������ ����� ������ ��� ��������� ������ ����� �������
����� ����.
var canvas;
var context;
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);
context.textAlign = "left";
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;
}
setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}
������ ��� ���������� � ������ ������� �������� � ����� �� �������� ��, ����������,
������� ������ � �� ��������. ����� � �������. � ����������, ����� �������������,
�������, �������, � ������� �� ��������� �������� �� ���������, ����� ���������
�������� ������.
��� ����� ��������� ����� ���� ������� ��� �����? ����� �� � ����� �� ������
��������� ����. ������ ������ ������. �� ���, ��� �����, ��������:
function getDist(x1,y1,x2,y2)
{
return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
}
�����-�� �������
����� � ����� � ����� � ���������� ������ ����� ������, ��� ������ "����������"
��������. ������� ������ �� ���� ���������! ��� ������, ��� �� ������� ������
������ ����� ������ �� �������, ��� � � ����������.
� �������� ���, ����� � ���� ������ � ����� ��������� 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
������ ��� ������ ���������� ���� ����� ��� ����� ���������, ��� � ���������
��������� ������ ��� ������.
��������� �� 180/Math.PI ����� �� ����, ��� �� ���� ���������� � ��������. ��� ���,
�� ����� ������, ���������� �����������, ������ ��������������� ���������
���������, � � �� �� ������ � ������ ���� ��������� � ��������. �������� � ���, ���
��� ����������� ����� ����� ������� � ��������� ��� ���� ����� �������� �� �� �
��������� �� 180, ��� �� ����� ���������� � �������.
������ �� ������: ���������, ������� ��������� � �����, ������ �����. ������ ���
���������� ��� ����������� �������� � ������� � �������.
���� ��������� � ��������� �� ����� �������, ��� ��� � ��� �������� ��������, �
��������� ������������� � ��� �� ���� �������� ������:
a = b
c = d
a*d = c*b
var canvas;
var context;
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 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); //� ���������
"�������" � �������� ��������
(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
//��� ��� � ������� ���� ������� �� ������� �������� ������ ������. �� ������� ��
�� �� �����.
(eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,pupilsize,pupilsize);
}
breatheint++; //���������
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";
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;
}
setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}
���� ��� ������, �� ���� � ������ ������� ������, ��� ������ ��� �������� ����
������� ������ �� ���, ������� ����� ���������� � ������ �������� �������. ���
�������� �� ��� �������. ���� � ������.
��������� �������:
������ � ����
var canvas;
var context;
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 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);
(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);
context.fillStyle="#000000";
context.font = "12px sans-serif";
context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0);
context.textAlign = "left";
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;
}
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";
(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,this.pupilsize,this.pup
ilsize);
(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);
context.fillStyle="#000000";
context.font = "12px sans-serif";
context.textAlign = "right";
context.textBaseline = "top";
context.fillText(diffTime, canvas.width, 0);
context.textAlign = "left";
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(�������)
//���� � ����� ������ (��������� = �� ������ ��������) �
��������� ������� ������
//���� � ��� ���� ��������� ������� ��� � ��������
��������������� ���������.
//������� ������ ����� � ��������. ������ ��� ���������
����, ��������� ����, ���, ���, �,
//��������������, ������.
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;
}
init();
setInterval(update, 1000/FPS);
}
else
{
alert("�� ���������� �������� ��������!");
}
}
����. ������� ������. � ������ ������� �������� ����� ������ ����� � � ��� �����.
context.beginPath();
//��� ������
context.stroke();
context.beginPath();
//��� ������
context.fill();
� ��� ���� ���� ���������� ����������� ���� � ����� ���������� ��, ��� ������.
�� ����� ���� ���� �� ������ closePath(), ������ �� ���� ������ "���������" ���
���������, �� ������� � ������������ �� ��������� ����� ��������, ��� ��� �����
������� ��� ����� ������������� "���������" ������� "����".
����. ��� �� ���������� ���� ���� ������ ������� � ����� ���������� ���������
������������ ������������� ����������. ������� ��� �������� moveTo(x,y). � �����
������� ������ �������� �����: lineTo(x1,y1).
�� ���� ��� �� ���������� ���� ���� ������� ���� ������ (� ������) �������:
�������� ����� ���� ���� ����� ���������. ��� � ���������� ���� ���� ��������
��������:
context.beginPath();
context.arc(x,y,radius,0,2*Math.PI);
context.stroke();
���� �� ������ arcTo(), ��� � ���������� ���������� �� ����� � � ���� ����� ������
���� ���������� ����. � �� ������� �� ����������, �� �������� ���������� �����
�����������. � ��� ���� ��� � ���� �����. ����� ����.
�������� �� ����������, ������� � ���:
var canvas;
var context;
var selected = 0;
flower.prototype.draw = function()
{
var i; //������ ����� i!
context.strokeStyle="#000000";
context.fillStyle="#000000";
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); //��������� ����� - ��� ������.
}
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";
(this.eyesize/2)*getDist(eyeposx,eyeposy,mouseX,mouseY)/800,this.pupilsize,this.pup
ilsize);
(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<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";
pervTime = thisTime;
}
function onKeyUp(key)
{
}
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;
}
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. ���� ��� - �� �����.