javascript - How to throw a ball into a cup? -
i have image of ball, cup, , inner , outer div represent throw powerfulness bar. when user clicks ball, powerfulness bar starts increment , decrements. when user clicks ball 2nd time, throw powerfulness bar stops , ball thrown.
as have began coding this, realized things going extremely complicated, though thought rather simple.
for example, want ball able "bounce", meaning need not maintain track of balls x , y coordinates, z coordinate representing depth.
when ball falls bounce, z coordinate decremented, , image of ball should scaled downwards in size, , when begins bouncing up, should scale in size, 1 time again based on z coordinate. want ball bounce off cup if z coordinate below value time reaches cup, go cup if sweetness spot, or go on cup if it's z value on sweetness spot.
in involvement of keeping somewhere short, i'll post have far. illustration lacking things hoping people here help me with.
http://jsfiddle.net/7lsh78nw/
<html> <head> <style> #ball { position:absolute; width:75px; height:75px; } #cup1 { position:absolute; left:375px; } #outerpowermeter { position:absolute; width:25px; height:100px; background-color:red; } #innerpowermeter { position:absolute; width:25px; height:100px; background-color:black; } </style> <script> window.onload = function() { var ball = document.getelementbyid("ball"); var ypos = 500; var xpos = 400; var zpos = 100; var ballwidth = 75; var ballheight = 75; var throwballinterval; var changeballsizeinterval; ball.style.top = ypos + "px"; ball.style.left = xpos + "px"; var cup1 = document.getelementbyid("cup1"); var powermeter = document.getelementbyid("innerpowermeter"); var powermetervalue = 0; var powermeterheight = 100; var powermeteractive = false; var powermeterinterval; powermeter.style.height = powermeterheight + "px"; ball.onclick = function() { if (powermeteractive == false) { powermeteractive = true; startpowermeter(); } else { powermeteractive = false; stoppowermeter(); throwball(); } } function throwball() { throwballinterval = setinterval(function() { ypos = ypos - 1; ball.style.top = ypos + "px"; }, 1); changeballsizeinterval = setinterval(function() { zpos = zpos - 1; ballwidth = ballwidth - 1; ballheight = ballheight - 1; ball.style.width = ballwidth; ball.style.height = ballheight; }, 100); } function startpowermeter() { var increment = true; powermeterinterval = setinterval(function() { if (increment == true) { powermetervalue = powermetervalue + 1; powermeter.style.height = (powermeterheight - powermetervalue) + "px"; if (powermetervalue == 100) { increment = false; } } else { powermetervalue = powermetervalue - 1; powermeter.style.height = (powermeterheight - powermetervalue) + "px"; if (powermetervalue == 0) { increment = true; } } },1); } function stoppowermeter() { clearinterval(powermeterinterval); } function detectcollision() { } function detectgoal() { } } </script> </head> <body> <img id="cup1" src="http://beerwar.com/game/images/cup.png"> <img id="ball" src="http://beerwar.com/game/images/ball.png"> <div id="outerpowermeter"> <div id="innerpowermeter"></div> </div> </body> </html>
since posted such detailed case, thought give pointers. mind you: vector math. i'm not physicist either, vector math isn't complicated luckily! pythagoras here , there , set.
a fast library glmatrix
a couple of things going. please note: pseudo code, explain concept of it.
keep vector position of ball keep vector position of cup (where ball should hit) keep vector position of 'the camera' (since want scale ball based on distance camera. doesn't have accurate, thought across) keep vector 'direction of force' going apply ball. (this can multiplied forcefulness force meter) keep vector 'velocity of ball' keep vector 'gravity'your 'throw' function become along lines of:
ball.velocity = throw.direction * throw.power setinterval(tick,50); basicly, 'tick' function (the function apply every x-time)
ball.velocity += gravity; // apply gravity speed of ball. pulling downwards ball.position = ball.position + ball.velocity // add together velocity position every tick if (ball.position.y < ball.radius) // if ball below radius, colliding ground { ball.position.y = 0 - ball.position.y; // invert 'up' position, create not collide ground anymore // create ball go again, invert 'up' velocity. gravity downwards // dampening applied bounce less every time. instance create 0.9. ball.velocity.y = 0 - (ball.velocity.y * dampening); } // scale of ball not determined height, distance photographic camera distancefromcamera = (camera.position - ball.position).length() ball.scale = 100 - (distancefromcamera / scalefactor); // create guess if hitting target, check distance it. distancefromtarget = (cup.target.position - ball.position).length() if (distancefromtarget <= cup.target.radius) // if 'hit target' handlehit() javascript html css physics game-physics
No comments:
Post a Comment