position - Jquery: using .animate to creata a game -


I know this is not the best type of question, but I'm really stuck. I'm trying to make a game like this link: using only jazzery / javascript / css / html (so i can not use flash).

I know that the game can not be seen good or fluent with it, but whatever I have just done is not working.

> First of all, I have created a game, which is 'Gamefield'. Then I want to add every balloon which is 200 meters above the bottom of the page. It works for a balloon, but as soon as I add more, the balloons jump over the screen when the Samsung ceremony starts.

  var divheight = $ ("# playfield"). Height (); Var divwidth = $ ("# playfield") width (); Var y = 0; While (y & lt; = 20) {var status = Math (Divwidth * Math.random ()); SetTimeout (function () {var testballoon = '& lt; img src = "afgleling / testballon" class = "blueblun"' testballon + = 'style = "status: full; bottom: 0 px;' + 'left:' + Status + 'Px; "/>'; $ (" # playfield "). Attachment (TestBolon);}, 1000); Y ++}  

But I can not even get images in a good place, and do not even like working to animate them as I want to either. I'm not talking about the ready-to-use code, but if someone has such an experience in this way and is a better approach to linking an element / going to a page, I would appreciate it. I do

There is a way to create new objects, make them live and then remove them. Below is the code for this example.

HTML

  & lt; Div class = "gamefield" & gt; It's definitely going to be a long way to becoming a game, click on this area to add balloons! & Lt; Br / & gt; Click fast or click slow! & Lt; / Div & gt;  

css

  div.gamefield {width: 100%; Height: 500px; Limit: 1px red solid; } Div.balloon {status: absolute; Bottom: 0 pixels; Left: 0 pixels; Width: 100px; Height: 150px; Background-shaped: 100% 100%; Repeat Background: No Repetition; }  

javascript

  var burl = "http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/green -jelly-mouse-culture / 028,931-green-jelly icon culture balloon.png "; Create FunctionBubble () {var gamefield = $ ("div.gamefield"); Var d = $ (document.createElement ("div")); D.addClass ("balloon"); D.css ("background-image", "url ('+ +' '' '')"); Var maxwidth = gamefield.width () - 100; Var left = Math.round (maxwidth * Math.random ()); D.css ("left", left + "px"); D.css ("below", "0 pixels"); Gamefield.append (d); D.animate ({bottom: gamefield.height ()}, 3000, function () {animation full ($ (this));}); } Function Animation Full (Job) {Job: Line (); } $ (Function () {$ ("div.gamefield"). Click (function () {createBalloon ();}}}});  

Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -