Fatal编程技术网
  • javascript/
  • Javascript Pong脚本在html中对齐不'；行不通

Javascript Pong脚本在html中对齐不'；行不通

javascript html

Javascript Pong脚本在html中对齐不'；行不通,javascript,html,alignment,pong,Javascript,Html,Alignment,Pong,我是JavaScript新手，有一个简单的问题。 我有一个pong.js和我的index.html <html> <head> </head> <body> <script src="pong.js"> </script> </body> </html> 乒乓球游戏应该出现在中间，但我不能做到这一点。我尝试过在互联网上找到的不同的东西，但没有任何帮助。我对Ja

我是JavaScript新手，有一个简单的问题。 我有一个pong.js和我的index.html

<html>
  <head>
  </head>
   <body>
     <script src="pong.js">
     </script>
   </body>
</html>
乒乓球游戏应该出现在中间，但我不能做到这一点。我尝试过在互联网上找到的不同的东西，但没有任何帮助。我对Java一无所知。我认为这是一个简单的代码

我希望你能帮助我。谢谢大家!

这是index.html

<html>
  <head>
  </head>
   <body>
     <script src="pong.js">
     </script>
   </body>
</html>
这是我的乒乓球

// PONG SCRIPT V1

// FRAMERATE
var animate = window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  function(callback) { window.setTimeout(callback, 1000/60) };



// RESOLUTION CANVAS
var canvas = document.createElement('canvas');
var width = 600;
var height = 400;
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');




// ANIMATE FUNCTION
window.onload = function() {
  document.body.appendChild(canvas);
  animate(step);
};



// RENDER UPDATE
var step = function() {
  update();
  render();
  animate(step);
};



// BG COLOR
var update = function() {
};

var render = function() {
  context.fillStyle = "#FFD439";
  context.fillRect(0, 0, width, height);
};



//ADDING PADDLES AND THE BALL

// PADDLES
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;
}

Paddle.prototype.render = function() {
  context.fillStyle = "#FFFFFF";
  context.fillRect(this.x, this.y, this.width, this.height);
};



// PADDLES POSITION SCALE
function Computer() {
  this.paddle = new Paddle(10, 175, 10, 50);
}

function Player() {
   this.paddle = new Paddle(580, 175, 10, 50);
}



// PADDLES RENDER FUNCTION
Player.prototype.render = function() {
  this.paddle.render();
};

Computer.prototype.render = function() {
  this.paddle.render();
};



// BALL RADIUS COLOR SPEED
function Ball(x, y) {
  this.x = x;
  this.y = y;
  this.x_speed = 4;
  this.y_speed = 0;
  this.radius = 5;
}

Ball.prototype.render = function() {
  context.beginPath();
  context.arc(this.x, this.y, this.radius, 2 * Math.PI, false);
  context.fillStyle = "#FFFFF";
  context.fill();
};



// RENDER PADDLES AND BALL POSITION
var player = new Player();
var computer = new Computer();
var ball = new Ball(300, 200);

var render = function() {
  context.fillStyle = "#FFD439";
  context.fillRect(0, 0, width, height);
  player.render();
  computer.render();
  ball.render();
};




// ANIMATING

// MOVEMENT BALL
var update = function() {
  ball.update();
};

Ball.prototype.update = function() {
  this.x += this.x_speed;
  this.y += this.y_speed;
};



// COLLISION WALLS PADDLES
var update = function() {
  ball.update(player.paddle, computer.paddle);
};

