html 5 충돌 작은 공 시 뮬 레이 션
18626 단어 html5
html 코드:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
6 <title> </title>
7 </head>
8 <body>
9 <canvas id='box' width="300" height="300" style="border:2px; background:black;">
10 </canvas>
11 </body>
12 </html>js 코드:
1 //get a random color to render the ball
2 function getRandomColor(){
3 return (function(m,s,c){
4 return (c ? arguments.callee(m,s,c-1) : '#') +
5 s[m.floor(m.random() * 16)]
6 })(Math,'0123456789abcdef',5)
7 }
8
9 //get a random number between min and max
10 function getRandomNumber(min, max) {
11 return min + Math.ceil(Math.random() * (max - min));
12 }
13
14 var balls = [];
15 var ballCount = 4;
16 var boxLen = 300;
17
18 function createBall() {
19 var r = getRandomNumber(10,20);
20 var ball = {
21 m:r,
22 r:r,
23 x:getRandomNumber(0,boxLen-2*r),
24 y:getRandomNumber(0,boxLen-2*r),
25 vx:getRandomNumber(1,3),
26 vy:getRandomNumber(1,3),
27 color:getRandomColor()
28 };
29 return ball;
30 }
31
32 //test collision
33 function checkCollision(b1, b2) {
34 var dx = b1.x - b2.x;
35 var dy = b1.y - b2.y;
36 var dist = Math.ceil(Math.sqrt(dx * dx + dy * dy));
37 return dist < b1.r + b2.r;
38 }
39
40 //initialize the balls
41 for(var i = 0; i < ballCount; i++) {
42 var collision = false;
43 while(true) {
44 var b = createBall();
45 for(var j = 0; j < i; j++) {
46 collision = checkCollision(b,balls[j]);
47 if(collision) break;
48 }
49 if(!collision) {
50 balls[i] = b;
51 break;
52 }
53 }
54 }
55
56 function calcV(m1, m2, v1, v2) {
57 return ((m1 - m2) * v1 + 2 * m2 * v2) / (m1 + m2);
58 }
59
60 function draw() {
61 //handle collisions
62 for(var i = 0; i < balls.length; i++) {
63 for(var j = i + 1; j < balls.length; j++) {
64 if(checkCollision(balls[i],balls[j])) {
65 var b1 = balls[i], b2 = balls[j];
66 var v1 = { x : b1.vx, y : b1.vy };
67 var v2 = { x : b2.vx, y : b2.vy };
68 b1.vx = calcV(b1.m, b2.m, v1.x, v2.x);
69 b1.vy = calcV(b1.m, b2.m, v1.y, v2.y);
70 b2.vx = calcV(b2.m, b1.m, v2.x, v1.x);
71 b2.vy = calcV(b2.m, b1.m, v2.y, v1.y);
72 }
73 }
74 }
75
76 //move the balls
77 for(var i in balls) {
78 var b = balls[i];
79 b.x += b.vx;
80 b.y += b.vy;
81 var closeSide = false;
82 var maxPos = boxLen - 2 * b.r;
83 if(b.x < 0) {
84 b.x = 0;
85 closeSide = true;
86 } else if(b.x > maxPos) {
87 b.x = maxPos;
88 closeSide = true;
89 }
90 if(closeSide)
91 b.vx = -1 * b.vx;
92 closeSide = false;
93 if(b.y < 0) {
94 b.y = 0;
95 closeSide = true;
96 } else if(b.y > maxPos) {
97 b.y = maxPos;
98 closeSide = true;
99 }
100 if(closeSide)
101 b.vy = -1 * b.vy;
102 }
103
104 //draw the balls
105 var canvas = document.getElementById('box');
106 var ctx = canvas.getContext('2d');
107 ctx.fillStyle = "#000";
108 ctx.fillRect(0,0,canvas.width, canvas.height);
109 for(var i in balls) {
110 var b = balls[i];
111 ctx.beginPath();
112 ctx.arc(b.x+b.r, b.y+b.r, b.r, 0, 2 * Math.PI,true);
113 ctx.closePath();
114 ctx.fillStyle = b.color;
115 ctx.fill();
116 }
117 setTimeout(draw,10);
118 }
119
120 draw();이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[HTML5] EmmetHTML5에서는 셀렉터를 이용해 여러 요소를 한 줄로 작성할 수 있다. 분명 이런 문법 명칭이 있을 텐데, 찾지 못해서 뭐라고 칭해야 하는지 모르겠다. 누군가가 알려주셨으면 좋겠다. ㅠㅠ 22.04.07 18:42 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
