React.js 经典游戏《打砖块》

Breakout! (react + canvas)

React.js, 游戏, 塔防

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var gameWidth = 800,
    gameHeight = document.documentElement.clientHeight,
    colors = ["#18582b", "#0c905d", "#00c78e", "#33dbff", "#3375ff", "#5733ff"];

var Game = React.createClass({
    displayName: "Game",

componentDidMount: function componentDidMount() {
        this.update();
    },
    update: function update() {
        var Width = gameWidth,
            Height = gameHeight,
            ctx = this.refs.canvas.getContext('2d'),
            brickWidth = Width / 10 - 2.25;
        var ball = {
                x: Width / 2 - 3,
                y: Height / 2 - 3,
                radius: 6,
                speedX: 0,
                speedY: 6
            },
            paddle1 = {
                w: 100,
                h: 10,
                x: Width / 2 - 100 / 2, // 100 is paddle.w
                y: Height - 10,
                speed: 6
            },
            bricks = [],
            bonuses = [],
            ballOn = false,
            color = undefined,
            gameOver = 0; // 1 you lost - 2 you win

function draw() {
            ctx.clearRect(0, 0, Width, Height);
            ctx.fillStyle = "#333";
            ctx.fillRect(0, 0, Width, Height);
            // paddle
            ctx.fillStyle = "#fff";
            ctx.fillRect(paddle1.x, paddle1.y, paddle1.w, paddle1.h);

if (ballOn === false) {
                ctx.font = "14px Roboto Mono";
                ctx.textAlign = "center";
                ctx.fillText("Press spacebar to start a new game.", Width / 2, Height / 2 - 25);
                ctx.font = "12px Roboto Mono";
                ctx.fillText("Move with arrow keys or A & D.", Width / 2, Height / 2 + 25);
                if (gameOver === 1) {
                    ctx.font = "52px Roboto Mono";
                    ctx.fillText("YOU LOST!", Width / 2, Height / 2 - 90);
                    ctx.font = "36px Roboto Mono";
                    ctx.fillText("Keep trying!", Width / 2, Height / 2 - 50);
                } else if (gameOver === 2) {
                    ctx.font = "52px Roboto Mono";
                    ctx.fillText("YOU WON!", Width / 2, Height / 2 - 90);
                    ctx.font = "36px Roboto Mono";
                    ctx.fillText("Congratulations!", Width / 2, Height / 2 - 50);
                }
            }
            // ball
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            ctx.fill();
            //bricks
            for (var i = 0; i < bricks.length; i++) {
                ctx.fillStyle = bricks[i].color;
                ctx.fillRect(bricks[i].x, bricks[i].y, bricks[i].w, bricks[i].h);
            }
            for (var i = 0; i < bonuses.length; i++) {
                // reduce paddle
                if (bonuses[i].type === 1) {
                    color = "#c0392b";
                    ctx.fillStyle = color;
                    ctx.fillRect(bonuses[i].x, bonuses[i].y, bonuses[i].w, bonuses[i].h);
                } // increase paddle
                else if (bonuses[i].type === 2) {
                    color = "#27ae60";
                    ctx.fillStyle = color;
                    ctx.fillRect(bonuses[i].x - bonuses[i].w / 2, bonuses[i].y, bonuses[i].w * 2, bonuses[i].h);
                } // ball speedY --
                else if (bonuses[i].type === 3) {
                    color = "#2980b9";
                    ctx.fillStyle = color;
                    ctx.beginPath();
                    ctx.arc(bonuses[i].x, bonuses[i].y, ball.radius - 2, 0, Math.PI * 2);
                    ctx.fill();
                } // ball speedY ++
                else {
                    color = "#f1c40f";
                    ctx.fillStyle = color;
                    ctx.beginPath();
                    ctx.arc(bonuses[i].x, bonuses[i].y, ball.radius + 2, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
        }

function loop() {
            move();
            draw();
            requestAnimationFrame(loop);
        }

requestAnimationFrame(loop);
    },
    render: function render() {
        return React.createElement(
            "div",
            null,
            React.createElement("canvas", {
                ref: "canvas",
                width: gameWidth,
                height: gameHeight,
                id: "gameCanvas"
            })
        );
    }
});

ReactDOM.render(React.createElement(Game, null), document.getElementById('app'));

编译

CSS

HTML

Breakout! (react + canvas)

React.js, 游戏, 塔防

编辑器支持Emmet

快捷键

Breakout! (react + canvas)

React.js, 游戏, 塔防

React.js做的RPG游戏《危险的员工》

React.js 数字记忆游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：