Игра в мячики от @OoyoO на HTML5 canvas

Разместил: Apocalypse
Опубликовано: 1 октября 2015

Замечательный пример реализации лёгкой развлекушки на canvas. Помню, такое демонстрировали раньше на официальном сайте Гугл. Думаю, данный материал может быть использован сайтами на детскую тематику или как блок, в котором могут успокоить свои нервишки пользователи сайта

Для начала посмотрите ДЕМО

Установка:

В то место, где хотите видеть блок, вставляйте:

<canvas id="c" width="500" height="500"></canvas> 

<script> 
document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218 
// start of submission // 
n = X = Y = 8; 
a = .994; 
g = .97; 
N = [991, 149, 192, 921, 199, 919]; 
d = document; 
c = d.body.children[0]; 
c.onclick = function (e) { 
l.push({ 
x: X, 
y: Y, 
u: 0, 
v: 0, 
r: 25 
}); 
n++ 
}; 
c.onmousemove = function (e) { 
S = e.clientX; 
T = e.clientY; 
U = S - X; 
V = T - Y; 
X = S; 
Y = T; 
for (i = 0; i < n;) { 
with(l[i++]) { 
S = x - X; 
T = y - Y; 
D = S * S + T * T; 
if (D < r * r) { 
u += U / 4; 
v += V / 4 
} 
} 
} 
}; 
d = d.documentElement; 
w = 500; 
h = 500 
L = c.getContext("2d"); 
l = []; 
for (i = 0; i++ < n;) l.push({ 
x: w / 2 + i, 
y: 150, 
u: i * 2 - 9, 
v: -i, 
r: 25 
}); 
setInterval(function () { 
L.fillStyle = "#ddd"; 
L.fillRect(0, 0, w + 50, h + 50); 
for (i = 0; i < n; i++) { 
with(l[i]) { 
L.fillStyle = "#" + N[i % 6]; 
L.beginPath(); 
L.arc(x, y, r, 0, 6.2, 0); 
L.fill(); 
k = w - r; 
x += u; 
u *= a; 
x > k || x < r ? u = -u : 0; 
x < r ? x = r : (x > k ? x = k : 0); 
k = h - r; 
y += v; 
v *= a; 
y > k || y < 0 ? v = -v : 0; 
y > k ? y = k : 0; 
v += .15; 
for (j = i + 1; j < n; j++) { 
o = l[j]; 
s = x - o.x; 
t = y - o.y; 
I = s * s + t * t; 
f = Math.sqrt(I); 
m = o.r + r; 
if (f < m) { 
p = m - f; 
q = p / 2; 
J = q * s / m; 
K = q * t / m; 
x += J; 
y += K; 
o.x -= J; 
o.y -= K; 
z = (s * (u - s) + t * (v - t)) / I + 1; 
A = s * z; 
B = t * z; 
C = A - u; 
D = B - v; 
z = (-s * (o.u + s) - t * (o.v + t)) / I + 1; 
E = -s * z; 
F = -t * z; 
G = E - o.u; 
H = F - o.v; 
u = (E - C) * g; 
v = (F - D) * g; 
o.u = (A - G) * g; 
o.v = (B - H) * g 
} 
} 
} 
} 
}, 12) 
// end of submission // 
</script>

100

101

102

103

104

105

106

107

108

109

document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218

// start of submission //

n = X = Y = 8;

a = .994;

g = .97;

N = [991, 149, 192, 921, 199, 919];

d = document;

c = d.body.children[0];

c.onclick = function (e) {

l.push({

x: X,

y: Y,

u: 0,

v: 0,

r: 25

});

n++

};

c.onmousemove = function (e) {

S = e.clientX;

T = e.clientY;

U = S - X;

V = T - Y;

X = S;

Y = T;

for (i = 0; i < n;) {

with(l[i++]) {

S = x - X;

T = y - Y;

D = S * S + T * T;

if (D < r * r) {

u += U / 4;

v += V / 4

}

};

d = d.documentElement;

w = 500;

h = 500

L = c.getContext("2d");

l = [];

for (i = 0; i++ < n;) l.push({

x: w / 2 + i,

y: 150,

u: i * 2 - 9,

v: -i,

r: 25

});

setInterval(function () {

L.fillStyle = "#ddd";

L.fillRect(0, 0, w + 50, h + 50);

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

with(l[i]) {

L.fillStyle = "#" + N[i % 6];

L.beginPath();

L.arc(x, y, r, 0, 6.2, 0);

L.fill();

k = w - r;

x += u;

u *= a;

x > k || x < r ? u = -u : 0;

x < r ? x = r : (x > k ? x = k : 0);

k = h - r;

y += v;

v *= a;

y > k || y < 0 ? v = -v : 0;

y > k ? y = k : 0;

v += .15;

for (j = i + 1; j < n; j++) {

o = l[j];

s = x - o.x;

t = y - o.y;

I = s * s + t * t;

f = Math.sqrt(I);

m = o.r + r;

if (f < m) {

p = m - f;

q = p / 2;

J = q * s / m;

K = q * t / m;

x += J;

y += K;

o.x -= J;

o.y -= K;

z = (s * (u - s) + t * (v - t)) / I + 1;

A = s * z;

B = t * z;

C = A - u;

D = B - v;

z = (-s * (o.u + s) - t * (o.v + t)) / I + 1;

E = -s * z;

F = -t * z;

G = E - o.u;

H = F - o.v;

u = (E - C) * g;

v = (F - D) * g;

o.u = (A - G) * g;

o.v = (B - H) * g

}

}, 12)

// end of submission //

</script>

Источник материала: КЛИК

Метки: @OoyoO Canvas HTML5 Игра Мяч Эффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Читайте также:

0 Комментарий

Межтекстовые Отзывы

Посмотреть все комментарии

TGBOT

leonP4: Сегодня мы получили ачивку 'собрать 2 или более истории из жизни ппс' 😄

2020-11-15 00:57:15

TGBOT

leonP4: Первая была о том как одному коллеге нож воткнули, когда тот зашёл по подобному вызову к истеричкам.

Вторая история о том как в авиагородке они кафешку закрывали. Не закрыли, а она сама рипнулась по санитарным причинам

2020-11-15 00:57:36

Apocalypse

@leonP4, одна история лучше другой 😅

2020-11-15 10:45:59

Apocalypse

Хеллоу, пеплз. Как настроение?

2020-11-19 20:07:50

VKBOT

Alex Sher: Привет
Настроение пятничного вечера, жаль что пятница лишь завтра

2020-11-19 20:23:46

Apocalypse

@Alex Sher, хах, у меня тоже 😄

2020-11-19 20:35:17

TGBOT

maslenko: https://youtu.be/8HZ4DnVfWYQ

Это шикарно

2020-11-22 08:48:55

VKBOT

Apo Ucoz: Это лучшее, что я видел за последнее время 😃

2020-11-22 10:01:53

T-34

Привет! На вашем сайте, можно ли добавить кнопку "мои коментарии" в личный профиль? Что б искать легче было.

2020-11-24 11:48:48

VKBOT

Apo Ucoz: Да, конечно

2020-11-24 13:03:21

......

Для публикации сообщений в чате необходимо авторизоваться

Игра в мячики от @OoyoO на HTML5 canvas

Читайте также:

Посетители сайта

Панель управления

Ноябрь 2020
Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Игра в мячики от @OoyoO на HTML5 canvas

Читайте также:

Стильный адаптивный переключатель страниц на CSS3

Снег, снежинки которого можно толкать на HTML5 Canvas и jQuery через плагин LET IT SNOW

Звездопад на HTML5 Canvas

Посетители сайта

Панель управления