javascript - 如何使用 jquery 正确创建文本字段-6ren

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

转载作者：行者123 更新时间：2023-11-30 17:05:49

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

在这里首次尝试 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>

最佳答案

当然，您可以在页面中添加任何元素，例如文本字段 (<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>

关于javascript - 如何使用 jquery 正确创建文本字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28058407/

文章推荐： c - 为什么“while(!feof(file))”总是错误的？

文章推荐： c - 如何变换 glOrtho 剪裁平面？

文章推荐： c - Visual Studio 社区 2015 和 KMD

文章推荐： javascript - 将特定的 Javascript 变量传递给 PHP

jquery - CoffeeScript 与 jQuery、jQuery ($) 和 jQuery
在带有 jQuery 的 CoffeeScript 中，以下语句有什么区别吗？ jQuery ($) -> jQuery -> $ - > 最佳答案第一个与其他两个不同，就像在纯 JavaScr
jquery - jQuery 为什么叫 jQuery？名字的由来是什么？
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭13 年前。 Improve th
jquery - jQuery 插件和 jQuery 小部件之间的区别？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
jquery - jQuery 生产和 jQuery 开发之间的区别？
这个问题可能听起来很愚蠢，但请耐心等待，因为我完全是初学者。我下载了两个 jQuery 版本，开发版本和生产版本。我想知道作为学习 jQuery 的初学者，什么更适合我。最佳答案如果您对 jQue
jquery - jQuery Mobile 使用什么版本的 jQuery？
The documentation说要使用 1.6.4，但我们现在已经升级到 1.7.2。我可以在 jQuery Mobile 中使用最新版本的 jQuery 吗？最佳答案您当然可以，但如果您想
jquery - jquery 新手 - jquery 弹出
我在这里看到这个不错的 jquery 插件:prettyphoto jquery lightbox有没有办法只用一个简单的jquery来实现这样的效果。我只需要弹出和内联内容。你的回复有很大帮助。
jquery - 使用 jQuery 附加 jQuery
很明显我正在尝试做一些 jQuery 不喜欢的事情。我正在使用 javascript 上传图片。每次上传图片时，我都希望它可见，并附加一个有效的删除脚本。显示工作正常，删除则不然，因为当我用 fir
jquery - jQuery 数组和 jQuery 对象之间的技术区别是什么？
这两个哪个是正确的？ jQuery('someclass').click(function() { alert("I've been clicked!"); }); 或 jQuery('somec
jquery - if (jQuery)(function ($) { . . .})(jQuery);插件格式
我正在寻找一个具有以下格式的插件 if (jQuery)(function ($) { -- plugin code -- })(jQuery); 我明白 (function ($)
jquery - 使用哪个版本的 jQuery/jQuery UI？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭10 年前。 Improv
jQuery + jQuery 表单提交插件 + jQuery 验证插件
我知道这个问题已经被问过几次了，但想知道您是否可以帮助我解决这个问题。背景:我尝试创建一个使用 Ajax 提交的表单(jQuery 表单提交)。我已经工作得很好，然后我想在表单上得到验证。我可以使用
jquery - jquery 元数据插件和 jquery 验证插件的主要烦恼
我正在使用无处不在的jquery validate plugin用于表单验证。它支持使用metadata plugin用于向表单元素添加验证规则。我正在使用此功能。当验证查找这些规则时，它会对元素进
jquery - 使用 jQuery 还是不使用 jQuery？
我更喜欢为我一直在开发的网络社区添加实用的视觉效果，但随着事情开始堆积，我担心加载时间。拥有用户真的更快吗加载(希望是缓存的)副本来自 Google 存储库的 jquery？是否使用 jQuery
jquery - 有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery Mobile
这个问题已经有答案了: Slide right to left? (17 个回答) 已关闭 9 年前。你能告诉我有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery
jquery - XMLHttpRequest、jQuery.ajax、jQuery.post、jQuery.get 之间有什么区别
我如何找出最适合某种情况的方法？任何人都可以提供一些示例来了解功能和性能方面的差异吗？最佳答案 XMLHttpRequest 是原始浏览器对象，jQuery 将其包装成一种更有用和简化的形式以及跨浏
jquery - 为什么我在 Assets 安装时无法解析 'jQuery=jquery'？
运行时 php bin/console oro:assets:build ，我有 11 个这样的错误: ERROR in ../node_modules/jquery-form/src/jquery.
jquery - jQuery.ajax 在 jQuery 源代码中的哪里定义？
我试图找到 jQuery.ajax() 在源代码中的定义位置。但是，使用 grep 似乎不起作用。在哪里？谢谢。 > grep jQuery.ajax src/* src/ajax.js:// B
jquery - 从单独的 jQuery 对象创建 jQuery 对象集合
$.fn.sortByDepth = function() { var ar = []; var result = $([]); $(this).each(function()
jquery - jQuery.one() 和 jQuery.on() 之间的区别
我的页面上有多个图像。为了检测损坏的图像，我使用了在 SO 上找到的这个。 $('.imgRot').one('error',function(){ $(this).attr('src','b
jquery - jQuery 如何实现将 $ 设为 jQuery 函数的别名？
我在理解 $ 符号作为 jQuery 函数的别名时遇到了一些麻烦，尤其是在插件中。你能解释一下 jQuery 如何实现这种别名:它如何定义 '$' 作为 jQuery 函数的别名？这是第一个问题。其

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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