zoukankan      html  css  js  c++  java
  • jsDOM编程-小球在盒子里来回撞击

    首先写一个小页面;页面需要一个div 这个div就是盒子,然后在div里在包含一个子div 这个子div就包含一张小球的图片

    代码:

        <!doctype html>

        <html>

         <head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><title>小球碰撞游戏</title><head>

        <body>

    <div id="gamescroll" style="600px;height:400px;position:absolute;top:0px;left:0px;border:1px solid black">

       <div id="qiu"><img src="qiu.gif"/></div>

    </div>

    <script type="text/javascript" language="javascript">

            function $(id){ return document.getElementById(id);};

             function TinyGame(x,y,direx,direy){

                          this.x =x ;//横坐标

                          this.y = y;//纵坐标

                           this.direx = direx; //x方向移动的值

                         this.direy = direy;//y方向移动的值

                        this.moveqiu  = function(){

                              this.x += this.direx;

                              this.y += this.direy;

                           $("qiu").style.left = this.x +'px';

                          $("qiu").style.top = this.y+'px';

                         if(this.x+$('qiu').offsetWidth >= $("gamescroll").offsetWidth || this.x <= 0){

                                        /*如果x方向移动的距离+小球的实际宽度(offsetWidth-在浏览器里的实际宽度,offsetHeight--在浏览器里的实际高度)>=盒子的实际宽度 或者 x方向移动的距离小于等于0

                                            就表示到达了边界 

                                      */

                                         this.direx = -this.direx;//正变负 负变正  表示处于两个不同的边界的情况处理

       if(this.y+$('qiu').offsetHeight >= $("gamescroll").offsetHeight || this.y <= 0){

                                     

                                         this.direy= -this.direy;//正变负 负变正  表示处于两个不同的边界的情况处理

                    }

    }

       var TG1 = new TinyGame(0,0,1,1);

    setInterval("TG1->moveqiu()",500);

    </script>

    </body>

    </html>

    有耕耘、有搬运、共学习
  • 相关阅读:
    残缺的字符串
    [BZOJ3513: [MUTC2013]idiots]
    FFT感性瞎扯
    Quartz框架简介
    异常状态码总结
    【SSM】拦截器的原理、实现
    FastDFS实现文件上传下载实战
    分布式文件系统FastDFS设计原理(转)
    FastDFS简介
    【设计模式】观察者模式
  • 原文地址:https://www.cnblogs.com/YangJieCheng/p/5679513.html
Copyright © 2011-2022 走看看