html**：
style
="margin
: auto;
width
: 1000px;
">
"btn1"
>
開始運動button
>
"btn2"
>
停止運動button
>
div>
"box"
style
="height
: 500px;
width
: 1000px;
margin
: auto;
border
: 5px solid red;
position
: relative;
">
"ball"
style
="width
: 50px;
height
: 50px;
border-radius
: 50%;
background-color
: pink;
position
: absolute;
left
: 0;
bottom
: 0;
">
div>
div>
var btn1 = document.
getelementbyid
("btn1");
var btn2 = document.
getelementbyid
("btn2");
var ball = document.
getelementbyid
("ball");
var box = document.
getelementbyid
("box");
var timer =
null
;var x =1;
//控制left值變化的變數
var v =1;
//left值每次變化的固定值
var y =1;
//控制bottom變化的變數
var k =1;
//bottom值每次變化的固定值
btn2.
onclick
=function()
btn1.
onclick
=function()
function
turn()
if(y <
0|| y >= box.clientheight - ball.clientheight)
x += v;
//每次定時器執行改變的left值
y += k;
//每次定時器執行時改變的bottom的值
ball.style.left = x +
"px"
; ball.style.bottom = y +
"px"
;}
使用pgzero實現小球彈跳效果
程式 做了如下操作 1 引入pgzero庫 2 定義幕布的長寬 3 定義小球的中心座標 半徑 移動速度 4 定義draw函式 繪製模組 對每幀畫面進行繪製 5 定義update函式 更新模組 在每幀畫面繪製之前更新物件的變數 6 執行遊戲 完整 如下 import pgzrun 引入pgzero庫 ...
關於js實現小球遊戲
要實現的功能 1.建立綠色小球 2.綠色小球的隨機移動 3.檢測綠色小球和紅色球的碰撞 4.拖拽紅色球 檢測邊界碰撞 5.定時器的設定和停止 用到的方法 1.window.location.reload 2.setinterval 定時器 3.css3.0屬性 cursor的用法 url需使用的自定...
js事件之動畫效果 滾動的小球
向左 向右暫停 向下向上 boxvar o document.queryselector box 獲取元素節點 var t 為定時器設定變數 var a 0 為定時器的左右方向設定變數 document.queryselectorall button 0 onclick function 將向左按鈕...