How do I create a text field correctly with jquery

综合编程 Hello, buddy! (源链)

In my code below I’m trying to create a text field on the stage of the pong game. I cant seem to get it to show up on the stage. The code in question is in the main function.

First attempt at jquery and javascript here.

Thanks for your help.



    
    Pong

    
    
    canvas {
        display: block;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
 





    var
    /**
     * Constants
     */
     score=0,
    WIDTH = 700,
    HEIGHT = 600,
    pi = Math.PI,
    UpArrow = 38,
    DownArrow = 40,
    /**
     * Game elements
     */
    canvas,
    ctx,
    keystate,
    /**
     * The player paddle
     *
     * @type {Object}
     */
    player = {
        x: null,
        y: null,
        width: 20,
        height: 100,
        /**
         * Update the position depending on pressed keys
         */
        update: function () {
            if (keystate[UpArrow]) this.y -= 7;
            if (keystate[DownArrow]) this.y += 7;
            // keep the paddle inside of the canvas
            this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0);
        },
        /**
         * Draw the player paddle to the canvas
         */
        draw: function () {
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    },
    /**
     * The ai paddle
     *
     * @type {Object}
     */
    ai = {
        x: null,
        y: null,
        width: 20,
        height: 100,
        /**
         * Update the position depending on the ball position
         */
        update: function () {
            // calculate ideal position
            var desty = ball.y - (this.height - ball.side) * 0.5;
            // ease the movement towards the ideal position
            this.y += (desty - this.y) * 0.1;
            // keep the paddle inside of the canvas
            this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0);
        },
        /**
         * Draw the ai paddle to the canvas
         */
        draw: function () {
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    },
    /**
     * The ball object
     *
     * @type {Object}
     */
    ball = {
        x: null,
        y: null,
        vel: null,
        side: 20,
        speed: 12,
        /**
         * Serves the ball towards the specified side
         *
         * @param  {number} side 1 right
         *                       -1 left
         */
        serve: function (side) {
            // set the x and y position
            var r = Math.random();
            this.x = side === 1 ? player.x + player.width : ai.x - this.side;
            this.y = (HEIGHT - this.side) * r;
            // calculate out-angle, higher/lower on the y-axis =>
            // steeper angle
            var phi = 0.1 * pi * (1 - 2 * r);
            // set velocity direction and magnitude
            this.vel = {
                x: side * this.speed * Math.cos(phi),
                y: this.speed * Math.sin(phi)
            }
        },
        /**
         * Update the ball position and keep it within the canvas
         */
        update: function () {
            // update position with current velocity
            this.x += this.vel.x;
            this.y += this.vel.y;
            // check if out of the canvas in the y direction
            if (0 > this.y || this.y + this.side > HEIGHT) {

                // calculate and add the right offset, i.e. how far
                // inside of the canvas the ball is
                var offset = this.vel.y < 0 ? 0 - this.y : HEIGHT - (this.y + this.side);
                this.y += 2 * offset;
                // mirror the y velocity
                this.vel.y *= -1;
            }
            // helper function to check intesectiont between two
            // axis aligned bounding boxex (AABB)
            var AABBIntersect = function (ax, ay, aw, ah, bx, by, bw, bh) {
                return ax < bx + bw && ay < by + bh && bx < ax + aw && by < ay + ah;
            };
            // check againts target paddle to check collision in x
            // direction
            var pdle = this.vel.x  0.2 * pi ? 1.5 : 1;
                this.vel.x = smash * (pdle === player ? 1 : -1) * this.speed * Math.cos(phi);
                this.vel.y = smash * this.speed * Math.sin(phi);
            }
            // reset the ball when ball outside of the canvas in the
            // x direction
            if (0 > this.x + this.side || this.x > WIDTH) {
                this.serve(pdle === player ? 1 : -1);

            }
        },
        /**
         * Draw the ball to the canvas
         */
        draw: function () {
            ctx.fillRect(this.x, this.y, this.side, this.side);
        }
    };
    /**
     * Starts the game
     */
    function main() {
        // create, initiate and append game canvas
        canvas = document.createElement("canvas");
        canvas.width = WIDTH;
        canvas.height = HEIGHT;
        ctx = canvas.getContext("2d");
        document.body.appendChild(canvas);
        keystate = {};
        // keep track of keyboard presses
        document.addEventListener("keydown", function (evt) {
            keystate[evt.keyCode] = true;
        });
        document.addEventListener("keyup", function (evt) {
            delete keystate[evt.keyCode];
        });

        init(); // initiate game objects
        // game loop function
        var loop = function () {
            update();
            draw();
            window.requestAnimationFrame(loop, canvas);
        };
        window.requestAnimationFrame(loop, canvas);

 //+++++++++++++++++++++++++++++++++++++++++++++++++++
 //Start of code that needs some help
 //+++++++++++++++++++++++++++++++++++++++++++

        var instructions = new createjs.Container();
        instructions.alpha = 0;
        instructions.regX = 125;
        instructions.regY = 70;

        instructions.x = stage.canvas.width / 2;
        instructions.y = stage.canvas.height / 2;

        var displayBox = new createjs.Shape();
        displayBox.graphics.beginFill("white").beginStroke("#000").setStrokeStyle(1).drawRoundRect(0, 0, instructions.regX * 2, instructions.regY * 2, 5).endFill().endStroke();

        var text = new createjs.Text("Here are the instructions.  Click to continue, or else!!", "15pt Arial", "red");
        text.lineWidth = 250;
        text.textAlign = "center";
        text.x = instructions.regX;
        text.y = 10;

        //instructions.addEventListener("click", handleInstructionsClick);

        instructions.addChild(displayBox, text);

        stage.addChild(instructions);
       // createjs.Tween.get(instructions).to({ alpha: 1 }, 500);

//+++++++++++++++++++++++++++++++++
//End of bad code block
//+++++++++++++++++++++++++++++++++

    }
    /**
     * Initatite game objects and set start positions
     */
    function init() {
        player.x = player.width;
        player.y = (HEIGHT - player.height) / 2;
        ai.x = WIDTH - (player.width + ai.width);
        ai.y = (HEIGHT - ai.height) / 2;
        ball.serve(1);

    }
    /**
     * Update all game objects
     */
    function update() {
        ball.update();
        player.update();
        ai.update();
    }
    /**
     * Clear canvas and draw all game objects and net
     */
    function draw() {
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
        ctx.save();
        ctx.fillStyle = "#fff";
        ball.draw();
        player.draw();
        ai.draw();
        // draw the net
        var w = 4;
        var x = (WIDTH - w) * 0.5;
        var y = 0;
        var step = HEIGHT / 20; // how many net segments
        while (y < HEIGHT) {
            ctx.fillRect(x, y + step * 0.25, w, step * 0.5);
            y += step;
        }
        ctx.restore();
    }
    // start and run the game
    main();


