-2
Yes I know that this is a crappy unfinished version of pong that I should be using different methods than I am.Kugel bewegt sich nicht in Javascript-Pong-Spiel
But this is my first game and my pong ball is not moving at all when used.
When I run the code the ball just blinks on and off instead of moving a direction.
Mein Javascript ist: `
//pong game by Henry Redder
//variables
var c = document.getElementById("canvas"); //gets the canvas element
var ctx = c.getContext("2d"); //gets 2d for the canvas
var pscore = document.getElementById("gscore1").textContent; //gets the player score
var aiscore = document.getElementById("gscore2").textContent; //gets the ai score
var recx = 10; //gets the first x position
var recy = 250; //gets the first y position
var aix = 1275; //gets the first ai x position
var aiy = 250; //gets the first ai y position
var bx = 650; //gets the first ball x position
var by = 250; //gets the first ball y position
var balldirection = 0; //0 is left and 1 is right
var ballspeedside = 10; //this is the speed of the ball in the x direction
var ballspeedup = 0; //this is the speed of the ball going up
//@variables
//functions
function start() {
\t //this function starts the update function every 10 milliseconds
\t setInterval(update, 10);
}
function update() {
\t //this function renders the diffenent objects on the screen
\t resetcanvas();
\t renderball();
\t renderplayer();
\t renderai();
\t testballdirection();
\t changeposball();
}
function renderball() {
\t //this function renders the ball
\t ctx.fillRect(bx,by,15,15);
}
function renderplayer() {
\t //this function renders the player
\t ctx.fillRect(recx, recy, 15, 75);
}
function renderai() {
\t //this function renders the ai in the game
\t ctx.fillRect(aix, aiy, 15, 75);
}
function resetcanvas() {
\t //this function resets the canvas
\t ctx.clearRect(0,0,1300,500);
\t
}
function testballdirection() {
\t //this function detirmens the direction of the ball
\t switch(balldirection) {
\t \t case 0:
\t \t \t //case for going left
\t \t \t bx = bx * -1;
\t \t case 1:
\t \t \t //case for going right
\t \t \t bx = MATH.abs(bx); //sets the value to the absolute value of itself
\t }
}
document.onkeydown = function testkey(e) {
\t //this function tests for keys being pressed then moves the player
\t if (e.keyCode == 38) {
\t \t if (recy > 0) {
\t \t \t console.log("moving up");
\t \t \t recy = recy + -20;
\t \t }
\t }
\t else if (e.keyCode == 40) {
\t \t if (recy < 450) {
\t \t \t console.log("moving down");
\t \t \t recy = recy + 20;
\t \t }
\t }
}
function changeposball() {
\t //this function changes the x and y of the ball occordngly
\t bx = bx + ballspeedside;
\t by = by + ballspeedup;
}
//@functions
//start
\t document.onload = start();
//@startMein html ist:
<!DOCTYPE html>
<html>
<head>
\t <title> pong </title>
\t <link rel="stylesheet" type="text/css" href="pong.css">
</head>
<body>
\t <h1> PONG BY HENRY REDDER</h1>
\t <p id="gscore1"> 0 </p>
\t <p id="gscore2"> 0 </p>
\t <canvas id="canvas" width="1300" height="500" style="border:1px solid #000000;"> </canvas>
\t <script src="pong.js"> </script>
</body>
</html>h1 {
\t text-align: center;
\t font-family: Courier;
}
body {
\t background-color: gray;
}
#canvas {
\t background-color: white;
}
#gscore1 {
position: absolute;
font-family: Impact;
top: -20px;
left: 10px;
font-size: 50px;
}
#gscore2 {
position: absolute;
font-family: Impact;
top: -20px;
left: 1270px;
font-size: 50px;
}
Ihr Snippet hat JavaScript-Fehler - 'Uncaught TypeError: Kann die Eigenschaft 'getContext' von null 'nicht lesen Haben Sie vergessen, den entsprechenden HTML-Code einzuschließen? – Jamiec
Abgesehen von Ihrem Problem, warum verwenden Sie Testballdirektion jedes Update? Sie sollten eine Variable verwenden, die die Geschwindigkeit des Balls enthält. Vorzugsweise sollten Sie hier einen 2D Vektor verwenden. Ein 2d-Vektor ist ein Wert, der 2 Werte enthalten kann. Also 1 Wert für oben/unten und 1 für seitwärts. Sie sollten die Geschwindigkeit ändern, wenn dies erforderlich ist. Aber während Sie die Geschwindigkeit beim Starten des Spiels einstellen, können Sie dies in der Startfunktion tun, so dass Sie nicht jedes Update machen müssen, wenn die Geschwindigkeit gleich bleibt. Für Spiele immer deltatime beim Bewegen von Objekten verwenden.Suchen Sie weitere Informationen zu diesen Themen! –