昨天做了一個很小的遊戲，對作為新手的我來說，還算有點成就感吧，在這裡總結一下並與大家分享。當然，這個小遊戲還有些瑕疵，做的時候有很多情況沒有考慮到，只實現了最基本的功能。

       這個遊戲的基本介面是這樣的：

實現的功能就是：點選開始遊戲，出現上下左右四個按鈕，然後通過點選按鈕來改變馬里奧的位置，來抓取隨機出現的小蘑菇。

那麼實現這個功能，首要的就是思路，先想應該怎麼實現，然後再動手！主要需要從這幾方面去考慮：

1. HTML頁面怎麼寫？------>這需要HTML、CSS的知識；

2. JS事件怎麼實現？ ------->這個很重要。

先說第一點，其實還是需要與JS結合起來

         一開始，頁面只有一個按鈕（開始遊戲），然後就是一個盒子，裡面是一張圖片，這個容易；

        點選開始之後，出現了四個按鈕。我們可以想象到，這四個按鈕其實是存在的，也就是一開始就在HTML中寫好的，只不過我們把它隱藏起來了，那麼點選開始按鈕，讓它再顯示出來就可以了。除了多了四個按鈕，還多了一張圖片，並且它的位置是隨機的，這是實現該遊戲很關鍵的地方，因為後面的上下左右點選事件也會用到。

        我們學過CSS的都知道，要設定圖片在容器中的位置，方法比較多，其中有種方法比較直接，即絕對定位，但要設定位置時，有一個前提，即必須設position為絕對定位。

position:absolute;
top:10px;
left:20px;
 

        接下來就是設定位置的問題，即top值和left值，在style中，其實它們的值都是字串，比如說top:10px，其實它的top值為"10px"，所以在設定時需要注意。同時，為了設定小蘑菇圖片的位置是隨機的，還需要用到JavaScript的Math物件中的random()方法，它是用於生成0-1之間的隨機數。

整理下思路：要實現圖片位置隨機設定問題，需要這幾步：

        1. 隨機數的生成：

var x = Math.random();
 

var y = Math.random();

smg.style.top = x + "px";

smg.style.left = x + "px";

下來就是遊戲的主要功能，這四個按鈕對應四個方法，我們採用面向物件的思想，將這四個函式封裝在一個Mario物件這種，每次點選按鈕去調Mario物件的對應方法即可。那麼這四個按鈕的點選事件程式如何去寫？不難想到，點選一次按鈕，就相當於設定一次位置，上面我們已經將設定位置過程走了一遍，那麼這個過程相對來說就簡單了。但複雜的是，這次設定位置需要在之前的位置上進行加減，那麼涉及到之前位置的讀取，注意取到的top/left值也是字串，需要轉換成數值，然後再加減。下面，我只展示其中一個按鈕的功能程式碼：

this.Up = function (){
var i = document.getElementById("mario");  //得到Mario物件；

var i1 = document.getElementById("smg");   //得到小蘑菇物件;

var mres1 = i.style.top.substr(0, (i.style.top.length - 2));

var mres2 = i.style.left.substr(0, (i.style.left.length - 2));

var mres3 = i1.style.top.substr(0, (i.style.top.length - 2));

var mres4 = i1.style.left.substr(0, (i.style.left.length - 2));

var W1 = parseInt(mres1);

var W2 = parseInt(mres2);

var W3 = parseInt(mres3);

var W4 = parseInt(mres4);

window.alert("不能超出界線！");

else if(W1 + 80 == W3 && W2 + 80 == W4)

window.alert("遊戲結束！");

else

{

W1 -= 10;

i.style.top = W1 + "px";

}
}

本人也是初學階段，歡迎大家一起加入討論！