Ball.prototype.update = function(paddle1, paddle2) {
  this.x += this.x_speed;
  this.y += this.y_speed;
  var top_x = this.x - 5;
  var top_y = this.y - 5;
  var bottom_x = this.x + 5;
  var bottom_y = this.y + 5;

  if(this.y - 5 < 0) { // hitting the upper wall
    this.y = 5;
    this.y_speed = -this.y_speed;
  } else if(this.y + 5 > 400) { // hitting the lower wall
    this.y = 395;
    this.y_speed = -this.y_speed;
  }

  if(this.x < 0 || this.x > 600) { // a point was scored
    this.x_speed = 4;
    this.y_speed = 0;
    this.x = 300;
    this.y = 200;
  }

  if(top_x > 300) {
    if(top_x < (paddle1.x + paddle1.width) && bottom_x > paddle1.x && top_y < (paddle1.y + paddle1.height) && bottom_y > paddle1.y) {
      // hit the player's paddle
      this.x_speed = -4;
      this.y_speed += (paddle1.y_speed / 2);
      this.x += this.x_speed;
    }
  } else {
    if(top_x < (paddle2.x + paddle2.width) && bottom_x > paddle2.x && top_y < (paddle2.y + paddle2.height) && bottom_y > paddle2.y) {
      // hit the computer's paddle
      this.x_speed = 4;
      this.y_speed += (paddle2.y_speed / 2);
      this.x += this.x_speed;
    }
  }
};



// CONTROLS
var keysDown = {};

window.addEventListener("keydown", function(event) {
  keysDown[event.keyCode] = true;
});

window.addEventListener("keyup", function(event) {
  delete keysDown[event.keyCode];
});

var update = function() {
  player.update();
  ball.update(player.paddle, computer.paddle);
};

Player.prototype.update = function() {
  for(var key in keysDown) {
    var value = Number(key);
    if(value == 38) { // up arrow
      this.paddle.move(0, -4);
    } else if (value == 40) { // down arrow
      this.paddle.move(0, 4);
    } else {
      this.paddle.move(0, 0);
    }
  }
};

Paddle.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  this.x_speed = x;
  this.y_speed = y;
  if(this.y < 0) { // all the way to the top
    this.y = 0;
    this.y_speed = 0;
  } else if (this.y + this.height > 400) { // all the way to the bottom
    this.y = 400 - this.height;
    this.y_speed = 0;
  }
}



// COMPUTER AI
var update = function() {
  player.update();
  computer.update(ball);
  ball.update(player.paddle, computer.paddle);
};

Computer.prototype.update = function(ball) {
  var y_pos = ball.y;
  var diff = -((this.paddle.y + (this.paddle.height / 2)) - y_pos);
  if(diff < 0 && diff < -5) { // max speed left
    diff = -5;
  } else if(diff > 0 && diff > 5) { // max speed right
    diff = 5;
  }
  this.paddle.move(0, diff);
  if(this.paddle.y < 0) {
    this.paddle.y = 0;
  } else if (this.paddle.y + this.paddle.height > 400) {
    this.paddle.y = 400 - this.paddle.height;
  }
};

