HTML5打乒乓球的机器人

AlphaGo机器人围棋无敌，打乒乓球电脑也是无敌的。

html5, game, sport

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

class Vector {
    constructor(x = 0, y = 0) {
        this.x = x;
        this.y = y;
    }
    get len() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    }
    set len(value) {
        const f = value / this.len;
        this.x *= f;
        this.y *= f;
    }
}

class Rect {
    constructor(x = 0, y = 0) {
        this.pos = new Vector(0, 0);
        this.size = new Vector(x, y);
    }
    get left() {
        return this.pos.x - this.size.x / 2;
    }
    get right() {
        return this.pos.x + this.size.x / 2;
    }
    get top() {
        return this.pos.y - this.size.y / 2;
    }
    get bottom() {
        return this.pos.y + this.size.y / 2;
    }
}

class Ball extends Rect {
    constructor() {
        super(15, 15);
        this.vel = new Vector;
    }
}

class Player extends Rect {
    constructor() {
        super(20, 100);
        this.vel = new Vector;
        this.score = 0;
        this._lastPos = new Vector;
    }
    update(dt) {
        this.vel.y = (this.pos.y - this._lastPos.y) / dt;
        this._lastPos.y = this.pos.y;
    }
}

class Pong {
    constructor(canvas) {
        this._canvas = canvas;
        this._context = canvas.getContext('2d');
        this.initialSpeed = 250;
        this.ball = new Ball;
        this.players = [
            new Player,
            new Player,
        ];
        this.players[0].pos.x = 55;
        this.players[1].pos.x = this._canvas.width - 55;
        this.players.forEach(p => p.pos.y = this._canvas.height / 2);
        let lastTime = null;
        this._frameCallback = (millis) => {
            if (lastTime !== null) {
                const diff = millis - lastTime;
                this.update(diff / 1000);
            }
            lastTime = millis;
            requestAnimationFrame(this._frameCallback);
        };
        this.reset();
    }
    clear() {
        this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
    }
    collide(player, ball) {
        if (player.left < ball.right && player.right > ball.left &&
            player.top < ball.bottom && player.bottom > ball.top) {
            ball.vel.x = -ball.vel.x * 1.05;
            const len = ball.vel.len;
            ball.vel.y += player.vel.y * .2;
            ball.vel.len = len;
        }
    }
    draw() {
        this.clear();
        this.drawRect(this.ball);
        this.players.forEach(player => this.drawRect(player));
    }
    drawRect(rect) {
        this._context.fillRect(rect.left, rect.top, rect.size.x, rect.size.y);
    }
    play() {
        const b = this.ball;
        if (b.vel.x === 0 && b.vel.y === 0) {
            b.vel.x = 200 * (Math.random() > .5 ? 1 : -1);
            b.vel.y = 200 * (Math.random() * 2 - 1);
            b.vel.len = this.initialSpeed;
        }
    }
    reset() {
        const b = this.ball;
        b.vel.x = 0;
        b.vel.y = 0;
        b.pos.x = this._canvas.width / 2;
        b.pos.y = this._canvas.height / 2;
    }
    start() {
        requestAnimationFrame(this._frameCallback);
    }
    update(dt) {
        const cvs = this._canvas,
            ball = this.ball;
        ball.pos.x += ball.vel.x * dt;
        ball.pos.y += ball.vel.y * dt;
        if (ball.right < 55 || ball.left > cvs.width - 55) {
            this.reset();
        }
        if (ball.vel.y < 0 && ball.top < 0 ||
            ball.vel.y > 0 && ball.bottom > cvs.height) {
            ball.vel.y = -ball.vel.y;
        }
        this.players[1].pos.y = ball.pos.y;
        this.players.forEach(player => {
            player.update(dt);
            this.collide(player, ball);
        });
        this.draw();
    }
}

const mondrian = document.querySelector("#canvas"),
    pong = new Pong(mondrian);

mondrian.addEventListener('click', () => pong.play());
mondrian.addEventListener('touch', () => pong.play());

document.body.addEventListener('mousemove', event => {
    const scale = event.offsetY / event.target.getBoundingClientRect().height;
    pong.players[0].pos.y = mondrian.height * scale;
});

document.body.addEventListener('touchmove', event => {
    e.preventDefault();
    var touch = e.targetTouches[0];
    if (touch) {
        const scale = touch.offsetY / touch.target.getBoundingClientRect().height;
        pong.players[0].pos.y = canvas.height * scale;
    }
});

pong.start();

编译

CSS

HTML

AlphaGo机器人围棋无敌，打乒乓球电脑也是无敌的。

html5, game, sport

编辑器支持Emmet

快捷键

AlphaGo机器人围棋无敌，打乒乓球电脑也是无敌的。

html5, game, sport

HTML5 GSAP星球大战BB8机器人逃亡动画

HTML5 P5.js 自动行走的蜘蛛AI机器人

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：