Question

是的我知道这是一个糟糕的未完成版本的乒乓球，我应该使用与我不同的方法。

但这是我的第一场比赛，使用时我的乒乓球根本没动。

当我运行代码时，球只会闪烁而不是移动方向。

我的javascript是：`

//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() {
	//this function starts the update function every 10 milliseconds
	setInterval(update, 10);
}
function update() {
	//this function renders the diffenent objects on the screen
	resetcanvas();
	renderball();
	renderplayer();
	renderai();
	testballdirection();
	changeposball();
}
function renderball() {
	//this function renders the ball
	ctx.fillRect(bx,by,15,15);
}
function renderplayer() {
	//this function renders the player
	ctx.fillRect(recx, recy, 15, 75);
}
function renderai() {
	//this function renders the ai in the game
	ctx.fillRect(aix, aiy, 15, 75);
}
function resetcanvas() {
	//this function resets the canvas
	ctx.clearRect(0,0,1300,500);
	
}
function testballdirection() {
	//this function detirmens the direction of the ball
	switch(balldirection) {
		case 0:
			//case for going left
			bx = bx * -1;
		case 1:
			//case for going right
			bx = MATH.abs(bx); //sets the value to the absolute value of itself
	}
}
document.onkeydown = function testkey(e) {
	//this function tests for keys being pressed then moves the player
	if (e.keyCode == 38) {
		if (recy > 0) {
			console.log("moving up");
			recy = recy + -20;
		}
	}
	else if (e.keyCode == 40) {
		if (recy < 450) {
			console.log("moving down");
			recy = recy + 20;
		}
	}
}
function changeposball() {
	//this function changes the x and y of the ball occordngly
	bx = bx + ballspeedside;
	by = by + ballspeedup;
}
//@functions

//start
	document.onload = start();
//@start

我的HTML是：

<!DOCTYPE html>
<html>
<head>
	<title> pong </title>
	<link rel="stylesheet" type="text/css" href="pong.css">
</head>
<body>
	<h1> PONG BY HENRY REDDER</h1>
	<p id="gscore1"> 0 </p>
	<p id="gscore2"> 0 </p>
	<canvas id="canvas" width="1300" height="500" style="border:1px solid #000000;"> </canvas>
	<script src="pong.js"> </script>
</body>
</html>

最后我的css是：

h1 {
	text-align: center;
	font-family: Courier;
}
body {
	background-color: gray;
}
#canvas {
	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;
}

Answer 1

您遇到语法错误。

将MATH更改为Math。

球不在javascript乒乓球比赛中移动

1 个答案: