Portal:Gaming/Secret: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
(Markierung: Widget installiert)
K (+ a,d)
 
(23 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
{{#widget:CSS|selectors=.disku|style=background-color:#EEDD82;
+
<html><script type="text/javascript">
−
border: 2px double #8B658B;
+
var animate, canvas, context, player, computer, ball, popup;
−
}}
+
 
−
<div class="disku">
+
var width = 400;
−
<!-- Diskussionsseite -->
+
var height = 600;
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
+
var bgColor = "#333333";
−
</div>
+
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