New Topic/Question
Reply
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
MultiQuote
| 