0

jquery と役立つオンライン チュートリアルを使用して、学校のプロジェクト用のブレイクアウト ゲームを作成しました。

実際のフィドルはこちら: http://jsfiddle.net/Kinetic915/kURvf/

修正されたフィドルの編集: http://jsfiddle.net/Kinetic915/nVctR/

ほとんどを JavaScript に変更しましたが、ボールをレンダリングする jquery コードを JavaScript に変更する際に問題が発生しています。

問題のある領域にマークを付けてスペースを残しました。

与えられた助けをどうもありがとうございました!!

//***********************************************************************************
 //                     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();
4

1 に答える 1

0

何年も前に、私は純粋な JavaScript で同様のコードを書きました。ここでは 、このコードは純粋な 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;
            }
        }
    },

もちろん、移植が必要な場所は他にもたくさんあるので、質問の役立つ内訳は答えやすいでしょう:)

お役に立てれば

于 2013-05-08T18:27:00.113 に答える