jQuery 游戏开发基础

// 引入jQuery库
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
// 在HTML中添加canvas元素
<canvas id="gameCanvas" width="480" height="320" style="background-color: #000000;"></canvas>
 
// 初始化游戏
$(document).ready(function() {
    var canvas = $('#gameCanvas');
    var context = canvas.get(0).getContext('2d');
 
    // 游戏主循环
    function gameLoop() {
        // 清除画布
        context.clearRect(0, 0, canvas.width(), canvas.height());
 
        // 绘制游戏内容
        // 例如: 绘制一个红色的正方形
        context.fillStyle = '#FF0000'; // 设置填充颜色为红色
        context.fillRect(50, 50, 100, 100); // 绘制一个正方形
 
        // 继续请求下一个帧
        requestAnimationFrame(gameLoop);
    }
 
    // 开始游戏
    gameLoop();
});

这段代码展示了如何使用jQuery和HTML canvas元素来创建一个简单的游戏循环。它首先引入了jQuery库，并在文档加载完成后初始化游戏循环。游戏循环会在每一帧清除画布并绘制一个红色的正方形。这是一个基础示例，可以在此基础上进一步添加游戏逻辑。