#javascript
#javascript
Вопрос:
Я следил за онлайн-руководством по созданию прорывной игры с использованием JS, но это не работает. Даже такая простая вещь, как всплывающее окно с предупреждением, не работает. Все это начало происходить после того, как я создал элементы управления с клавиатуры, и все ошибки также находятся в этом разделе. Но это выглядит нормально, я сравнил пример кода со своим, и все идентично. Что я делаю не так?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background:rgba(104, 10, 93, 0.61);
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
</body>
<script>
// JS goes here
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUphandler, false);
alert('test')
function keyDownHandler(e) {
if(e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
}
elseif(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.key -- "Right" || e.key == "ArrowRight") {
rightPressed = false;
}
elseif(e.key-- "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#EE82EE";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleheight, paddleWidth, paddleHeight);
ctx.fillStyle = "#9400D3";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
if(x dx > canvas.width - ballRadius || x dx < ballRadius) {
dx = -dx;
}
if (y dy > canvas.height - ballRadius || y dy < ballRadius) {
dy = -dy;
}
if(rightPressed) {
paddleX = 7;
if (paddleX paddleWidth > canvas.width){
paddleX = canvas.width - paddleWidth;
}
}
else if(leftPressed) {
paddleX -= 7;
if (paddleX < 0){
paddleX = 0;
}
x = dx;
y = dy;
}
}
setInterval(draw, 10);
</script>
</body>
</html>
Комментарии:
1.
if(e.key -- "Right"выглядит не совсем правильно.2. У вашего html есть проблема. Вы дважды закрываете тег body.
3. В будущем, если вы примерно знаете, что вы добавили, что заставило вещи перестать работать, вы можете попробовать удалять половину кода за раз, пока он не заработает. Это поможет вам еще больше сузить проблему.
4. Я изменил их, теперь до двух ошибок: ожидаемых; в [50, 57] и [59, 57]
5. У вас много синтаксических ошибок в вашем JavaScript, которые вы должны быть в состоянии обнаружить с помощью современной IDE (например, VS Code). Например, не существует такого понятия, как «elseif», это должно быть «else if» с пробелом.
Ответ №1:
В вашем коде много опечаток. Эта версия должна работать лучше (по крайней мере, она не генерирует никаких ошибок):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background:rgba(104, 10, 93, 0.61);
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
</body>
<script>
// JS goes here
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
alert('test')
function keyDownHandler(e) {
if(e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
}
else if(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key == "Right" || e.key == "ArrowRight") {
rightPressed = false;
}
else if(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#EE82EE";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#9400D3";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
if(x dx > canvas.width - ballRadius || x dx < ballRadius) {
dx = -dx;
}
if (y dy > canvas.height - ballRadius || y dy < ballRadius) {
dy = -dy;
}
if (rightPressed) {
paddleX = 7;
if (paddleX paddleWidth > canvas.width){
paddleX = canvas.width - paddleWidth;
}
}
else if(leftPressed) {
paddleX -= 7;
if (paddleX < 0){
paddleX = 0;
}
x = dx;
y = dy;
}
}
setInterval(draw, 10);
</script>
</html> Комментарии:
1. OP должен использовать WinMerge или аналогичный инструмент для сравнения и продолжения обучения.