Jump to content

  • Log In with Google      Sign In   
  • Create Account


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"


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>
<style type="text/css">

 /*This block gives the canvas 
 a centered element*/
     background-size: 75%;
     border:1px solid #1666AF;
 /*This block centers the contiant of the page*/
     position: fixed;
     top: 50%;
     left: 50%;
     margin-top: -275px;
     text-align: center;

/*This is the font for the scoreboard 
and text*/
    margin-left: 500px;
    font-family: 'Rambla', sans-serif;
    color: #717073;
    border: 2px solid #1666AF;
    margin-bottom: 5px;
/*This block sets the color 
 text of the score board*/
color: #EE3424; 
    color: #EE8722;
<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>
<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>
<canvas width="800" height="500">
     Your browser does not support HTML5
 //Global Variables
 var directionX;
 var directionY;
 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
 var x;//Postion of X-Ball
 var y;//Postion of Y-Ball
 var ballRadius = 10; //This is the radius of the ball (pxiels)
 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
 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
    //draw the sidelines
    //Draw the ball
    //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
    //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.rect(0,HEIGHT - 15,WIDTH,15);

//This is drawing the ball, simples!//
function drawBall()
    ctx.arc(x,y, ballRadius,0,Math.PI*2, true);
//This draws the paddle//
function drawPaddle(xaxis,yaxis,pwidth,pheight,pcolour)
    //call the init function


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.