Fork me on GitHub

模拟切水果的游戏以达到对JavaScript的一些基本语法操作的练习 

小女新手学习中，这里将会整理和记录小女的学习笔记，如有错误的地方希望各位前辈多多指教，小女在此不甚感激，一定虚心受教。
我的邮箱：lf_radish@163.com


模拟切水果的游戏以达到对JavaScript的一些基本语法操作的练习，采用面向对象的思想此文章中涉及了大部分JavaScript的基础知识，下面我将做详细分析。

Math.random()--随机产生0-1的随机数 

document.createElement("div")：创建一个div元素
 
replace(/[^0-9]/ig, "")：提取字符串中整数

 

 

 闭包：此概念是JavaScript中重要的概念之一，我浅显的理解闭包的作用就是改变变量的作用域，网上有大多数关于闭包这个概念的解释和说明。http://www.jb51.net/article/24101.htm

http://kb.cnblogs.com/page/110782/

  setTimeout() 方法与setInterval()

用于在指定的毫秒数后调用函数或计算表达式。

提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

http://www.360doc.com/content/11/0412/17/1007797_109118156.shtml


 		












toString（16）：本文中是将十进制的数转换为16进制








document.body.appendChild(this.div)：在body中添加这个div对象。
查看appendchild详细语法：
http://www.w3school.com.cn/xmldom/met_element_appendchild.asp








apply（）方法实现继承机制
http://www.cnblogs.com/fighting_cp/archive/2010/09/20/1831844.html
http://hi.baidu.com/shashadu/item/0198c6e74aa7edb52e140b71








DOM event对象：


Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。




事件通常与函数结合使用，函数不会在事件发生前被执行！




http://www.w3school.com.cn/htmldom/dom_obj_event.asp















  1 <body >
  2     <form id="form1" runat="server">
  3     <script language="javascript" type="text/javascript">
  4     <!--
  5      function Panel(_width, _height) {
  6             this.width = _width;
  7             this.height = _height;
  8 
  9             this.randomColor = function () {
 10                 var r = parseInt(Math.random() * 255).toString(16);
 11                 var g = parseInt(Math.random() * 255).toString(16);
 12                 var b = parseInt(Math.random() * 255).toString(16);
 13                 return "#" + r + g + b;
 14             }
 15             this.create = function () {
 16                 this.div = document.createElement("div");
 17                 this.div.style.width = this.width + "px";
 18                 this.div.style.height = this.height + "px";
 19                 this.div.style.backgroundColor = this.randomColor();
 20                 document.body.appendChild(this.div);
 21                 var temp = this;
 22                 setTimeout(function () {
 23                     document.body.removeChild(temp.div)
 24                 }, 3000);
 25             }
 26         }
 27         function LiPanel(_width, _height) {
 28             Panel.apply(this, arguments);
 29             this.width=_width;
 30             this.height = _height;
 31             this.parent = document.getElementById("background");
 32             this.create = function (clientX, clientY) {
 33                 this.div = document.createElement("div");
 34                 this.div.style.width = this.width + "px";
 35                 this.div.style.height = this.height + "px";
 36                 this.div.style.top = clientY + "px";
 37                 this.div.style.left = clientX + "px";
 38                 this.div.style.position = "absolute";
 39                 this.div.style.backgroundColor = this.randomColor();
 40                 this.parent.appendChild(this.div);
 41                 var self = this;
 42                 setTimeout(function () {
 43                     self.parent.removeChild(self.div);
 44                 },100);
 45             }
 46             
 47         }
 48 
 49         function Fruit() {
 50             Panel.apply(this, arguments);
 51             //设置水果的大小
 52             this.width = Math.floor(Math.random() * 10 + 20) + "px";
 53             this.height = Math.floor(Math.random() * 10 + 20) + "px";
 54             //获取背景的位置
 55             this.obj=document.getElementById("background");
 56             this.backwidth =this.obj .offsetWidth;
 57             this.backheight = this.obj.offsetHeight;
 58             this.backtop = this.obj.offsetTop;
 59             //获取背景的底部位置
 60             this.backY = this.obj.style.top.replace(/[^0-9]/ig, "")+this.obj.offsetHeight;
 61             //设置水果出现的位置
 62             //this.x = Math.floor(Math.random() * (this.offsetwidth.replace(/[^0-9]/ig, "")) + 1) + "px";
 63             this.x = Math.floor(Math.random() * this.backwidth);
 64             this.y = Math.floor(this.backtop);
 65 
 66             this.timer = null;
 67 
 68             this.marquee = function () {
 69                 if (this.y <= this.backY) {
 70                     this.div.style.top = (this.y++) + "px";
 71                 } else {
 72                     this.destroy();
 73                 }
 74             }
 75             this.create = function () {
 76                 this.div = document.createElement("div");
 77                 this.div.style.width = this.width;
 78                 this.div.style.height = this.height;
 79                 this.div.style.left = this.x + "px";
 80                 this.div.style.top = this.y + "px";
 81                 this.div.style.position = "absolute";
 82                 this.div.style.backgroundColor = this.randomColor();
 83                 document.getElementById("background").appendChild(this.div);
 84 
 85                 var self = this;
 86                 this.div.onmouseover = function () {
 87                     self.destroy();
 88                 }
 89                 this.timer = setInterval(function () {
 90                     self.marquee();
 91                 }, 1);
 92             }
 93             this.destroy = function () {
 94                 document.getElementById("background").removeChild(this.div);
 95                 clearInterval(this.timer);
 96                 delete this;
 97             }
 98         }
 99         document.body.onload = function () {
100             document.getElementById("background").onmousemove = function (event) {
101                 new LiPanel(3, 3).create(event.clientX, event.clientY);
102             }
103             setInterval(function () {
104                 new Fruit().create();
105             }, 500);
106         }
107         -->
108     </script>
109     <div id="demo">
110         <input id="Button1" type="button" value="button" onclick="javascript:new Panel(200,100).create();" />
111     </div>
112     <div id="background"></div>
113     </form>
114 </body>




 




 




 






            

            
posted @ 
2013-08-29 11:24 
萝卜丝小童鞋 
阅读(368) 
评论(0) 
 
收藏 
举报