Итак, я делаю чистый клон javascript-понга для своего класса cs и с ним почти ничего не получилось.Моя текущая проблема заключается в том, что область, где игрок может играть в игру и где появляются весла и мяч, кажется, не хочет работать.Любые идеи о том, как сделать так, чтобы мой холст отображался на странице под всем текстом и другим html, который мне нужен на странице, чтобы сделать его достойно выглядящим сайтом?Я пытался найти это, но ничего не получается.Тэг canvas в html изначально был тем, что у меня было, когда я понял, что он не будет работать, а тег div прямо над ним - это то, что я сейчас пытаюсь создать холст и вставить его через внутренний html.
Если у кого-то есть какие-либо советы, а также о том, как я могу немного улучшить игру, но при этом быть простым, это было бы удивительно для вас!Идея игры состоит в том, что у вас будет 3 трудности на выбор, и когда вы выберете свою сложность, вы нажмете кнопку запуска и сможете играть.Хотя в настоящее время я не уверен в том, как сделать кнопки так, чтобы каждая кнопка сложности ограничивала скорость мяча и скорость AI-лопатки на протяжении всей игры, в дополнение к нажатию кнопки запуска после.Я, вероятно, буду публиковать об этой части позже, но я решил спросить об этом сейчас и, возможно, сэкономить время.
Спасибо за чтение и ваше время ответить!
<html>
<head>
<script type="text/javascript">
// Sets the FPS for the window so the game runs smooth
var animate = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback)
{
window.setTimeout(callback,1000/60);
};
// Basic variables for the elements of the game
var canvas = document.createElement("myCanvas");
var width = 800;
var height = 500;
canvas.width = width;
canvas.height = height;
document.body.appendChild(canv);
document.getElementById('PlayArea').appendChild(canv);
var context = canvas.getContext('2d');
var user = new User();
var ai = new AI();
var ball = new Ball(400,250);
// Style for the stage
var render = function ()
{
context.fillStyle = "#000000";
context.fillRect(0, 0);
user.render();
ai.render();
ball.render();
};
// Updates and renders the objects of the game
var update = function ()
{
user.update();
ai.update();
ball.update(user.paddle, ai.paddle);
};
var step = function ();
{
update();
render();
animate(step);
}
// Sets up the paddles for the game
function paddle(x, y, width, height)
{
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.x_speed = 0;
this.y_speed = 0;
}
// Renders the paddles and sets up its movement function
paddle.prototype.render = function ()
{
context.fillStyle = "#FFFFFF";
context.fillRect(this.x, this.y, this.width, this.height);
};
paddle.prototype.move = function (x, y)
{
this.x += x;
this.y += y;
this.y_speed += y;
if (this.y < 0)
{
this.y = 0;
this.y_speed = 0;
}
else if (this.y + this.height > 500)
{
this.y = 500 - this.height;
this.y_speed = 0;
}
};
function ai()
{
this.paddle = new Paddle(10, 250, 50, 10);
}
computer.prototype.render = function ()
{
this.paddle.render();
};
function Pong(Difficulty)
{
if (Difficulty == 1)
{
}
if (Difficulty == 2)
{
}
if (Difficulty == 3)
{
}
document.body.appendChild(canvas);animate(step);
}
</script>
</head>
<body>
<h1>
Pong Game!
</h1>
<h2>
Pong is a simple game where you and an AI player play a game similar to ping pong.
</h2>
<p>
A point is awarded for every time you get the ball past the enemy AI.
</p>
<p>
Score 3 points against the AI to win! If the AI scores 3 points against you, you lose.
</p>
<p>
Controls:
</p>
<p>
Press which difficulty you would like to play on and then click the "START" button when you are ready to play!
</p>
<p>
Difficulties:
<input TYPE="button" value="Easy" onclick="Pong(1);">
<input TYPE="button" value="Medium" onclick="Pong(2);">
<input TYPE="button" value="Hard" onclick="Pong(3);">
</p>
<div id="PlayArea"></div>
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;"></canvas>
</body>
</html>