Portal:Gaming/Secret: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
K
K (+ a,d)
 
(28 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
{{(}}{{(}}subst:#timel: H:i {{!}} d. M Y{{)}}{{)}}
+
<html><script type="text/javascript">
 +
var animate, canvas, context, player, computer, ball, popup;
 +
 
 +
var width = 400;
 +
var height = 600;
 +
var bgColor = "#333333";
 +
var ballColor = "#eeeeee";
 +
var paddleColor = "#cccccc"
 +
 
 +
var keysDown = {};
 +
 
 +
var render = function () {
 +
    context.fillStyle = bgColor;
 +
    context.fillRect(0, 0, width, height);
 +
    player.render();
 +
    computer.render();
 +
    ball.render();
 +
};
 +
 
 +
var update = function () {
 +
    player.update();
 +
    computer.update(ball);
 +
    ball.update(player.paddle, computer.paddle);
 +
};
 +
 
 +
var step = function () {
 +
    update();
 +
    render();
 +
    animate(step);
 +
};
 +
 
 +
function Paddle(x, y, width, height) {
 +
    this.x = x;
 +
    this.y = y;
 +
    this.width = width;
 +
    this.height = height;
 +
    this.x_speed = 0;
 +
    this.y_speed = 0;
 +
}
 +
 
 +
Paddle.prototype.render = function () {
 +
    context.fillStyle = paddleColor;
 +
    context.fillRect(this.x, this.y, this.width, this.height);
 +
};
 +
 
 +
Paddle.prototype.move = function (x, y) {
 +
    this.x += x;
 +
    this.y += y;
 +
    this.x_speed = x;
 +
    this.y_speed = y;
 +
    if (this.x < 0) {
 +
        this.x = 0;
 +
        this.x_speed = 0;
 +
    } else if (this.x + this.width > 400) {
 +
        this.x = 400 - this.width;
 +
        this.x_speed = 0;
 +
    }
 +
};
 +
 
 +
function Computer() {
 +
    this.paddle = new Paddle(175, 10, 50, 10);
 +
}
 +
 
 +
Computer.prototype.render = function () {
 +
    this.paddle.render();
 +
};
 +
 
 +
Computer.prototype.update = function (ball) {
 +
    var x_pos = ball.x;
 +
    var diff = -((this.paddle.x + (this.paddle.width / 2)) - x_pos);
 +
    if (diff < 0 && diff < -4) {
 +
        diff = -5;
 +
    } else if (diff > 0 && diff > 4) {
 +
        diff = 5;
 +
    }
 +
    this.paddle.move(diff, 0);
 +
    if (this.paddle.x < 0) {
 +
        this.paddle.x = 0;
 +
    } else if (this.paddle.x + this.paddle.width > 400) {
 +
        this.paddle.x = 400 - this.paddle.width;
 +
    }
 +
};
 +
 
 +
function Player() {
 +
    this.paddle = new Paddle(175, 580, 50, 10);
 +
}
 +
 
 +
Player.prototype.render = function () {
 +
    this.paddle.render();
 +
};
 +
 
 +
Player.prototype.update = function () {
 +
    for (var key in keysDown) {
 +
        var value = Number(key);
 +
        if (value == 37 || value == 65) {
 +
            this.paddle.move(-4, 0);
 +
        } else if (value == 39 || value == 68) {
 +
            this.paddle.move(4, 0);
 +
        } else {
 +
            this.paddle.move(0, 0);
 +
        }
 +
    }
 +
};
 +
 
 +
function Ball(x, y) {
 +
    this.x = x;
 +
    this.y = y;
 +
    this.x_speed = 0;
 +
    this.y_speed = 3;
 +
}
 +
 
 +
Ball.prototype.render = function () {
 +
    context.beginPath();
 +
    context.arc(this.x, this.y, 5, 2 * Math.PI, false);
 +
    context.fillStyle = ballColor;
 +
    context.fill();
 +
};
 +
 
 +
Ball.prototype.update = function (paddle1, paddle2) {
 +
    this.x += this.x_speed;
 +
    this.y += this.y_speed;
 +
    var top_x = this.x - 5;
 +
    var top_y = this.y - 5;
 +
    var bottom_x = this.x + 5;
 +
    var bottom_y = this.y + 5;
 +
 
 +
    if (this.x - 5 < 0) {
 +
        this.x = 5;
 +
        this.x_speed = -this.x_speed;
 +
    } else if (this.x + 5 > 400) {
 +
        this.x = 395;
 +
        this.x_speed = -this.x_speed;
 +
    }
 +
 
 +
    if (this.y < 0 || this.y > 600) {
 +
        this.x_speed = 0;
 +
        this.y_speed = 3;
 +
        this.x = 200;
 +
        this.y = 300;
 +
    }
 +
 
 +
    if (top_y > 300) {
 +
        if (top_y < (paddle1.y + paddle1.height) && bottom_y > paddle1.y && top_x < (paddle1.x + paddle1.width) && bottom_x > paddle1.x) {
 +
            this.y_speed = -3;
 +
            this.x_speed += (paddle1.x_speed / 2);
 +
            this.y += this.y_speed;
 +
        }
 +
    } else {
 +
        if (top_y < (paddle2.y + paddle2.height) && bottom_y > paddle2.y && top_x < (paddle2.x + paddle2.width) && bottom_x > paddle2.x) {
 +
            this.y_speed = 3;
 +
            this.x_speed += (paddle2.x_speed / 2);
 +
            this.y += this.y_speed;
 +
        }
 +
    }
 +
};
 +
 
 +
function hideEgg() {
 +
 
 +
    var spots = $('.spot');
 +
 
 +
    if (spots.length == 0) {
 +
        return;
 +
    }
 +
 
 +
    var spot = $(spots[Math.floor(Math.random() * spots.length)]);
 +
 
 +
    spot.css('cursor', 'pointer');
 +
 
 +
    spot.click(function () {
 +
        if (popup) {
 +
            ball.x = 200;
 +
            ball.y = 300;
 +
            player.paddle = new Paddle(175, 580, 50, 10);
 +
            computer.paddle = new Paddle(175, 10, 50, 10);
 +
            $(popup).show();
 +
            return false;
 +
        }
 +
 
 +
        popup = document.createElement("div");
 +
        popup.setAttribute('class', 'popup');
 +
        document.getElementById('bodyContent').appendChild(popup);
 +
 
 +
        var bar = document.createElement("div");
 +
        bar.setAttribute('class', 'popup-bar');
 +
        popup.appendChild(bar);
 +
 
 +
        var heading = $('<h3></h3>');
 +
        heading.text('Frohe Ostern!');
 +
        $(bar).append(heading);
 +
 
 +
        var close = $('<button class="btn-close" title="Fenster schließen">X</button>');
 +
        close.click(function () {
 +
            $(popup).hide();
 +
        });
 +
        $(bar).append(close);
 +
       
 +
        animate = window.requestAnimationFrame
 +
            || window.webkitRequestAnimationFrame
 +
            || window.mozRequestAnimationFrame
 +
            || function (callback) {
 +
                window.setTimeout(callback, 1000 / 60)
 +
            };
 +
        canvas = document.createElement("canvas");
 +
        canvas.width = width;
 +
        canvas.height = height;
 +
        canvas.setAttribute("tabindex", "1");
 +
        context = canvas.getContext('2d');
 +
        player = new Player();
 +
        computer = new Computer();
 +
        ball = new Ball(200, 300);
 +
 
 +
        popup.appendChild(canvas);
 +
        animate(step);
 +
 
 +
        canvas.addEventListener("keydown", function (event) {
 +
            keysDown[event.keyCode] = true;
 +
        });
 +
 
 +
        canvas.addEventListener("keyup", function (event) {
 +
            delete keysDown[event.keyCode];
 +
        });
 +
 
 +
        canvas.focus();
 +
 
 +
        return false;
 +
    });
 +
}
 +
 
 +
execute('hideEgg');
 +
</script>
 +
</html>
 +
<css>
 +
.popup {
 +
    position: fixed;
 +
    left: 50%;
 +
    margin-left: -200px;
 +
    top: 50%;
 +
    margin-top: -300px;
 +
    box-shadow: .3em .3em .8em .2em #000;
 +
}
 +
.popup canvas {
 +
    display: block;
 +
}
 +
.popup-bar {
 +
    background-color: #222;
 +
    color: #EEE;
 +
    padding: 1em;
 +
    box-shadow: 0 -.5em .5em -.5em rgba(255, 255, 255, .8) inset;
 +
}
 +
.popup-bar h3 {
 +
    margin: 0px;
 +
    color: #EEE;
 +
    text-align: center;
 +
    padding: 0px;
 +
}
 +
.popup-bar .btn-close {
 +
    position: absolute;
 +
    right: .5em;
 +
    top: .5em;
 +
}
 +
</css>

Aktuelle Version vom 4. November 2015, 14:13 Uhr

Abgerufen von „https://www.stupidedia.org/stupi?title=Portal:Gaming/Secret&oldid=2268173“

Linktipps: Faditiva und 3DPresso