Баскетбол(JavaSript) — различия между версиями

  1 var img = new Image()
  2 var isMoved = false
  3 var isDrag = false
  4 var isGo = false
  5 var offset = {x:0, y:0} 
  6 var timer
  7 var coordinate
  8 var schet = 0
  9 var time = 0
 10 var m = {}
 11 var v0 = 0.0003
 12 var vx
 13 var vy
 14 var g = 0.01
 15 var canvas = document.getElementById("canvas")
 16 var ctx = canvas.getContext('2d') 
 17 var end_flag = true
 18 var flag_time = false
 19 var flag_clear = false
 20 var flag_border = false
 21 var seconds = 0
 22 var k = 0
 23 
 24 
 25 start()
 26 var y0 = y
 27 var x0 = x
 28 setInterval(count, 1)
 29 setInterval(function(){
 30 		draw(x,y,ring_time)
 31 }, 1)
 32 
 33 function start(){
 34 	if(end_flag){
 35 		ctx.clearRect(0, 0, canvas.width, canvas.height)
 36 		x = 250 + Math.random() * 100
 37 		y = 400	 + Math.random() * 100
 38 		r = 35 + Math.random() * 5
 39 		end_flag = false
 40 		draw(x,y)
 41 	}
 42 }
 43 
 44 
 45 function count(){
 46 	seconds += 1
 47 	if (flag_time){
 48 		time += 1
 49 	}
 50 }
 51 
 52 
 53 function getMouseCoords(e) { 
 54 var rect = canvas.getBoundingClientRect()
 55 m.x = e.clientX - rect.left
 56 m.y = e.clientY - rect.top
 57 return m
 58 } 
 59 
 60 
 61 
 62 canvas.onmousedown = function(e){ 
 63 	var m = getMouseCoords(e)
 64 	if (!isGo  && Math.pow(m.x - x,2) + Math.pow((m.y - y),2) <= r * r) { 
 65 		offset.x = m.x-x
 66 		offset.y = m.y - y
 67 		isDrag = true
 68 		flag_time = true
 69 		}
 70 	
 71 }
 72 
 73 
 74 canvas.onmousemove = function(e) { 
 75 var m = getMouseCoords(e)
 76 if (isDrag) { 
 77 	isMoved = true
 78 	x = m.x - offset.x
 79 	y = m.y - offset.y
 80 	d = Math.sqrt(Math.pow((x0 - x), 2) + Math.pow(y0 - y), 2) 
 81 	draw(x,y,ring_time)
 82 	}
 83 	if ((x >= canvas.width - 150) && (!isGo)){
 84 		clearInterval(timer)
 85 		end_flag = true
 86 		start()
 87 		isDrag = false
 88 		isGo = false
 89 		flag_time = false
 90 		flag_clear = false
 91 		flag_border = false
 92 		isMoved = false 
 93 		v0 = 0.0003
 94 		vx = 0
 95 		vy = 0
 96 		y0 = y
 97 		x0 = x
 98 		time = 0
 99 }
100 }
101 
102 
103 canvas.onmouseup = function(e) { 
104 if(isDrag && isMoved){ 
105 	flag_clear = true
106 	flag_time = false
107 	isGo = true
108 	var m = getMouseCoords(e)
109 	isDrag = false
110 	draw(x,y,ring_time)
111 	if (((y0 - y) < 0) && (x0 - x > 0)){
112 		var fi = Math.atan((y0 - y) / (x0 - x)) 
113 		}
114 	if (((y0 - y) > 0) && (x0 - x <= 0)){
115 		var fi = Math.PI/2 - Math.atan((x0 - x) / (y0 - y))
116 		}
117 	if (((y0 - y) >= 0) && (x0 - x > 0)){
118 		var fi = Math.atan((y0 - y) / (x0 - x))
119 		console.log(fi)
120 		}
121 	if (((y0 - y) < 0) && (x0 - x < 0)){
122 		var fi = Math.PI + Math.atan((y0 - y) / (x0 - x))
123 		}
124 	if (fi == undefined){
125 		fi = 4
126 	}
127 	vx = Math.abs(Math.sin(1/2 * Math.PI * time / 500)) * v0 * Math.cos(fi) * 60000 / (0.1 * r)
128 	vy = Math.abs(Math.sin(1/2 * Math.PI * time / 500)) * v0 * Math.sin(fi) * 60000 / (0.1 * r)
129 	timer = setInterval(move, 1) 
130 	
131 	}
132 if (!isMoved){
133 	time = 0
134 	isDrag = false
135 	flag_time = false
136 }
137 }
138 
139 function move() { 
140 draw(x,y,ring_time)
141 x += vx
142 y += vy
143 vy += g
144 
145 if(y >= canvas.height - r) { 
146 		clearInterval(timer)
147 		end_flag = true
148 		start()
149 		isDrag = false
150 		isGo = false
151 		flag_time = false
152 		flag_clear = false
153 		flag_border = false
154 		isMoved = false 
155 		v0 = 0.0003
156 		vx = 0
157 		vy = 0
158 		y0 = y
159 		x0 = x
160 		time = 0
161 		schet = 0
162 	} 
163 	
164 
165 if(x >= canvas.width-r) { 
166 	x = canvas.width-r
167 	vx = -vx * 0.5
168 	} 
169 	
170 if(x <= r) { 
171 	x = r; 
172 	vx = -vx*0.5
173 	} 
174 	
175 if(y >= canvas.height - r) { 
176 	y = canvas.height - r
177 	vy = -vy * 0.5 
178 	vx *= 0.5
179 	}
180 
181 	
182 if((x >= 1200 - 150 - r) && (y >= coordinate) && (y <= coordinate + 115) && (x <= 1200 - 150 - 1)){
183 	vx = -vx
184 	x = 1200 - 150 - 1.01*r
185 }
186 
187 
188 if((x >= 1200 - 150 - r) && (y <= coordinate + 50) && (y >= coordinate) && (vy > 0)){
189 		clearInterval(timer)
190 		end_flag = true
191 		start()
192 		flag_clear = false
193 		isDrag = false
194 		isGo = false
195 		v0 = 0.0003
196 		vx = 0
197 		vy = 0
198 		y0 = y
199 		x0 = x
200 		time = 0
201 		schet += 1
202 }
203 } 
204 
205 
206 function draw(x,y) {
207 	ctx.clearRect(0, 0, canvas.width, canvas.height)
208 	ctx.beginPath()
209 	var Back = new Image();
210         Back.src = "Back.png"; 
211         ctx.drawImage(Back, 0, 0);
212 	ctx.strokeStyle = '#ff99ff';
213 	ctx.lineWidth=3;
214 	ctx.font = '50px Arial Black'
215 	ctx.strokeText('Score:', 30, 60)
216 	ctx.strokeText(schet, 215, 60)
217 	ctx.strokeText('Pull Force:', 30, 120)
218 	if (Math.floor(time/500) % 2 == 0){
219 		ctx.strokeText(Math.floor((time % 500) / 5), 330, 120)
220 	}
221 	if(Math.floor(time/500) % 2 == 1){
222 		ctx.strokeText(100 - Math.floor((time % 500) / 5), 330, 120)
223 	}
224 	ctx.strokeText('%', 395, 120)
225 	ring_time = seconds
226 	if ((ring_time) * (schet + 1)/400 % 2 == 1){
227 		img.src = 'Ring.png'
228 		ctx.drawImage(img, 1200 - 135, 400, 135, 135)
229 		ring_time = 699
230 	}
231 	else{
232 		if (Math.floor((ring_time) * (schet + 1)/400) % 2 == 1){
233 			img.src = 'Ring.png'
234 			ctx.drawImage(img, 1200 - 135, ((400 - (ring_time % 400)) * (schet + 1)) % 400, 135, 135)
235 			coordinate = ((400 - (ring_time % 400)) * (schet + 1)) % 400
236 		}
237 		
238 		if (Math.floor(ring_time * (schet + 1)/400) % 2 == 0){
239 				img.src = 'Ring.png'
240 				ctx.drawImage(img, 1200 - 135, ((ring_time % 400) * (schet + 1)) % 400, 135, 135)
241 				coordinate = ((ring_time % 400) * (schet + 1)) % 400
242 		}
243 	}
244 	var Ball = new Image()
245 	Ball.src = 'Ball.png'
246 	ctx.drawImage(Ball, x - r, y - r, 2 * r, 2 * r)
247 }