HTML5是一種用于創建網頁的標記語言,可以實現簡單的動畫效果。下面是一個使用HTML5創建的簡單動畫游戲代碼。
<html> <head> <title>簡單動畫游戲</title> <style> #box { width: 50px; height: 50px; background-color: red; position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="box"></div> <script> // 獲取div元素 var box = document.querySelector('#box'); // 定義初始坐標及速度 var x = 0; var y = 0; var speedX = 1; var speedY = 1; // 定義運動函數 function move() { // 修改坐標 x += speedX; y += speedY; // 判斷是否撞墻 if (x < 0 || x >= window.innerWidth - box.offsetWidth) { speedX *= -1; } if (y < 0 || y >= window.innerHeight - box.offsetHeight) { speedY *= -1; } // 修改div元素的位置 box.style.left = x + 'px'; box.style.top = y + 'px'; } // 定時器,使div元素運動起來 setInterval(move, 10); </script> </body> </html>
以上代碼實現了一個小方塊在瀏覽器窗口中自動運動,并且在碰到窗口邊緣時反彈。我們可以根據需要修改速度、顏色、大小等參數,實現更加豐富的動畫效果。