[html5 canvas]用html5的canvas画一个可移动的方块

灰太狼 2022-04-18 04:48 398阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODYwNjUz_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>MyGame</title>
        <style>
            body{
                padding: 10px;
            }
            #myCanvas {
                margin: 0 auto;
                border: black 1px solid;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div>
        <div>
            
            <div>
                <canvas id="myCanvas" width="600px" height="600px"></canvas>
            </div>
            <div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" onclick="doMove.left()">←</button>
                    <button type="button" class="btn btn-default" onclick="doMove.right()">→</button>
                    <button type="button" class="btn btn-default" onclick="doMove.up()">↑</button>
                    <button type="button" class="btn btn-default" onclick="doMove.down()">↓</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        var width = 600;
        var height = 600;
        var speed = 10;
        var x = 0, y = 0;
        var ctx = document.getElementById("myCanvas").getContext("2d");
        document.body.onkeydown = function (evt) {
            var e = evt || event;
            switch (e.keyCode) {
                case 37:
                    doMove.left();
                    break;
                case 39:
                    doMove.right();
                    break;
                case 38:
                    doMove.up();
                    break;
                case 40:
                    doMove.down();
                    break;
            }
    
        }
    
    
        var doMove = {
            up: function () {
                y -= speed
                y < 0 ? y = 0 : y;
                drawRect(x, y)
            },
            down: function () {
                y += speed
                y > height - 50 ? y = height - 50 : y;
                drawRect(x, y)
            }, left: function () {
                x -= speed;
                x < 0 ? x = 0 : x;
                drawRect(x, y)
            }, right: function () {
                x += speed
                x > width - 50 ? x = width - 50 : x;
                drawRect(x, y)
            }
        }
    
    
        function drawRect(x, y) {
            ctx.clearRect(0, 0, width, height);
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.strokeStyle = "green";
            ctx.rect(x, y, 50, 50);
            ctx.stroke();
            ctx.closePath();
            ctx.fill();
        }
    
        drawRect(x, y)
    </script>
    </body>

### 多人在线移动 ###

用websocket netty做一个多人在线方块移动游戏

[https://github.com/yuyufeng1994/ws-game][https_github.com_yuyufeng1994_ws-game]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODYwNjUz_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODYwNjUz_size_16_color_FFFFFF_t_70]: /images/20220418/b90b5bb7d1ce434a914b77c43129a3d0.png
[https_github.com_yuyufeng1994_ws-game]: https://github.com/yuyufeng1994/ws-game
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODYwNjUz_size_16_color_FFFFFF_t_70 1]: /images/20220418/4b96ffd8dae742c58319861e1a78f57f.png