个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在创建一个 JS Pong 游戏，但 Pong 游戏中的球在几秒钟后开始滞后。我尝试停止动画帧，优化代码以获得更好的性能并重写球的代码，但没有任何效果。有人可以帮我吗？
HTML(无 CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pong</title>
</head>
<body>
<canvas id="canvas" width="800" height="400" style="background: #000"></canvas>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="main.JS"></script>
Javascript(使用 jQuery)
/*
Created : 7 / 18 / 2016
*/
//Bottom comment is used to define JQuery
/*jslint browser: true*/
/*global $, jQuery, alert*/
//Define variables
var canvas, ctx;
var ballX, ballY; //Balls x and y pos
var ballSpeedX, ballSpeedY; //Speed of ball x and y pos
var paddleY, paddleHeight, paddleWidth, aiY; //PaddleY = paddle's y pos and paddleHeight = Centering mouse on paddle
//Score variables
var aiScore, playerScore;
//Set functions
//Gets mouse pos
function getMousePos(e) {
"use strict";
//Define variables
var rect, root, mouseX, mouseY;
rect = canvas.getBoundingClientRect(); //Get canvas outline
root = document.documentElement; //Get html document
mouseX = e.clientX - rect.left - root.scrollLeft;
mouseY = e.clientY - rect.top - root.scrollTop;
//Return x and y pos to page
return {
x: mouseX,
y: mouseY
};
}
//Move ai function
function moveAI() {
"use strict";
var aiYCenter = aiY + paddleHeight / 2;
if (aiYCenter < ballY - 35) {
aiY += 6;
} else if (aiYCenter > ballY + 35) {
aiY -= 6;
}
}
//Animate objects
function animate() {
"use strict";
//Animate ball
ballX += ballSpeedX;
ballY += ballSpeedY;
//Make ai move
moveAI();
return false;
}
function resetBall() {
"use strict";
ballX = canvas.width / 2;
ballY = canvas.height / 2;
//Flip ball
ballSpeedX = -ballSpeedX;
return false;
}
//Detect collisiom
function collision() {
"use strict";
//Right wall
if (ballX > canvas.width) {
//If player paddle hits ball
if (ballY > aiY && ballY < aiY + paddleHeight) {
ballSpeedX = -ballSpeedX;
} else {
//If player paddle doesn't hit ball
resetBall(); //Reset ball function
playerScore += 1; //If ai scores add 1 point to ai's score
}
}
//Left wall
if (ballX < 0) {
//If player paddle hits ball
if (ballY > paddleY && ballY < paddleY + paddleHeight) {
ballSpeedX = -ballSpeedX;
} else {
//If player paddle doesn't hit ball
resetBall(); //Reset ball function
aiScore += 1; //If ai scores add 1 point to ai's score
}
}
if (ballY > canvas.height) { //If ballY does outside of 800px
ballSpeedY = -ballSpeedY;
}
if (ballY <= 0) { //If ballY goes outside of 0px
ballSpeedY = -ballSpeedY;
}
return false;
}
//Make paddle move
function movePaddle(e) {
"use strict";
var pos = getMousePos(e);
paddleY = pos.y - paddleHeight / 2; //Set paddleY to y pos of function and center user's mouse on the paddle
return false;
}
//Draw objects
function draw() {
"use strict";
ctx.clearRect(0, 0, canvas.width, canvas.height); //Clear canvas after animation frame
ctx.fillStyle = "white"; //Set color
//Draw ball
ctx.beginPath();
ctx.arc(ballX, ballY, 10, 0, Math.PI * 2, true);
ctx.fill();
//Draw player paddle
ctx.fillRect(0, paddleY, paddleWidth, paddleHeight);
//Draw ai
ctx.fillRect(canvas.width - paddleWidth, aiY, paddleWidth, paddleHeight);
//Score boarc
ctx.font = "30px Roboto";
//Draw score
ctx.fillText(playerScore, 100, 100); //Player score
ctx.fillText(aiScore, canvas.width - 100, 100);
return false;
}
//When document is ready
$("document").ready(function () {
"use strict";
//Get canvas and set its context
canvas = $("#canvas")[0];
ctx = canvas.getContext("2d");
//Set values to variables
//Set fps
var fps = 30;
ballX = 100;
ballY = 100;
ballSpeedX = 2;
ballSpeedY = 2;
paddleHeight = 100; //Used for centering mouse on paddle
paddleY = canvas.height / 2 - paddleHeight / 1.5; //Set paddle's y pos
paddleWidth = 10; //Width of paddle
//Score variables
aiScore = 0;
playerScore = 0;
aiY = canvas.height / 2 - paddleHeight / 1.5; //Height of ai player
setInterval(function () {
animate();
collision();
$(canvas).bind("mousemove", movePaddle); //Move paddle
draw();
}, fps / 1000);
return false;
});
最佳答案
我做了一些轻微的修改来考虑代码中的帧速率。
请尝试下面的方法。
//Set fps
var fps = 30, frameInterval = 1000/fps, lastTime = new Date().getTime();; // I would increase fps to 60
$(document).ready(function () {
"use strict";
//Get canvas and set its context
canvas = $("#canvas")[0];
ctx = canvas.getContext("2d");
//Set values to variables
ballX = 100;
ballY = 100;
ballSpeedX = 2;
ballSpeedY = 2;
paddleHeight = 100; //Used for centering mouse on paddle
paddleY = canvas.height / 2 - paddleHeight / 1.5; //Set paddle's y pos
paddleWidth = 10; //Width of paddle
//Score variables
aiScore = 0;
playerScore = 0;
aiY = canvas.height / 2 - paddleHeight / 1.5; //Height of ai player
$(canvas).bind("mousemove", movePaddle); //Bind once only
window.requestAnimationFrame(run);
return false;
});
function run() {
var now = new Date().getTime();
var elapsed = now - lastTime;
if(elapsed > frameInterval) {
animate();
collision();
draw();
lastTime = now;
}
window.requestAnimationFrame(run);
}
让我知道它是否有效。
关于JavaScript Pong 游戏延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38472320/
25
4
0
我正在关注 melon js tutorial .这是在我的 HUD.js 文件的顶部。 game.HUD = game.HUD || {} 我以前在其他例子中见过这个。 namespace.some
我刚刚制作了这个小游戏，用户可以点击。他可以看到他的点击，就像“cookieclicker”一样。 一切正常，除了一件事。 我尝试通过创建一个代码行变量来缩短我的代码，我重复了很多次。 documen
在此视频中:http://www.youtube.com/watch?v=BES9EKK4Aw4 Notch(我的世界的创造者)正在做他称之为“实时调试”的事情。他实际上是一边修改代码一边玩游戏，而不
两年前，我使用C#基于MonoGame编写了一款《俄罗斯方块》游戏，相关介绍可以参考【这篇文章】。最近，使用业余时间将之前的基于MonoGame的游戏开发框架重构了一下，于是，也就趁此机会将之前的《俄
1.题目 你和你的朋友，两个人一起玩 Nim 游戏： 桌子上有一堆石头。 你们轮流进行自己的回合， 你作为先手 。 每一回合，轮到的人拿掉 1 - 3 块石头。 拿掉最后一块石头的人就是获胜者。 假设
我正在创建平台游戏，有红色方 block (他们应该杀了我)和白色方 block (平台) 当我死时，我应该在当前级别的开始处复活。 我做了碰撞检测，但它只有在我移动时才有效(当我跳到红色方 bloc
因此，我正在处理(编程语言)中创建游戏突破，但无法弄清楚检查与 bat 碰撞的功能。 到目前为止，我写的关于与球棒碰撞的部分只是将球与底座碰撞并以相反的方向返回。目前，游戏是一种永无止境的现象，球只是
我试图让我的敌人射击我的玩家，但由于某种原因，子弹没有显示，也没有向玩家射击我什至不知道为什么，我什至在我的 window 上画了子弹 VIDEO bulls = [] runninggame = T
我正在尝试添加一个乒乓游戏框架。我希望每次球与 Racket 接触时球的大小都会增加。 这是我的尝试。第一 block 代码是我认为问题所在的地方。第二 block 是全类。 public class
我想知道 3D 游戏引擎编程通常需要什么样的数学？任何特定的数学(如向量几何)或计算算法(如快速傅立叶变换)，或者这一切都被 DirectX/OpenGL 抽象掉了，所以不再需要高度复杂的数学？ 最佳
我正在为自己的类(class)做一个霸气游戏，我一直在尝试通过添加许多void函数来做一些新的事情，但由于某种奇怪的原因，我的开发板无法正常工作，因为它说标识符“board”未定义，但是我有到目前为止
我在使用 mousePressed 和 mouseDragged 事件时遇到了一些问题。我正在尝试创建一款太空射击游戏，我希望玩家能够通过按下并移动鼠标来射击。我认为最大的问题是 mouseDragg
你好，我正在尝试基于概率实现战斗和准确性。这是我的代码，但效果不太好。 public String setAttackedPartOfBodyPercent(String probability) {
所以我必须实现纸牌游戏 war 。我一切都很顺利，除了当循环达到其中一张牌(数组列表)的大小时停止之外。我想要它做的是循环，直到其中一张牌是空的。并指导我如何做到这一点？我知道我的代码可以缩短，但我现
我正在做一个正交平铺 map Java 游戏，当我的船移动到 x 和 y 边界时，按方向键，它会停止移动(按预期)，但如果我继续按该键，我的角色就会离开屏幕. 这是我正在使用的代码: @O
这里是 Ship、Asteroids、BaseShapeClass 类的完整代码。 Ship Class 的形状继承自 BaseShapeClass。 Asteroid类是主要的源代码，它声明了Gra
我正在开发这个随机数猜测游戏。在游戏结束时，我希望用户可以选择再次玩(或让其他人玩)。我发现了几个类似的线程和问题，但没有一个能够帮助我解决这个小问题。我很确定我可以以某种方式使用我的 while 循
我认为作为一个挑战，我应该编写一个基于 javascript 的游戏。我想要声音、图像和输入。模拟屏幕的背景(例如 640x480，其中包含我的所有图像)对于将页面的其余部分与“游戏”分开非常有用。我
我正在制作一个游戏，我将图标放在网格的节点中，并且我正在使用这个结构: typedef struct node{ int x,y; //coordinates for graphics.h
我正在研究我的游戏技能(主要是阵列)来生成敌人，现在子弹来击倒他们。我能够在测试时设置项目符号，但只有当我按下一个键(比方说空格键)并且中间没有间隔时才可见，所以浏览器无法一次接受那么多。 有没有什么
我是一名优秀的程序员,十分优秀！