利用JS書寫一個紅色的球體在窗體中來回碰撞

CSS代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        /*設置樣式*/
            #rect{
                width: 75px;
                height: 75px;
                /*設置為圓形*/
                border-radius:100%;
                background-color: #FF0000;
                position: fixed;
            }
            
        </style>
        <!--引用JS代碼-->
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body>
        <div id="rect"></div>
    </body>
</html>

JS代碼

// JS是弱語言類型，一個變量可以賦任意類型
var rect;
var x=0,y=0,speedX=5,speedY=5;
window.onload = function(){
    rect = document.getElementById("rect"); 
    setInterval(moveRect,50);
}

function moveRect(){
    x+=speedX;
    y+=speedY;
    //超出左邊距
    if(x<0){
        speedX = Math.abs(speedX);
    }
    //超出上邊距
    if(y<0){
        speedY = Math.abs(speedY);
    }
    // 超出右邊距
    if(x>window.innerWidth - 75){
        speedX = -Math.abs(speedX);
    }
    //超出下邊距
    if(y>window.innerHeight - 75){
        speedY = -Math.abs(speedY);
    }
    rect.style.left=x+"px";
    rect.style.top=y+"px";
}
效果圖
效果圖
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前幾天剛剛學完css，這兩天開始進軍js部分，看了一些老師們的操作視頻，有理論的，有展示的現象得到的一些結論的東西...
    流著萬條永遠的河閱讀 792評論 3贊 3
  • 由于業務需要，最近開發并總結了關于JavaScript和原生app的交互的一些實現方式。 通常情況下，我們加載一個...
    __huangkun__閱讀 6,378評論 2贊 15
  • 戴望舒彳亍過的雨巷，舊窗臺上還擺放著我的猜想。 丁香姑娘的裙擺如果沒鐫刻碎花，我的白球鞋能否得青石板一歡喜？ 阿婆...
    蔬菜肥閱讀 458評論 5贊 7
  • 雖然分手了，但是還是會有留戀，所以選擇將戀愛過程記錄下來，當做美好的回憶吧！雖然彼此不能在一起，我想若干年后看到這...
    Dasiy313112閱讀 461評論 0贊 3
  • 朋友新買了一雙紅色高跟鞋，十厘米的高跟將她原本令人艷羨的身材襯托的更加完美。穿上新鞋的她滿面春風，活脫脫的一個摩...
    晴空藍閱讀 248評論 1贊 1