javascript - 将我的 Jquery 元素更改为纯 JavaScript

Question

我使用 jquery 和有用的在线教程为学校元素创建了一个突破游戏。

工作 fiddle 在这里:http://jsfiddle.net/Kinetic915/kURvf/

编辑修改后的 fiddle :http://jsfiddle.net/Kinetic915/nVctR/

我对 javascript 的更改最多，但在更改将球呈现为 javascript 的 jquery 代码时遇到问题。

我在有问题的地方做了标记并留了空格。

非常感谢您提供的任何帮助!!

//***********************************************************************************
 //                     START CODE
 //***********************************************************************************

// VARIABLES and other initializing functions are here


 function start() {

//******************************************************************************
//JQUERY
// HERE IS THE MAIN PROBLEM!!!!!!
 // HERE IS THE MAIN PROBLEM!!!!!!
 Cir = $('#canvas')[0].getContext("2d");
//JQUERY

//changing to Cir = canvas.getContext("2d"); causes the code to FAIL.

 return setInterval(drawCIRCLE, 10);
 }

 function windowsize() {

     //success with javascript


     WIDTH.width = window.innerWidth;
     HEIGHT.height = window.innerHeight;
     WIDTH = window.innerWidth;
     HEIGHT = window.innerHeight;


//Previous JQUERY:
     // WIDTH = $("#canvas")[0].width = $(window).width();
     //  HEIGHT = $("#canvas")[0].height = $(window).height();

 }

 windowsize();

 var x = WIDTH / 2 - 30; //divide by 2 start in middle of window
 var y = HEIGHT / 2;


//THIS DRAWS THE CIRCLE


 function circle() {
     //Cir.clearRect(0, 0, WIDTH, HEIGHT);
     Cir.beginPath();
     Cir.arc(x, y, 10, 0, Math.PI * 2, true);
     Cir.closePath();
     Cir.fill();
 }

 // Initialization of the Block array, rendering of the gutter area and coordinate box 
 were here



//*********************************************************
// HERE IS THE CODE THAT RENDERS THE BALL MOVEMENT ETC.


 //draw a circle
 function drawCIRCLE() {
     clear();
     circle();

     drawPADDLE();  //calls draw paddle function
     drawGUTTER();  // calls draw gutter function
     drawCOORBOX();  // calls draw coordinate box function
     drawBRICKS();  //calls the function to draw the boxes

 //have we hit a brick?
 rowheight = brickheight + padding;
 colwidth = brickwidth + padding;
 row = Math.floor(y / rowheight);
 col = Math.floor(x / colwidth);
 //if so, reverse the ball and mark the brick as broken
 if (y < numrows * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
     dy = -dy;
     bricks[row][col] = 0;
 }

 if (x + dx > WIDTH || x + dx < 0) dx = -dx;

 if (y + dy < 0) dy = -dy;
 else if (y + dy > ((HEIGHT - paddleh) - ppoffset) || y + dy > HEIGHT) {
     if (x > paddlex && x < paddlex + paddlew)
     //switch! once first is true, then second goes
     dy = -dy;
     else if (y + dy > ((HEIGHT - paddleh) - ppoffset) && y + dy > HEIGHT) {
         clearInterval(intervalId);
     }



 }

 x += dx;
 y += dy;
 if (rightpress) paddlex += 5;
 else if (leftpress) paddlex -= 5;
 }



 function clear() {
 Cir.clearRect(0, 0, WIDTH, HEIGHT);
//Is this jquery? I suspect this part of the code making the circle rendering fail.
 }

 start();
 init_paddle();
 initbricks();

Answer 1

很久以前我用纯 JavaScript 编写了类似的代码 here 此代码使用纯 javascript，没有库。代码注释很好(我认为 :))

我通常附加这样的事件

document.onkeydown = function(e)
        {
            e = e || window.event;

            switch (e.keyCode) { // which key was pressed?              

                case 32: // release ball.
                if(!game.ball.isFree)
                {
                    game.ball.isFree = true;
                    game.ball.directionX = game.ball.directionY = 1;
                    game.ball.x = game.ball.offsetLeft;                 
                    game.ball.y =   game.screen.offsetHeight - game.ball.offsetTop;
                }
                    break;

                case 37: // left, rotate player left
                    game.bar.direction = -1;
                    break;

                case 39: // right, rotate player right
                    game.bar.direction = 1;
                    break;
            }
        }

        document.onkeyup = function(e)
        {
            e = e || window.event;

            switch (e.keyCode) 
            {                   
                case 37:
                case 39:
                    game.bar.direction = 0;
                    break;
            }
        }
    },   

当然，您还有许多其他地方可能需要移植，因此对问题进行有用的分解会更容易回答 :)

希望对您有所帮助