HTML5 游戏开发示例

这篇文章距离上次修改已过201天，其中的内容可能已经有所变动。

以下是一个简单的HTML5游戏开发示例，使用了Canvas和JavaScript来创建一个简单的飞机大战游戏：




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Game Development Example</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
 
    <script>
        var canvas = document.getElementById('gameCanvas');
        var ctx = canvas.getContext('2d');
 
        var player = {
            x: 200,
            y: 280,
            width: 30,
            height: 30,
            speed: 5
        };
 
        var enemy = {
            x: 200,
            y: 0,
            width: 30,
            height: 30,
            speed: 3
        };
 
        function drawPlayer() {
            ctx.fillStyle = 'blue';
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }
 
        function drawEnemy() {
            ctx.fillStyle = 'red';
            ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
        }
 
        function moveEnemy() {
            enemy.y += enemy.speed;
            if (enemy.y > 320) {
                enemy.y = 0;
            }
        }
 
        function movePlayer(e) {
            player.y = e.clientY - canvas.offsetTop - player.height / 2;
        }
 
        function checkCollision() {
            if (player.x < enemy.x + enemy.width &&
                player.x + player.width > enemy.x &&
                player.y < enemy.y + enemy.height &&
                player.height + player.y > enemy.y) {
                alert('Game Over!');
            }
        }
 
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawEnemy();
            moveEnemy();
            checkCollision();
        }
 
        setInterval(gameLoop, 30);
        canvas.addEventListener('mousemove', movePlayer);
    </script>
</body>
</html>

这段代码创建了一个简单的游戏，其中有一个玩家和一个敌人，玩家可以通过鼠标移动来控制。游戏在一个循环中不断更新，玩家需要避免与敌人相撞，否则游戏结束。这个示例教学了如何使用HTML5的Canvas元素来绘图，以及如何使用JavaScript来处理游戏逻辑。

HTML5 游戏开发示例

评论已关闭

推荐阅读