你熟練掌握了JavaScript的語法，可是感覺自己的頁面缺乏一些互動體驗？那就試一試給頁面添加方塊拖動躲避游戲吧！

它的基本原理就是利用JavaScript實現(xiàn)一個方塊，在頁面中自由拖動，每當(dāng)接觸到障礙物就停止移動并跳出“Game Over”的提醒，如果成功躲避了所有障礙物，則彈出“恭喜過關(guān)！”的提示。

//定義變量
var block = document.getElementById("block");
var container = document.getElementById("container");
var obstacle = document.getElementById("obstacle");
var over = document.getElementById("over");
var success = document.getElementById("success");
//定義方塊的起始位置
var startX = 0;
var startY = 0;
//鼠標(biāo)按下時調(diào)用
block.onmousedown = function (event) {
startX = event.clientX - block.offsetLeft;
startY = event.clientY - block.offsetTop;
document.onmousemove = function (event) {
block.style.left = event.clientX - startX + "px";
block.style.top = event.clientY - startY + "px";
//判斷是否碰到障礙物
if (
block.offsetTop< obstacle.offsetTop + obstacle.offsetHeight &&
block.offsetTop + block.offsetHeight >obstacle.offsetTop &&
block.offsetLeft< obstacle.offsetLeft + obstacle.offsetWidth &&
block.offsetLeft + block.offsetWidth >obstacle.offsetLeft
) {
over.style.display = "block";
document.onmousemove = null;
}
//判斷是否躲避完所有障礙物
if (
block.offsetTop + block.offsetHeight< container.offsetHeight &&
over.style.display == "none"
) {
success.style.display = "block";
document.onmousemove = null;
}
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};

以上代碼中定義了變量，分別指向頁面中的方塊、容器、障礙物、跳出提示等元素，并定義了方塊的啟始位置。

鼠標(biāo)按下時調(diào)用callback函數(shù)，在該函數(shù)中計算了鼠標(biāo)點擊方塊時相對于方塊的位置，然后在document的mousemove事件中把方塊的left和top值設(shè)為鼠標(biāo)的位置減去相對位置，這樣就能讓方塊跟隨鼠標(biāo)自由移動。

而當(dāng)方塊與障礙物發(fā)生碰撞時，就設(shè)置提示元素的display為“block”，同時解除document的mousemove事件，這樣方塊就停止移動了。

另外，當(dāng)方塊成功躲避完所有障礙物時，就設(shè)置恭喜過關(guān)提示元素的display為“block”，并解除document的mousemove事件。這樣游戲就結(jié)束了。

實際上，在以上代碼的基礎(chǔ)上，你可以進一步添加隨機生成障礙物的代碼，增強游戲的難度和趣味性。

是不是很簡單呢？現(xiàn)在就試著在自己的頁面中添加方塊拖動躲避游戲吧！