当前位置:首页 > 技术文章 > 正文内容

用cursor生成一个平台跳跃游戏DEMO

arlanguage1周前 (04-25)技术文章7

1、安装cursor:略过

2、登录cursor:略过

3、在右侧chat输入:用JS创建平台跳跃游戏,点击send


4、生成代码,并保存代码


const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 加载玩家图片
const playerImage = new Image();
playerImage.src = 'player.png';  // 请确保在同一目录下有 player.png 文件

// 玩家属性
const player = {
    x: 100,
    y: 200,
    width: 30,
    height: 30,
    speed: 5,
    jumpForce: 12,
    gravity: 0.5,
    velocityY: 0,
    isJumping: false
};

// 平台数组
const platforms = [
    { x: 0, y: 350, width: 800, height: 50 },    // 地面
    { x: 300, y: 250, width: 200, height: 20 },  // 平台1
    { x: 100, y: 150, width: 200, height: 20 },  // 平台2
    { x: 500, y: 200, width: 200, height: 20 }   // 平台3
];

// 键盘控制
const keys = {
    left: false,
    right: false,
    up: false
};

// 事件监听
document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft') keys.left = true;
    if (e.key === 'ArrowRight') keys.right = true;
    if (e.key === 'ArrowUp' && !player.isJumping) {
        keys.up = true;
        player.isJumping = true;
        player.velocityY = -player.jumpForce;
    }
});

document.addEventListener('keyup', (e) => {
    if (e.key === 'ArrowLeft') keys.left = false;
    if (e.key === 'ArrowRight') keys.right = false;
    if (e.key === 'ArrowUp') keys.up = false;
});

// 碰撞检测
function checkCollision(rect1, rect2) {
    return rect1.x < rect2.x + rect2.width &&
           rect1.x + rect1.width > rect2.x &&
           rect1.y < rect2.y + rect2.height &&
           rect1.y + rect1.height > rect2.y;
}

// 更新游戏状态
function update() {
    // 水平移动
    if (keys.left) player.x -= player.speed;
    if (keys.right) player.x += player.speed;

    // 应用重力
    player.velocityY += player.gravity;
    player.y += player.velocityY;

    // 检查与平台的碰撞
    player.isJumping = true;
    for (let platform of platforms) {
        if (checkCollision(player, platform)) {
            if (player.velocityY > 0) {
                player.y = platform.y - player.height;
                player.velocityY = 0;
                player.isJumping = false;
            }
        }
    }

    // 边界检查
    if (player.x < 0) player.x = 0;
    if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
    if (player.y + player.height > canvas.height) {
        player.y = canvas.height - player.height;
        player.velocityY = 0;
        player.isJumping = false;
    }
}

// 绘制游戏画面
function draw() {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制玩家
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(player.x, player.y, player.width, player.height);

    // 绘制平台
    ctx.fillStyle = '#00FF00';
    platforms.forEach(platform => {
        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
    });
}

// 游戏主循环
function gameLoop() {
    update();
    draw();
    requestAnimationFrame(gameLoop);
}

// 开始游戏
gameLoop(); 

5、运行index.html



总结:跳跃反应流畅

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/4100.html

分享给朋友:

“用cursor生成一个平台跳跃游戏DEMO” 的相关文章

logstash+ES+kibana搭建日志收集分析系统

日志监控和分析在保障业务稳定运行时,起到了很重要的作用,不过一般情况下日志都分散在各个生产服务器,且开发人员无法登陆生产服务器,这时候就需要一个集中式的日志收集装置,对日志中的关键字进行监控,触发异常时进行报警,并且开发人员能够查看相关日志。logstash+elasticsearch+kibana...

利用Nginx正向代理实现局域网电脑访问外网

引言在网络环境中,有时候我们需要让局域网内的电脑访问外网,但是由于网络策略或其他原因,直接访问外网是不可行的。这时候,可以借助 Nginx 来搭建一个正向代理服务器,实现局域网内电脑通过 Nginx 转发访问外网的需求。在工作中我遇到了一个类似的情况:在公司网络中,由于管理要求,局域网内的电脑不能直...

【网络安全】关于PHP Study nginx解析高危漏洞的预警通报

网络安全近日,山石网科安全研究院监测发现PHPStudy Windows最新版本存在nginx解析漏洞,可以造成任意代码执行。一、漏洞情况phpStudy是一个PHP调试环境的程序集成包,该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装...

服务器排障nginx 499 错误地解决

问题描述:近期平台对外开放了数据查询接口,在数据量特别大时,返回结果时间可能会超过3秒,接口开放后,系统本身调用没有问题,其他第三方平台接入时,总会报链接超时问题;问题原因:查看tomcat日志无任何错误,一开始以为是tomcat接收参数最大限制问题,对tomcat做了一次整体优化,修改连接数、修改...

Nginx实战-监控nginx.conf配置文件,配置文件修改自动重启nginx

1.1 实现目标在学习或者进行nginx测试的时候,耗费在 nginx -s reload/stop 上的命令时间很多,修改任意内容都需要重新启动或者停止启动,基本上状态就是在下面5个状态间来回切换vim nginx.conf修改nginx.conf保存nginx.conf重启nginx刷新浏览器....

网站nginx配置限制单个IP访问频率,预防DDOS恶意攻击

一、简介对于网站来说,尤其是流量较大出名的网站,经常遇到攻击,如DDOS攻击等,虽然有些第三方,如Cloudflare可以挡,但对于动态网站PHP来说,只能挡一部分。这时候需要对于单个IP恶意攻击做出限流。nginx的两个模块可以限流。nginx两个限流模块:连接频率限制,ngx_http_lim...