Definitely you can add any element like text field (
) in your page. It’s hidden because the
is above it and covers it.

To add element:

textField = document.createElement("input");
textField.type = "text";
document.body.appendChild(textField);

To make it visible:

input{position: relative;}

Here’s the final demo:

var
/**
 * Constants
 */
score = 0,
    WIDTH = 700,
    HEIGHT = 600,
    pi = Math.PI,
    UpArrow = 38,
    DownArrow = 40,
    /**
     * Game elements
     */
    canvas,
    ctx,
    keystate,
    /**
     * The player paddle
     *
     * @type {Object}
     */
    player = {
        x: null,
        y: null,
        width: 20,
        height: 100,
        /**
         * Update the position depending on pressed keys
         */
        update: function () {
            if (keystate[UpArrow]) this.y -= 7;
            if (keystate[DownArrow]) this.y += 7;
            // keep the paddle inside of the canvas
            this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0);
        },
        /**
         * Draw the player paddle to the canvas
         */
        draw: function () {
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    },
    /**
     * The ai paddle
     *
     * @type {Object}
     */
    ai = {
        x: null,
        y: null,
        width: 20,
        height: 100,
        /**
         * Update the position depending on the ball position
         */
        update: function () {
            // calculate ideal position
            var desty = ball.y - (this.height - ball.side) * 0.5;
            // ease the movement towards the ideal position
            this.y += (desty - this.y) * 0.1;
            // keep the paddle inside of the canvas
            this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0);
        },
        /**
         * Draw the ai paddle to the canvas
         */
        draw: function () {
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    },
    /**
     * The ball object
     *
     * @type {Object}
     */
    ball = {
        x: null,
        y: null,
        vel: null,
        side: 20,
        speed: 12,
        /**
         * Serves the ball towards the specified side
         *
         * @param  {number} side 1 right
         *                       -1 left
         */
        serve: function (side) {
            // set the x and y position
            var r = Math.random();
            this.x = side === 1 ? player.x + player.width : ai.x - this.side;
            this.y = (HEIGHT - this.side) * r;
            // calculate out-angle, higher/lower on the y-axis =>
            // steeper angle
            var phi = 0.1 * pi * (1 - 2 * r);
            // set velocity direction and magnitude
            this.vel = {
                x: side * this.speed * Math.cos(phi),
                y: this.speed * Math.sin(phi)
            }
        },
        /**
         * Update the ball position and keep it within the canvas
         */
        update: function () {
            // update position with current velocity
            this.x += this.vel.x;
            this.y += this.vel.y;
            // check if out of the canvas in the y direction
            if (0 > this.y || this.y + this.side > HEIGHT) {

                // calculate and add the right offset, i.e. how far
                // inside of the canvas the ball is
                var offset = this.vel.y < 0 ? 0 - this.y : HEIGHT - (this.y + this.side);
                this.y += 2 * offset;
                // mirror the y velocity
                this.vel.y *= -1;
            }
            // helper function to check intesectiont between two
            // axis aligned bounding boxex (AABB)
            var AABBIntersect = function (ax, ay, aw, ah, bx, by, bw, bh) {
                return ax < bx + bw && ay < by + bh && bx < ax + aw && by < ay + ah;
            };
            // check againts target paddle to check collision in x
            // direction
            var pdle = this.vel.x  0.2 * pi ? 1.5 : 1;
                this.vel.x = smash * (pdle === player ? 1 : -1) * this.speed * Math.cos(phi);
                this.vel.y = smash * this.speed * Math.sin(phi);
            }
            // reset the ball when ball outside of the canvas in the
            // x direction
            if (0 > this.x + this.side || this.x > WIDTH) {
                this.serve(pdle === player ? 1 : -1);

            }
        },
        /**
         * Draw the ball to the canvas
         */
        draw: function () {
            ctx.fillRect(this.x, this.y, this.side, this.side);
        }
    };
