JS chain bubble v1.1_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JS chain bubble v1.1_javascript skills

May 16, 2016 pm 06:45 PM

The movement, collision, and disappearance of bubbles are all completed. The more I write about it, the less interesting it becomes. I am too lazy to write about the game-related stuff (such as how many levels there are in the game and how many bubbles are broken to pass the level). Friends who are interested can read it, because closures are used to modify setInterval in many places (this function is relatively cheap). Object-oriented, the annotations are relatively complete.
JS chain bubble v1.1_javascript skills

<title>Original JS chain bubble v1.1</title>
<style> 
     body{ 
margin: 0px; 
padding: 0px; 
background-color: #000; 
} 
#main{ 
border: solid red 0px; 
width: 800px; 
height: 600px; 
font-size: 48px; 
position: absolute; 
background-color: #fff; 
} 
.little{ 
height: 15px; 
width: 15px; 
font-size: 1px; 
border: solid #ccc 0px; 
position: absolute; 
left: 100px; 
top: 100px; 
background: url(/upload/20090928170442418.gif) no-repeat; 
filter: alpha(opacity=30); 
} 
.big{ 
height: 61px; 
width: 61px; 
font-size: 9pt; 
border: solid #ccc 0px; 
position: absolute; 
left: 0px; 
top: 0px; 
background: url(/upload/20090928170442175.gif) no-repeat; 
/**使显示的分数居中**/ 
line-height: 61px; 
color: #fff; 
filter: alpha(opacity=30); 
} 
#info{ 
        position: absolute; 
        left: 820px; 
        top 20px; 
        border: solid #fff 1px; 
        height: 600px; 
        width: 300px; 
        color: #fff; 
        padding: 5px; 
} 
#score{ 
        float: right; 
        border: solid #ccc 1px; 
        height: 10px; 
        width: 80px; 
        margin: 5px; 
        font-size: 30px; 
} 
</style>

<div id="main">
        <div id="score">0</div>
</div>
<div id="info">
         Original JS chain bubble v1.1
 
         Original author sunxing007
 
         Please be sure to indicate the source for reprinting:
 
         <a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a>
 
         Development environment: IE8. Compatibility is not considered for the time being.
 
          
</div>

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]
Please be sure to indicate the source when reprinting ：http://blog.csdn.net/sunxing007

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn