Square game development
4.1 requirements
1. In the frame of 800 * 800 every 2 SEC position randomly generated little squares, wide high for 5 px, color is green, with the increase of the survival time, wide high increases gradually, up to 10 px, the color gradually turn red;
2. The small square in the box moving randomly, each moving distance within the 5 px, cannot be removed from outside the box;
3. In the range of 200 * 200, if more than 10 small square, is the longest time square disappear;
CodePudding user response:
200 * 200 this what is the scope shall prevail?
CodePudding user response:
May be like a big div is divided into 16 small div so
CodePudding user response:
Can help have a look
CodePudding user response:
Should be easy to do, have time to do a
CodePudding user response:
<meta charset="utf-8"/& gt;
<meta HTTP - equiv="X - UA - Compatible" content="IE=edge, chrome=1"/& gt;
The name of the page & lt;/title> <br/><style type="text/css"> <br/># box {<br/>Width: 800 px; <br/>Height: 800 px; <br/>position: relative; <br/>Border: 5 px solid # 999; <br/>} <br/># box div {<br/>Width: 5 px; <br/>Height: 5 px; <br/>Margin - left: - 2 px; <br/>Margin - top: - 2 px; <br/>position: absolute; <br/>2 s linear transition: left, top 2 s linear; <br/>Animation: an 10 s linear recently; <br/>} <br/>@ keyframes an {<br/>0% {transform: scale (1); Background - color: # 0 f0; } <br/>100% {transform: scale (2); Background - color: # f00; } <br/>} <br/></style> <br/></head> <br/><body> <br/><Div id="box" & gt; </div> <br/><The script type="text/javascript" & gt; <br/>Var box=document. GetElementById (" box "); <br/>Var ds=box. GetElementsByTagName (" div "); <br/>SetInterval (function () {<br/>Var div=document. The createElement method (" div "); <br/>Div. X=Math. Floor (Math. The random () * 780) + 10; <br/>Div. Y=Math. Floor (Math. The random () * 780) + 10; <br/>Div. Time=new Date (). GetTime (); <br/>Box. The appendChild (div); <br/>For (var arr=[]; Arr. Push ([]) & lt; 16); <br/>For (var v, I=1; V=ds/+ + I) {<br/>V.x +=Math. Floor (Math. The random (10) - 5; <br/>V.y +=Math. Floor (Math. The random (10) - 5; <br/>If (v.x & lt; 10) v.x=10; <br/>If (v.y & lt; 10) v.y=10; <br/>If (v.x & gt; 790) v.x=790; <br/>If (v.y & gt; 790) v.y=790; <br/>V. tyle. Left=v.x + "px"; <br/>V. tyle. Top=v.y + "px"; <br/>Arr [Math. Floor (v.y/200) * 4 + math.h floor (v.x/200)]. Push (v); <br/>} <br/>For (var v, I=1; V=arr [+ + I]) {<br/>If (v.l ength> 10) {<br/>V. ort (function (a, b) {<br/>Return a.t ime - b.t ime. <br/>}); <br/>[0] box. RemoveChild (v); <br/>} <br/>} <br/>}, 2000); <br/></script> <br/></body> <br/></html> <br/></pre><p class="article - content rp"> CodePudding user response: </p>Thank you, I'll good code<p class="article - content rp"> CodePudding user response: </p>Can use js to write again, please, thank you for your bosses<p class="article - content rp"> CodePudding user response: </p>The <fieldset> <legend> reference 7 floor qq_42417689 response: <legend> <blockquote> can use js to write again, please, thank you bosses </blockquote> <fieldset> <br/>It is written in js<p class="article - content rp"> CodePudding user response: </p>Sorry, js only learned a little, thought is jQuery<p class="article - content rp"> CodePudding user response: </p>Anyone can help to do the similar? <br/>1) in the frame of 800 * 800 every 2 SEC position randomly generated little squares, wide high for 5 px, color is green, with the increase of the survival time, wide high increases gradually, up to 10 px, the color gradually turn red; <br/>2) small squares in the box moving randomly, each moving distance within the 5 px, cannot be removed from outside the box; <br/>3) use the mouse to click any one square, the square disappear; <br/>4) if the square box number less than 20, the newly generated a, </div>
<div class="th_page th_page_color"></div>
<div class="umCopyright">
<p>Page link：<a href="/frontend/96676.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/96676.html</a></p>
</div>
<div class="detail-arr">
<div class="detail-arr-left">Prev:<a href='/frontend/96675.html'>SPRINGBOOT upload file: MultipartFile resource [file] always be resolved to absolute file</a></div>
<div class="detail-arr-right">Next:<a href='/frontend/96677.html'>A little homework, help me</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="hot-tags neitags">
<ul>
<li><i class="iconfont icon-x-tags"></i> Tags： </li>
<a href='/e/tags/?tagname=JavaScript' target='_blank'>JavaScript</a> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="xiangguan">
<ul class="msg msghead">
<li class="tbname">Related</li>
</ul>
<ul><li><a href="/other/96652.html">Daily for help</a></li><li><a href="/Backend/96641.html">A typing games, can you help me change it, novice, wrong lot</a></li><li><a href="/other/96630.html">Embedded system course design for help!!!!!!!!!!</a></li><li><a href="/Mobile/96621.html">Can not find out is what reason, ask god to help, thank you</a></li><li><a href="/Mobile/96614.html">For help and media assets, video cataloging</a></li><li><a href="/other/96604.html">For help, the password strength code, I r [4] that step wher</a></li><li><a href="/net/96590.html">Please the inside of the BBS enthusiasts to help, how to use</a></li><li><a href="/Backend/96555.html">For help! How in the new ActionListener import external clas</a></li><li><a href="/Backend/96535.html">How to read the DWG file for help, in C</a></li><li><a href="/Backend/96528.html">For help</a></li> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="flinks">
<ul>
<li><i class="iconfont icon-x-tags"></i> Links： </li>
<li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html">
Privacy Policy</a></p>
<p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p>
</div>
<script type="text/javascript" src="/skin/code/tianhu.js"></script>
</body></html>