Canvas 简单的方块爬升躲避游戏

点击方框开始游戏，每次点击操控方块上升一个方格，如果被漂移的红色方块碰到就算输。

game

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2072
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var FPS, H, INV_FPS, TOP, W,
        __hasProp = {}.hasOwnProperty,
        __extends = function(child, parent) {
            for (var key in parent) {
                if (__hasProp.call(parent, key)) child[key] = parent[key];
            }

function ctor() {
                this.constructor = child;
            }
            ctor.prototype = parent.prototype;
            child.prototype = new ctor();
            child.__super__ = parent.prototype;
            return child;
        };

W = 256;

H = 256;

FPS = 60;

TOP = 25;

INV_FPS = 1 / FPS;

noise.seed(Math.random());

$(function() {
        var $body, $canvas, Car, Charactor, Frog, Scene, button, ctx, draw, highscore, scene, update;
        Charactor = (function() {
            function Charactor(x, y, w, h) {
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
            }

Charactor.prototype.hit = function(opp) {
                return Math.abs(this.x - opp.x) < (this.w / 2 + opp.w / 2) && Math.abs(this.y - opp.y) < (this.h / 2 + opp.h / 2);
            };

return Charactor;

})();
        Car = (function(_super) {
            __extends(Car, _super);

function Car(x, y, dx) {
                this.dx = dx;
                Car.__super__.constructor.call(this, x, y, 16, 16);
                this.random = Math.random() * 10;
                this.r = 0;
            }

Car.prototype.draw = function(ctx) {
                ctx.save();
                ctx.strokeStyle = "#f0f";
                ctx.beginPath();
                ctx.rect(this.x - this.w / 2, this.y - this.h / 2, this.w, this.h);
                ctx.stroke();
                return ctx.restore();
            };

Car.prototype.update = function() {
                this.r += 0.01;
                return this.x = (this.x + (this.dx * (noise.perlin2(this.random, this.r) + 1) * INV_FPS + W)) % W;
            };

return Car;

})(Charactor);
        Frog = (function(_super) {
            __extends(Frog, _super);

function Frog() {
                Frog.__super__.constructor.call(this, W / 2, TOP + 20 * 11, 16, 16);
                this.isDead = false;
                this.prevButton = false;
                this.step = 0;
                this.orgY = this.y;
            }

Frog.prototype.draw = function(ctx) {
                ctx.save();
                if (this.isDead) {
                    ctx.strokeStyle = "#f00";
                } else {
                    ctx.strokeStyle = "#fff";
                }
                ctx.beginPath();
                ctx.rect(this.x - this.w / 2, this.y - this.h / 2, this.w, this.h);
                ctx.stroke();
                return ctx.restore();
            };

Frog.prototype.update = function(button) {
                if (!this.isDead) {
                    if (button && !this.prevButton) {
                        this.step += 1;
                        this.y = this.orgY - 10 * this.step;
                    }
                }
                return this.prevButton = button;
            };

return Frog;

})(Charactor);
        Scene = (function() {
            function Scene() {
                var i;
                this.frog = new Frog();
                this.cars = (function() {
                    var _i, _results;
                    _results = [];
                    for (i = _i = 0; _i <= 10; i = ++_i) {
                        _results.push(new Car(0, TOP + i * 20, (10 - i) * 5 + 50));
                    }
                    return _results;
                })();
                this.stateCount = 0;
                this.state = "ready";
                this.goNext = false;
                this.score = 0;
            }

Scene.prototype.changeState = function(newState) {
                console.log(newState);
                this.state = newState;
                return this.stateCount = 0;
            };

Scene.prototype.update = function(button) {
                var car, _i, _j, _len, _len1, _ref, _ref1;
                _ref = this.cars;
                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                    car = _ref[_i];
                    car.update();
                }
                switch (this.state) {
                    case "ready":
                        if (button) {
                            this.changeState("gaming");
                        }
                        break;
                    case "gaming":
                        _ref1 = this.cars;
                        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
                            car = _ref1[_j];
                            if (car.hit(this.frog)) {
                                this.frog.isDead = true;
                                this.changeState("gameover");
                            }
                        }
                        if (!this.frog.isDead) {
                            this.frog.update(button);
                            if (this.frog.step >= 24) {
                                this.changeState("ending");
                            }
                        }
                        break;
                    case "gameover":
                        if (this.stateCount > FPS * 2) {
                            this.goNext = true;
                        }
                        break;
                    case "ending":
                        if (this.stateCount > FPS * 5) {
                            this.goNext = true;
                        }
                }
                this.score = this.frog.step;
                return this.stateCount += 1;
            };

Scene.prototype.draw = function(ctx, highscore) {
                var car, _i, _len, _ref;
                ctx.save();
                ctx.strokeStyle = "#fff";
                ctx.scale(2, 2);
                ctx.clearRect(0, 0, W, H);
                _ref = this.cars;
                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                    car = _ref[_i];
                    car.draw(ctx);
                }
                this.frog.draw(ctx);
                switch (this.state) {
                    case "ready":
                        ctx.strokeText("FROG  FROG", W / 2 - 40, H / 2);
                        ctx.strokeText("CLICK TO START", W / 2 - 50, H / 2 + 50);
                        break;
                    case "gaming":
                        if (this.stateCount < FPS / 2) {
                            ctx.strokeText("GO", W / 2 - 20, H / 2);
                        }
                        break;
                    case "gameover":
                        ctx.strokeText("GAME OVER!!", W / 2 - 30, H / 2 + 0);
                        break;
                    case "ending":
                        ctx.strokeText("CONGRATULATIONS!!", W / 2 - 50, H / 2 + 0);
                }
                ctx.strokeText("SCORE " + this.score + "   HIGH SCORE " + highscore, 10, 10);
                return ctx.restore();
            };

return Scene;

})();
        $body = $("body");
        $canvas = $("canvas");
        ctx = $canvas[0].getContext("2d");
        button = false;
        scene = new Scene();
        highscore = 0;
        $canvas.bind("mousedown", function() {
            button = true;
            return true;
        });
        $body.bind("mouseup", function() {
            button = false;
            return true;
        });
        draw = function() {
            return scene.draw(ctx, highscore);
        };
        update = function() {
            scene.update(button);
            if (highscore < scene.score) {
                highscore = scene.score;
            }
            draw();
            if (scene.goNext) {
                return scene = new Scene();
            }
        };
        return setInterval((function(_this) {
            return function() {
                return update();
            };
        })(this), INV_FPS * 1000);
    });

}).call(this);

编译

CSS

HTML

点击方框开始游戏，每次点击操控方块上升一个方格，如果被漂移的红色方块碰到就算输。

game

编辑器支持Emmet

快捷键

点击方框开始游戏，每次点击操控方块上升一个方格，如果被漂移的红色方块碰到就算输。

game

Canvas 使用方向键操控的碰碰球小游戏

HTML5 Canvas一款有趣的多边形生长游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：