/**
 * Starts the game
 */
function main() {
    // create, initiate and append game canvas
    canvas = document.createElement("canvas");
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

    textField = document.createElement("input");
    textField.type = "text";
    document.body.appendChild(textField);

    keystate = {};
    // keep track of keyboard presses
    document.addEventListener("keydown", function (evt) {
        keystate[evt.keyCode] = true;
    });
    document.addEventListener("keyup", function (evt) {
        delete keystate[evt.keyCode];
    });

    init(); // initiate game objects
    // game loop function
    var loop = function () {
        update();
        draw();
        window.requestAnimationFrame(loop, canvas);
    };
    window.requestAnimationFrame(loop, canvas);

    //+++++++++++++++++++++++++++++++++++++++++++++++++++
    //Start of code that needs some help
    //+++++++++++++++++++++++++++++++++++++++++++

    var instructions = new createjs.Container();
    instructions.alpha = 0;
    instructions.regX = 125;
    instructions.regY = 70;

    instructions.x = stage.canvas.width / 2;
    instructions.y = stage.canvas.height / 2;

    var displayBox = new createjs.Shape();
    displayBox.graphics.beginFill("white").beginStroke("#000").setStrokeStyle(1).drawRoundRect(0, 0, instructions.regX * 2, instructions.regY * 2, 5).endFill().endStroke();

    var text = new createjs.Text("Here are the instructions.  Click to continue, or else!!", "15pt Arial", "red");
    text.lineWidth = 250;
    text.textAlign = "center";
    text.x = instructions.regX;
    text.y = 10;

    //instructions.addEventListener("click", handleInstructionsClick);

    instructions.addChild(displayBox, text);

    stage.addChild(instructions);
    // createjs.Tween.get(instructions).to({ alpha: 1 }, 500);

    //+++++++++++++++++++++++++++++++++
    //End of bad code block
    //+++++++++++++++++++++++++++++++++

}
/**
 * Initatite game objects and set start positions
 */
function init() {
    player.x = player.width;
    player.y = (HEIGHT - player.height) / 2;
    ai.x = WIDTH - (player.width + ai.width);
    ai.y = (HEIGHT - ai.height) / 2;
    ball.serve(1);

}
/**
 * Update all game objects
 */
function update() {
    ball.update();
    player.update();
    ai.update();
}
/**
 * Clear canvas and draw all game objects and net
 */
function draw() {
    ctx.fillRect(0, 0, WIDTH, HEIGHT);
    ctx.save();
    ctx.fillStyle = "#fff";
    ball.draw();
    player.draw();
    ai.draw();
    // draw the net
    var w = 4;
    var x = (WIDTH - w) * 0.5;
    var y = 0;
    var step = HEIGHT / 20; // how many net segments
    while (y < HEIGHT) {
        ctx.fillRect(x, y + step * 0.25, w, step * 0.5);
        y += step;
    }
    ctx.restore();
}
// start and run the game
main();
canvas {
        display: block;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

input{position: relative;}

您可能感兴趣的

canvas星空和图形变换 图形变换。 一、画一片星空 先画一片canvas.width宽canvas.height高的黑色星空,再画200个随机位置,随机大小,随机旋转角度的星星。window.onload=function(){ var canvas=document.getElementB...
Intellisense support in Visual Studio 2008&sol... I'm trying to get Intellisense to correctly work for closure. As a plugin author, I always use a closure to create an isolated environment for my p...
Restarting the Bounce game (revisited) Robin T writes (excerpted): I am currently at chapter 14, i already made my first game called "Bounce". When the game is over, i want the u...
python web py入门(55)- jQuery – 实现EMAIL地址输入检查... 在前面学习了焦点失去事件,学习了输入内容获取,学习了输出内容到页面等等,把前面所有学习过的内容,综合到一起就可以实现EMAIL地址检查了。先来看代码如下: 页面提示的例子 $(document).ready(fun...
All validators executed when the page is loaded How do I get a javascript animation executed when the page is loaded? I dont want to use css3 transition, keeping it pure .js. l...
Hello, buddy!责编内容来自:Hello, buddy! (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » How do I create a text field correctly with jquery



专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录