1.5.2. Control by button - Stop move when onmouseup

 


Demo : https://www.lenlop123.com/2020/09/15b-control-stop-move_25.html

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
    canvas {
        border: 1px solid #d3d3d3;
        background-color: #f1f1f1;
    }
</style>

<div>
    <canvas id="canvas" class="canvas"></canvas>
</div>

<script>

    var myGamePiece;

    // hàm onload sẽ chạy sau cùng, sau khi load đủ dữ liệu
    window.onload = function () {
        startGame()
    };

    function startGame() {
        myGamePiece = new component(30, 30, "red", 10, 120);    // vẽ 1 component        
        myGameArea.start();     // khởi tạo canvas

    }

    var myGameArea = {
        canvas: document.getElementById('canvas'),
        start: function () {
            this.canvas.width = 480;                        // Lấy thẻ HTML Canvas
            this.canvas.height = 270;
            this.context = this.canvas.getContext("2d");    // Vẽ ở mô hình 2D            
            this.interval = setInterval(updateGameArea, 20);    // Vẽ lại hình mỗi 20ms
        },
        clear: function () {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
    }

    // khai báo cấu trúc 1 component và gán cho 1 biến nào đó
    function component(width, height, color, x, y) {
        // khai báo ban đầu của component
        this.width = width;
        this.height = height;
        this.speedX = 0;
        this.speedY = 0;
        this.x = x;
        this.y = y;

        // vẽ lại component
        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;
    }

    function clearmove() {
        myGamePiece.speedX = 0;
        myGamePiece.speedY = 0;
    }


</script>

<div style="text-align:center;width:480px;">
  <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
  <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
  <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
  <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
</div>

<p>If you click a button the red square will start moving. The movement will stop when you stop pressing th button.</p>
<p>We have added the ontouchstart event on the buttons, to make this example work for touch devices.</p>




Nhận xét