2D版跳一跳

PROMULGATOR

执笔┵写下情♂

浙江省杭州市

← 点击切换（原创）

→ jQuery点击查看照片集

相关代码

html5实现贪吃蛇小游戏

js井字棋小游戏

简易JS消消乐

js实现俄罗斯方块

CSS3实现3D旋转立方体

Html

Css

Js

var canvas = document.getElementById('stage');
var context = canvas.getContext('2d');
Math.randomRange = function(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}
var player = {
    x: 0,
    y: 300,
    width: 30,
    jumping: false, //标识是否跳跃中
    power: 0, //标识蓄力程度，决定跳多远
    speedY: 10 //标识Y轴上的速度，模拟重力加速度
}
var gameover = false;
var cameraMoving = false; //镜头是否移动中
var timerPowerUp; //蓄力操作用的计时器
var platforms = []; //存储所有生成的平台
//初始化平台
platforms.push({
    x: 0,
    width: 100
}, {
    x: 200,
    width: 100
});
var lastPlatform = platforms[platforms.length - 1]; //最新生成的平台
var currentPlatform = platforms[0]; //当前落脚的平台
var drawPlayer = function() {
    context.fillStyle = "blue";
    context.save();
    context.fillRect(player.x, player.y, player.width, player.width);
    context.restore();
}
var drawPlatform = function() {
    context.fillStyle = "#A3A3A3";
    context.save();
    platforms.forEach(function(platform) {
        context.fillRect(platform.x, 300 + player.width, platform.width, 300);
    });
    context.restore();
}
var drawTextFailed = function() {
    if (gameover) {
        context.fillStyle = "#000";
        context.save();
        context.font = "normal 30px sans-serif";
        context.textBaseline = 'top';
        var text = "FAILED";
        context.fillText(text, canvas.clientWidth / 2 - text.length * 30 / 2, 300);
        context.restore();
    }
}
//玩家跳跃中
var playerJumping = function() {
    if (player.jumping) {
        player.y -= player.speedY;
        player.speedY -= 0.7;
        player.x += player.power;
        if (player.y >= 300) {
            player.jumping = false;
            player.y = 300;
            player.power = 0;
            if (!iscurrentplatform()) {
                if (isfailed()) {
                    gameover = true;
                } else {
                    currentPlatform = lastPlatform;
                    generateNextPlatform();
                    cameraMoving = true;
                }
            }
        }
    }
}
//生成下一个平台
var generateNextPlatform = function() {
    var x = Math.randomRange(lastPlatform.x + 100, 500);
    var width = Math.randomRange(player.width, 100);
    lastPlatform = {
        x: x,
        width: width
    }
    platforms.push(lastPlatform);
}
//判断玩家位置是否在当前平台
var iscurrentplatform = function() {
    return player.x > currentPlatform.x - player.width && player.x < currentPlatform.x + currentPlatform.width;
}
//判断是否失败
var isfailed = function() {
    return player.x <= (lastPlatform.x - player.width) || player.x >= (lastPlatform.x + lastPlatform.width);
}
//移动镜头(场景整体移动)
var moveCamera = function() {
    if (cameraMoving) {
        player.x -= 10;
        platforms.forEach(function(platform) {
            platform.x -= 10;
        });
        if (player.x <= 0 || currentPlatform.x <= 0) {
            cameraMoving = false;
            if (player.x < 0) {
                player.x = 0;
            } else if (currentPlatform.x < 0) {
                currentPlatform.x = 0;
            }
        }
    }
}
//蓄力中
var PowerUping = function() {
    player.power += 1;
}
//开始蓄力
var PowerUp = function() {
    if (!gameover && !player.jumping) {
        timerPowerUp = setInterval(PowerUping, 100);
    }
}
//停止蓄力
var PowerUpStop = function() {
    if (!gameover && !player.jumping) {
        clearInterval(timerPowerUp);
        player.jumping = true;
        player.speedY = 10;
    }
}
//帧刷新时执行的其他操作
var withFrameUpdate = function() {
    playerJumping();
    moveCamera();
}
//帧绘制
var drawFrame = function() {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();
    drawPlatform();
    drawTextFailed();
    withFrameUpdate();
}
document.addEventListener("mousedown", PowerUp);
document.addEventListener("mouseup", PowerUpStop);
drawFrame();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

2D版跳一跳



代码描述：2D版跳一跳小游戏

6

最新

发表评论全部评论

暂时没有评论！

尘0

2018/7/1 17:12:41

哈哈哈可以的
回复

放逐丶0

2018/4/27 17:16:44

66
回复

Crane ♈0

2018/3/9 17:55:06

加上分数和弹簧效果就更好了
回复

苏然呐0

2018/1/23 8:58:11

输了好像要刷新网页才能重新开始0.0
回复

runner-bin0

2018/1/22 21:02:22

666
回复

WckY0

2018/1/22 19:07:09

好牛逼 -.- 回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>2D版跳一跳-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号