//PONG脚本V1
//帧率
var animate=window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
函数（回调）{window.setTimeout（回调，1000/60）}；
//分辨率画布
var canvas=document.createElement（'canvas'）；
var宽度=600；
var高度=400；
画布宽度=宽度；
canvas.height=高度；
var context=canvas.getContext（'2d'）；
//动画功能
window.onload=函数（）{
document.body.appendChild（画布）；
设置动画（步骤）；
};
//渲染更新
var步骤=函数（）{
更新（）；
render（）；
设置动画（步骤）；
};
//背景色
var update=函数（）{
};
var render=function（）{
context.fillStyle=“#FFD439”；
fillRect（0，0，宽度，高度）；
};
//添加球拍和球
//划桨
功能挡板（x、y、宽度、高度）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
该速度=0；
该速度=0；
}
pable.prototype.render=函数（）{
context.fillStyle=“#FFFFFF”；
context.fillRect（this.x，this.y，this.width，this.height）；
};
//桨叶位置刻度
函数计算机（）{
this.paile=新的桨（10,175,10,50）；
}
函数播放器（）{
这个桨=新的桨（580、175、10、50）；
}
//拨片渲染功能
Player.prototype.render=函数（）{
this.patle.render（）；
};
Computer.prototype.render=函数（）{
this.patle.render（）；
};
//球半径色速度
功能球（x，y）{
这个.x=x；
这个。y=y；
该速度=4；
该速度=0；
这个半径=5；
}
Ball.prototype.render=函数（）{
context.beginPath（）；
弧（this.x，this.y，this.radius，2*Math.PI，false）；
context.fillStyle=“#fffffff”；
context.fill（）；
};
//渲染球拍和球的位置
var player=新玩家（）；
var computer=新计算机（）；
var球=新球（300200）；
var render=function（）{
context.fillStyle=“#FFD439”；
fillRect（0，0，宽度，高度）；
player.render（）；
computer.render（）；
ball.render（）；
};
//动画
//运动球
var update=函数（）{
更新（）；
};
Ball.prototype.update=函数（）{
此.x+=此.x_速度；
this.y+=this.y\u速度；
};
//碰撞壁桨
var update=函数（）{
更新（player.patle，computer.patle）；
};
Ball.prototype.update=功能（桨叶1、桨叶2）{
此.x+=此.x_速度；
this.y+=this.y\u速度；
var top_x=这个.x-5；
var top_y=this.y-5；
var bottom_x=这个.x+5；
var bottom_y=这个.y+5；
如果（this.y-5<0）{//击中上壁
这个y=5；
this.y_speed=-this.y_speed；
}否则，如果（此.y+5>400）{//击中下壁
这个y=395；
this.y_speed=-this.y_speed；
}
如果（this.x<0 | | this.x>600）{//得一分
该速度=4；
该速度=0；
这个.x=300；
这个y=200；
}
如果（顶部x>300）{
如果（顶部×<（桨叶1.x+桨叶1.宽度）和底部×>桨叶1.x和顶部×<（桨叶1.y+桨叶1.高度）和底部×>桨叶1.y）{
//击球员的球拍
这个.x_速度=-4；
这是1.y_速度+=（桨叶1.y_速度/2）；
此.x+=此.x_速度；
}
}否则{
如果（顶部x<（桨叶2.x+桨叶2.宽度）和底部x>桨叶2.x和顶部y<（桨叶2.y+桨叶2.高度）和底部y>桨叶2.y）{
//按下电脑的按钮
该速度=4；
该速度+=（桨叶2.y_速度/2）；
此.x+=此.x_速度；
}
}
};
//控制
var keysDown={}；
window.addEventListener（“按键向下”，函数（事件）{
keysDown[event.keyCode]=true；
});
window.addEventListener（“键控”，函数（事件）{
删除keysDown[event.keyCode]；
});
var update=函数（）{
player.update（）；
更新（player.patle，computer.patle）；
};
Player.prototype.update=函数（）{
for（var键输入键向下）{
var值=编号（键）；
如果（值==38）{//向上箭头
这个。桨。移动（0，-4）；
}如果（值==40）{//向下箭头
这个。划桨。移动（0，4）；
}否则{
这个。划桨。移动（0，0）；
}
}
};
桨叶.prototype.move=功能（x，y）{
这个.x+=x；
这个.y+=y；
这个速度=x；
这是速度=y；
如果（this.y<0）{//一直到顶部
这个。y=0；
该速度=0；
}否则如果（this.y+this.height>400）{//一直到底部
this.y=400-this.height；
该速度=0；
}
}
//计算机人工智能
var update=函数（）{
player.update（）；
计算机更新（ball）；
更新（player.patle，computer.patle）；
};
Computer.prototype.update=函数（ball）{
变量y_pos=球y；
var diff=-（（this.paile.y+（this.paile.height/2））-y_pos）；
如果（差值<0&&diff<-5）{//左最大速度
差异=-5；
}否则，如果（差异>0&&diff>5）{//max speed right
差异=5；
}
这个。桨。移动（0，差）；
如果（此桨y<0）{
这个.patle.y=0；
}否则，如果（this.paile.y+this.paile.height>400）{
this.paile.y=400——this.paile.height；
}
};
脚本运行良好，正如您在这里看到的：我想要的是，乒乓球游戏在中间。这是我的脚本和索引文件。从顶部的代码中可以看到相同的代码。我只需要一个代码将其放在中间。我将“应该显示在中间，但我无法实现”解释为“脚本未显示”而不是“游戏未居中”。对不起。目前还没有实现这一点的代码。我在网上试了一些，但什么也没发生。我对整个html和Java世界都很陌生。