Jump to content

  • Log In with Google      Sign In   
  • Create Account

Rezkon

Member Since 24 Jun 2013
Offline Last Active Jul 02 2013 05:25 AM

Posts I've Made

In Topic: Error in pong script.

28 June 2013 - 05:35 AM

As i think i fixed the error being canvas missed <canvas id="pongGame"

dry.png


And then

Uncaught ReferenceError: onKeyDown is not defined


In Topic: Error in pong script.

27 June 2013 - 09:43 PM

Well it seems all the CSS is fine in the code, centered; and that :S I cant see a reason it wouldnt be


In Topic: Error in pong script.

27 June 2013 - 08:42 AM

So i tried running it with JSbin and it seems it stops around where the CSS Ends and doesnt really reach the script at all, anyone see a reason why?


In Topic: Error in pong script.

27 June 2013 - 12:09 AM

<!DOCTYPE html>
<html>   
<style type="text/css">

 /*This block gives the canvas 
 a centered element*/
 #pongGame
 {
     background:url(http://www.allstate.com/resources/Allstate/images/ni/NI-LinkedIm-Banner.jpg);
     background-size: 75%;
     background-repeat:no-repeat;
     background-position:center;
     border:1px solid #1666AF;
 }
 /*This block centers the contiant of the page*/
 #container
 {
     position: fixed;
     top: 50%;
     left: 50%;
     ;
     margin-top: -275px;
     text-align: center;
}

/*This is the font for the scoreboard 
and text*/
#Score
{
    margin-left: 500px;
    font-family: 'Rambla', sans-serif;
    font-size:28px;
    color: #717073;
    border: 2px solid #1666AF;
    margin-bottom: 5px;
}
/*This block sets the color 
 text of the score board*/
#playerScore
{
color: #EE3424; 
}
#compScore
{
    color: #EE8722;
}
</style> 
<meta charset="utf-8" />    
<link href="http://fonts.googleapis.com/css?family=Rambla:700" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="container">
  <div id="Score">
      You: <span id="playerScore">0</span> <span style="color: #6db33f;"><b>//</b></span> Computer: <span id="compScore">0</span>
 </div>
    
<canvas width="800" height="500">
     Your browser does not support HTML5
</canvas>  
</div>
<script>
 $(document).ready(function()
 {
 //Global Variables
 var directionX;
 var directionY;
    //Stage
 var canvas; 
 var ctx; //delcaring the context of the element
 var WIDTH; //Width of the canvas element
 var HEIGHT;//this will be the height of the cnavas element
 
 //ball
 var x;//Postion of X-Ball
 var y;//Postion of Y-Ball
 var ballRadius = 10; //This is the radius of the ball (pxiels)
 
 //Paddles
 var PaddleHeight = 70;/*This displays 
 the height of paddles*/
 var PaddleWidth = 10;//Displays width of paddles// 
 var playerPaddle; //this the variable of the player paddle//
 var playerPaddleColour = "#EE3424";//Delcares the paddle to being white aka colour//
 var compPaddle; //Same as players expecet COMP//
 var compPaddleColour = "EE8722";//this is the colour of the computers paddle (orange)
 
 
 
 //attach event listeners
 $(document).keydown(onKeyDown);
 $(document).keyup(onKeyUp);
 
 //flags
 var upPressed = false;
 var downPressed = false;
 
  //interval variable
   var refreshStage;
 
 //set upPressed or downPressed if up or down are pressed//
 function onKeyDown(evt)
 {
     if (evt.keyCode === 38)
         {
             upPressed = true;
         }
         else if (evt.keyCode === 40)
             {
                 downPressed = true;
             }
 }
 //unset upPressed or downPressed if the up or down are let go
 function onKeyUp(evt)
 {
     if (evt.keyCode === 38)
         {
             upPressed = true;
         }
         else if (evt.KeyCode === 40)
             {
                 downPressed = false;
             }
 }
 
 function init()
{
   //get the canvas element
   canvas = $('#pongGame')[0];
   //get the context of the element
   ctx = canvas.getContext("2d");
   //set our width and height variables equal to the width
   //and height of the canvas element
   WIDTH = canvas.width;
   HEIGHT = canvas.height;
   
   //set the starting height of the paddles to the center 
   //of the y-axis
   playerPaddle = (HEIGHT / 2) - (PaddleHeight/2);
   compPaddle = (HEIGHT/ 2) - (PaddleHeight/2);
   
   //set the x and y values for where the ball will start
   //in this case the center of the canvas
   x = 400;
   y = 250;
   // Direction of the Ball Via X,Y
    directionX = 4;
    directionY = 6;
   //This Function clears the stage below every 100th of
   //a second (10ms)
   refreshStage = setInterval(drawGame, 10);
   
   //this function brings it white
   function clearStage()
   {
       ctx.clearRect(0,0,WIDTH, HEIGHT);
   }
   
}
//This function Draw the Game Stage
function drawGame()
{
    //Controls the Direction again//
    x += directionX;
    y += directionY;
    //First wipe the old frame
    clearStage();
    //draw the sidelines
    drawSideLines();
    //Draw the ball
    drawBall();
    //check to see if the downPressed flag equals true
    if (downPressed === true)
        {
         //make sure there is room for the paddle to move further down
         if(playerPaddle + PaddleHeight + 20 <= HEIGHT)
             //sets the postion of the paddle to move further down
    //Draw the Player paddle, passing variables defined above
    drawPaddle(0,playerPaddle,PaddleWidth,PaddleHeight,playerPaddleColour);
    //draw the comp paddle, passing variables defined above
    drawPaddle(WIDTH - 10,comPaddle,PaddleWidth,PaddleHeight,compPaddleColour);
}
//this is a function to draw the side lines//
function drawSideLines()
{
    ctx.beginPath();
    ctx.rect(0,0,WIDTH,15);
    ctx.closePath();
    ctx.fillStyle="#1666AF";
    ctx.fill();
    
    ctx.beginPath();
    ctx.rect(0,HEIGHT - 15,WIDTH,15);
    ctx.closePath();
    ctx.fillStyle="#1666AF";
    ctx.fill();
}

//This is drawing the ball, simples!//
function drawBall()
{
    ctx.beginPath();
    ctx.arc(x,y, ballRadius,0,Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle="6DB33F";
    ctx.fill();
    
}
//This draws the paddle//
function drawPaddle(xaxis,yaxis,pwidth,pheight,pcolour)
{
    ctx.beginPath();
    ctx.rect(xaxis,yaxis,pwidth,pheight);
    ctx.closePath();
    ctx.fillStyle=pcolour;
    ctx.fill();
    //call the init function
    init();
 

}
}
 });
</script>
</body>
</html>

So far ive tried to fix my capitalization, tryed to put them in the right tags hoping that it would run via that, but nothing atm

Sometimes a blue background will show up but its not very consistent,


In Topic: Error in pong script.

26 June 2013 - 11:50 PM

I think its because my script isnt with in the <body> Tags.

Tried switching some things up but nothing seemed to fix anything, i just get the scoreboard there isnt any errors in NetBeans, so im not sure atm.


PARTNERS