html5在画布上绘制自己的按钮用作控制器的源代码

首页 > html游戏

html5在画布上绘制自己的按钮用作控制器的源代码

51自学网 http://www.51zixue.net

画布上的控制器

我们还可以在画布上绘制自己的按钮，并将其用作控制器

Example

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();

}

Add a new function that figures out if a component, in this case a button, is clicked.

Start by adding event listeners to check if a mouse button is clicked (mousedown and mouseup). To deal with touch screens, also add event listeners to check if the screen is clicked on (touchstart and touchend):

Example

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);

    }

}

Now the myGameArea object has properties that tells us the x- and y-coordinates of a click. We use theese properties to check if the click was performed on one of our blue buttons.

The new method is called clicked, it is a method of the component constructor, and it checks if the component is being clicked.

In the updateGameArea function, we take the neccessarry actions if one of the blue buttons is clicked:

Example

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();

}

完整源代码：

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

}

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

</head>

var myGamePiece;

var myUpBtn;

var myDownBtn;

var myLeftBtn;

var myRightBtn;

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();

}

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);

}

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();

}

</script>

<p>点击蓝色的“按钮”，使红色方块移动。</p>

</body>

</html>

 查看效果>>

上一篇：html5触摸屏幕来控制游戏的源代码下一篇：html5游戏中增加障碍的源代码-1