HTML+JavaScript+Canvas编写2D小游戏

由于原代码较长，我们将提供核心函数的示例代码。这个示例展示了如何在HTML页面中使用JavaScript和Canvas API创建一个简单的2D游戏场景，其中包含了玩家控制和敌人移动的逻辑。




<!DOCTYPE html>
<html>
<head>
    <title>2D Game Example</title>
    <style>
        canvas {
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="300"></canvas>
    <script>
        var canvas = document.getElementById('gameCanvas');
        var ctx = canvas.getContext('2d');
        var player = { x: 190, y: 240, width: 20, height: 40 };
        var enemies = [{ x: 50, y: 50, width: 20, height: 20 }, { x: 150, y: 180, width: 20, height: 20 }];
 
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
            // Draw player
            ctx.fillStyle = 'blue';
            ctx.fillRect(player.x, player.y, player.width, player.height);
 
            // Draw enemies
            ctx.fillStyle = 'red';
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
                enemy.x += 1; // Simple enemy movement
                if (enemy.x > canvas.width) enemy.x = 0;
            }
        }
 
        function update(event) {
            if (event.keyCode === 37) { // Left arrow key
                player.x -= 5;
            } else if (event.keyCode === 39) { // Right arrow key
                player.x += 5;
            }
            if (player.x < 0) player.x = canvas.width;
            if (player.x > canvas.width) player.x = 0;
        }
 
        // Start game loop
        setInterval(draw, 30);
        window.addEventListener('keydown', update);
    </script>
</body>
</html>

这段代码创建了一个简单的游戏，其中有一个玩家和几个敌人。玩家可以通过左右箭头键控制位置，敌人将简单地沿着画布边缘移动。这个示例提供了如何使用JavaScript和Canvas API来绘制简单图形、处理键盘输入和游戏循环的基础。

HTML+JavaScript+Canvas编写2D小游戏

评论已关闭

推荐阅读