如何使用jquery正确创建文本字段

时间:2015-01-21 02:03:02

标签: javascript jquery html5 createjs

在下面的代码中,我正在尝试在乒乓球游戏的舞台上创建一个文本字段。我似乎无法让它出现在舞台上。有问题的代码在主函数中。

首先尝试jquery和javascript。

感谢您的帮助。

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pong</title>

    <!-- Basic styling, centering the canvas -->
    <style>
    canvas {
        display: block;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    </style>
 <script type="text/javascript" src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>

</head>
<body>
<script>

    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 ? player : ai;
            if (AABBIntersect(pdle.x, pdle.y, pdle.width, pdle.height,
                    this.x, this.y, this.side, this.side)
            ) {
                // set the x position and calculate reflection angle
                this.x = pdle === player ? player.x + player.width : ai.x - this.side;
                var n = (this.y + this.side - pdle.y) / (pdle.height + this.side);
                var phi = 0.25 * pi * (2 * n - 1); // pi/4 = 45
                // calculate smash value and update velocity
                var smash = Math.abs(phi) > 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();
</script>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

您肯定可以在页面中添加文本字段(<input>)等任何元素。它是隐藏的,因为<canvas>位于它之上并覆盖它。

添加元素:

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

让它可见:

input{position: relative;}

这是最后的演示:

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 ? player : ai;
            if (AABBIntersect(pdle.x, pdle.y, pdle.width, pdle.height,
            this.x, this.y, this.side, this.side)) {
                // set the x position and calculate reflection angle
                this.x = pdle === player ? player.x + player.width : ai.x - this.side;
                var n = (this.y + this.side - pdle.y) / (pdle.height + this.side);
                var phi = 0.25 * pi * (2 * n - 1); // pi/4 = 45
                // calculate smash value and update velocity
                var smash = Math.abs(phi) > 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;}
<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>

答案 1 :(得分:1)

使用Jquery,试试这个

$("body").append('<input type="text" name="myTextName" id="myTextId" class="myTextClass"/>');