最新的Web開發教程
 

HTML遊戲控制器

❮上一頁 下一頁章❯

按動按鈕，移動紅色方形：







得到控制

現在，我們要控制紅場。

添加四個按鈕，上，下，左，右。

寫的函數的每個按鈕來在所選擇的方向上移動的組件。

使兩個新的屬性component的構造，並呼籲他們speedX和speedY 。 這些屬性被用作速度的指標。

添加的功能component構造，稱為newPos()它使用speedX和speedY屬性來更改組件的位置。

該newpos功能是從updateGameArea功能繪製組件之前，叫做：

例

<script>
function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
     this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height) ;
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
    }
}

function updateGameArea() {
    myGameArea.clear() ;
    myGamePiece.newPos();
    myGamePiece.update();
}

function moveup() {
    myGamePiece.speedY -= 1;
}

function movedown() {
    myGamePiece.speedY += 1;
}

function moveleft() {
    myGamePiece.speedX -= 1;
 }

function moveright() {
    myGamePiece.speedX += 1;
 }
</script>

<button onclick="moveup()">UP</button>
<button onclick="movedown()">DOWN</button>
<button onclick="moveleft()">LEFT</button>
<button onclick="moveright()">RIGHT</button>
試一試»

停止移動

如果你願意，你可以當您鬆開按鈕使紅色正方形停止。

添加將設定的速度指標0的功能。

為了應對正常屏幕和觸摸屏，我們將添加代碼為兩個設備：

例

function stopMove() {
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
}
</script>

<button omousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup() ">UP</button>
<button omousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()" >DOWN</button>
<button omousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()" >LEFT</button>
<button omousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()" >RIGHT</button>
試一試»

鍵盤作為控制器

我們也可以使用鍵盤上的方向鍵控制紅場。

創建，檢查是否有鍵被按下的方法，以及設定key的的屬性myGameArea對象的關鍵碼。 當按鍵被釋放時，設置key屬性為false ：

例

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            myGameArea.key = e.keyCode;
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.key = false;
        })
     },
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

然後，如果按下方向鍵之一，我們可以將紅色方塊：

例

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
    if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
    if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
    if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
    if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
    myGamePiece.newPos();
    myGamePiece.update();
}
試一試»

多鍵按下

如果什麼多個鍵被按下的同時？

在上面的例子中，組件只能水平或垂直移動。 現在，我們要的分量也斜走。

創建一個keys 陣列用於myGameArea對象，並插入一個元素為每按下此鍵，並給它的價值true ，直到關鍵是不再按值保持為真，則值變為false的keyup事件偵聽器函數：

例

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = true;
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = false;
        })
     },
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

 function updateGameArea() {
    myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
    if ( myGameArea.keys && myGameArea.keys[37] ) {myGamePiece.speedX = -1; }
    if ( myGameArea.keys && myGameArea.keys[39] ) {myGamePiece.speedX = 1; }
    if ( myGameArea.keys && myGameArea.keys[38] ) {myGamePiece.speedY = -1; }
    if ( myGameArea.keys && myGameArea.keys[40] ) {myGamePiece.speedY = 1; }
    myGamePiece.newPos();
    myGamePiece.update();
}
試一試»

使用鼠標光標作為一個控制器

如果你想使用鼠標控制紅色方塊，加入方法myGameArea對象更新x和鼠標光標的y坐標：。

例

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.canvas.style.cursor = "none"; //hide the original cursor
         this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('mousemove', function (e) {
            myGameArea.x = e.pageX;
            myGameArea.y = e.pageY;
        })
     },
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

然後我們就可以使用鼠標光標移動的紅色方塊：

例

function updateGameArea() {
    myGameArea.clear();
    if (myGameArea.x && myGameArea.y) {
        myGamePiece.x = myGameArea.x;
        myGamePiece.y = myGameArea.y;
    }
     myGamePiece.update();
}
試一試»

觸控遊戲畫面

我們也可以控制在觸摸屏上紅色正方形。

在添加方法myGameArea使用x和那裡的觸摸屏幕，y坐標的對象：

例

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('touchmove', function (e) {
            myGameArea.x = e.touches[0].screenX;
            myGameArea.y = e.touches[0].screenY;
        })
     },
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

然後，如果用戶觸摸屏幕，使用相同的代碼，因為我們沒有為鼠標光標，我們可以將紅色方塊：

例

function updateGameArea() {
    myGameArea.clear();
    if (myGameArea.touchX && myGameArea.touchY) {
        myGamePiece.x = myGameArea.x;
        myGamePiece.y = myGameArea.y;
    }
     myGamePiece.update();
}
試一試»

在畫布控制器

我們也可以在畫布上繪製自己的按鈕，並把它們作為控制器：

例

function startGame() {
  myGamePiece = new component(30, 30, "red" , 10, 120);
  myUpBtn = new component(30, 30, "blue" , 50, 10);
  myDownBtn = new component(30, 30, "blue" , 50, 70);
  myLeftBtn = new component(30, 30, "blue" , 20, 40);
  myRightBtn = new component(30, 30, "blue" , 80, 40);
  myGameArea.start();
}

添加新的函數，計算出如果一個組件，在此情況下的一個按鈕，當點擊。

通過添加事件偵聽器來檢查，如果鼠標按鈕被點擊啟動( mousedown and mouseup ) 為了應對觸摸屏，還可以添加事件偵聽器來檢查是否點擊了屏幕( touchstart and touchend )

例

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('mousedown', function (e) {
            myGameArea.x = e.pageX;
            myGameArea.y = e.pageY;
        })
        window.addEventListener('mouseup', function (e) {
            myGameArea.x = false;
            myGameArea.y = false;
        })
        window.addEventListener('touchstart', function (e) {
            myGameArea.x = e.pageX;
            myGameArea.y = e.pageY;
        })
        window.addEventListener('touchend', function (e) {
            myGameArea.x = false;
            myGameArea.y = false;
        })
     },
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

現在myGameArea對象具有屬性告訴我們的x和點擊的y坐標。 我們使用theese屬性，以檢查是否點擊了對我們的藍色按鈕中的一個進行的。

這種新方法被稱為clicked ，它是一個方法component構造函數，它檢查是否被點擊的組件。

在updateGameArea功能，我們採取的行動neccessarry如果單擊藍色按鈕之一：

例

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.clicked = function() {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var clicked = true;
        if ((mybottom < myGameArea.y) || (mytop > myGameArea.y)
         || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
            clicked = false;
        }
        return clicked;
    }
 }

function updateGameArea() {
    myGameArea.clear();
    if (myGameArea.x && myGameArea.y) {
        if (myUpBtn.clicked()) {
            myGamePiece.y -= 1;
        }
        if (myDownBtn.clicked()) {
            myGamePiece.y += 1;
        }
        if (myLeftBtn.clicked()) {
            myGamePiece.x += -1;
        }
        if (myRightBtn.clicked()) {
            myGamePiece.x += 1;
        }
    }
    myUpBtn.update();
    myDownBtn.update();
    myLeftBtn.update();
    myRightBtn.update();
    myGamePiece.update();
}
試一試»

❮上一頁 下一頁章❯