2 Replies - 2820 Views - Last Post: 26 August 2012 - 11:49 AM

#1 Arenlor  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 34
  • View blog
  • Posts: 389
  • Joined: 26-April 06

[SOVLED] How do I track the mouse cursor in a canvas

Posted 25 August 2012 - 07:09 PM

I've finally given in and decided to learn Javascript. I'm making a game to learn it a bit. What I have is here: http://arenhost.info/paddle.html
I am having trouble getting it to follow my mouse. The current issue seems to be around window.event and I'm not sure what to change/do. My code is as follows:
paddle.html
<!DOCTYPE html>
<html lang="EN-US">
    <head>
        <title>HTML5 + CSS + ECMAScript Paddle Game</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="shortcut icon" href="https://arenlor.info/favicon.ico">
        <link rel="icon" href="https://arenlor.info/favicon.ico">
        <link rel="stylesheet" type="text/css" href="paddle.css">
        <script type="text/javascript" src="paddle.js"></script>
    </head>
    <body>
        <canvas id="gameField" width="320" height="320"></canvas>
    </body>
</html>

paddle.js
document.addEventListener('DOMContentLoaded',domloaded,false);
// Used to load function below on document load
var bgred = 0;
var bggreen = 0;
var bgblue = 0;
// Colors for the background
var platformWidth;
var platformLeft;
// Defines the platform
var ballRadius;
var ballPosX;
var ballPosY;
// Defining the ball
var mouseX;
// Horizontal mouse position
var gameCanvas;
var gameField;
// Making these global
var gameGo;
// Whether the game has been start()'d yet.
var evt = window.event;

function bgregen() {
    bgred = Math.floor((Math.random()*255)+1);
    bggreen = Math.floor((Math.random()*255)+1);
    bgblue = Math.floor((Math.random()*255)+1);
    // Generates a new random color for the background
}

function playGame() {
    gameCanvas = document.getElementById("gameField");
    gameField = gameCanvas.getContext("2d");
    // Create the field
    if(!gameGo) {
        start();
    }
    mouseX = evt.pageX;
    // Reset the mouse position
    bgred = (bgred.toString(16).length < 2)?"0" + bgred.toString(16):bgred.toString(16);
    bggreen = (bggreen.toString(16).length < 2)?"0" + bggreen.toString(16):bggreen.toString(16);
    bgblue = (bgblue.toString(16).length < 2)?"0" + bgblue.toString(16):bgblue.toString(16);
    // Pads the string as needed.
    gameField.fillStyle = "#" + bgred + bggreen + bgblue;
    gameField.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
    // Sets the background color
    gameField.fillStyle = "#FFFFFF";
    // Sets the color back for the ball and platform
    if(mouseX - platformWidth / 2 < 0) {
        platformLeft = 0;
    }
    else if(mouseX + platformWidth / 2 > gameCanvas.width) {
        platformLeft = gameCanvas.width - platformWidth;
    }
    else {
        platformLeft = mouseX - platformWidth / 2;
    }
    // First makes sure the left doesn't go beyond 0, second make sure the right doesn't exceed field, third set the left to half the platform's width to the left of the mouse
    gameField.fillRect(platformLeft, 299, platformWidth, 10);
    // Creates the platform
    gameField.beginPath();
    gameField.arc(ballPosX, ballPosY, ballRadius, 0, 2 * Math.PI);
    gameField.fill();
    // Creates the ball
}

function start() {
    platformWidth = 80;
    ballRadius = platformWidth / 5;
    ballPosX = gameCanvas.width / 2;
    ballPosY = gameCanvas.height - 20;
    gameGo = true;
    // Resets all the information
}

function domloaded() {
    setInterval("playGame()", 16);
}

Any advice on what to do would be much appreciated, once I can track the mouse I can work on the rest of the stuff no problem. Also, it's all GPLv3+, so feel free to copy.

This post has been edited by Arenlor: 26 August 2012 - 11:51 AM


Is This A Good Question/Topic? 0
  • +

Replies To: [SOVLED] How do I track the mouse cursor in a canvas

#2 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 105
  • Joined: 31-July 12

Re: [SOVLED] How do I track the mouse cursor in a canvas

Posted 26 August 2012 - 04:53 AM

View PostArenlor, on 26 August 2012 - 04:09 AM, said:

I am having trouble getting it to follow my mouse.

I'm not sure if this helps, but here's a New Boston Tutorial on how to animate using mouse position.
Hope you'll find it useful :)
Was This Post Helpful? 1
  • +
  • -

#3 Arenlor  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 34
  • View blog
  • Posts: 389
  • Joined: 26-April 06

Re: [SOVLED] How do I track the mouse cursor in a canvas

Posted 26 August 2012 - 11:49 AM

Thank you, that was exactly what I've been looking for. No where was it mentioned that I needed an event listener. Now to move on with the rest of the stuff. Again, thank you.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1