Javascript 如何在HTML5 JS Canvas足球点球游戏中设置每次点球的延迟
我正在尝试使用HTML5/JS画布制作一个简单的足球点球游戏。比赛的目的是让你控制守门员，你有三次机会救球 我已经完成了大部分功能，我有一个评分系统和碰撞检测 目前我在第一次尝试时有延迟。然而，在第二次和第三次尝试中，我发现在球射入球门之前增加延迟是很困难的 我正在使用requestAnimationFrame（）方法在画布上绘制形状。如果仍有尝试，球将定位到其原始位置，但没有延迟，并立即发射球 有什么建议吗？谢谢Javascript 如何在HTML5 JS Canvas足球点球游戏中设置每次点球的延迟,javascript,html,canvas,requestanimationframe,Javascript,Html,Canvas,Requestanimationframe,我正在尝试使用HTML5/JS画布制作一个简单的足球点球游戏。比赛的目的是让你控制守门员，你有三次机会救球 我已经完成了大部分功能，我有一个评分系统和碰撞检测 目前我在第一次尝试时有延迟。然而，在第二次和第三次尝试中，我发现在球射入球门之前增加延迟是很困难的 我正在使用requestAnimationFrame（）方法在画布上绘制形状。如果仍有尝试，球将定位到其原始位置，但没有延迟，并立即发射球 有什么建议吗？谢谢 <!DOCTYPE html> <html> <h
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Football</title>
<style>
* { padding: 0; margin: 0; }
canvas { background: #a5bd7b; display: block; margin: 0 auto; }
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="250"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
//Sets the original position of the ball
var x = canvas.width/2;
var y = 50;
// Defines values that will be added to the position of x and y values
// List of possible values for the x position
var x_options = [3.5, 3, 2.5, 2, 1.5, 1, 0.5, 0, -0.5, -1, -1.5, -2, -2.5, -3, -3.5];
// Gets a random value from the x_options array
var dx = x_options[Math.floor(Math.random() * x_options.length)];
var dy = 5;
var ballRadius = 10;
// Defines the height and width of the goal
var goal_height = 40;
var goal_width = 200
// Defines the height, width and position of goalie
var goalieHeight = 20;
var goalieWidth = 40;
var goalieX = (canvas.width-goalieWidth)/2;
var goalieY = (canvas.height - goal_height) - 30;
// Set to false by default
var rightPressed = false;
var leftPressed = false;
var goalkeeper_blocked = 0;
var goalkeeper_missed = 0;
var attempts_left = 3;
var attempt1 = true;
var attempt2 = false;
var attempt3 = false;
var footBall = {
shapes : {
ball: function (){
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2, false);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
},
goal : function (){
ctx.beginPath();
ctx.rect((canvas.width - goal_width) / 2 , canvas.height - goal_height, goal_width, goal_height);
ctx.strokeStyle = "#000000";
ctx.stroke();
ctx.closePath();
},
goalie : function(){
ctx.beginPath();
ctx.rect(goalieX, goalieY, goalieWidth, goalieHeight);
ctx.fillStyle = "#666666";
ctx.fill();
ctx.closePath();
},
score : function(){
ctx.font = "16px Arial";
ctx.fillStyle = "#ffffff";
ctx.fillText("Score: "+goalkeeper_blocked, 8, 20);
},
missed : function(){
ctx.font = "16px Arial";
ctx.fillStyle = "#ffffff";
ctx.fillText("Missed: "+goalkeeper_missed, 8, 40);
},
attempts : function(){
ctx.font = "16px Arial";
ctx.fillStyle = "#ffffff";
ctx.fillText("Attempts left: "+attempts_left, canvas.width-110, 20);
}
},
controls : {
keyDownHandler : function (e){
if(e.keyCode == 39) {
rightPressed = true;
}
else if(e.keyCode == 37) {
leftPressed = true;
}
},
keyUpHandler : function(e){
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
}
},
calculateScore : function(){
if(goalkeeper_missed > goalkeeper_blocked){
alert("GAME OVER! YOU HAVE LOST!");
document.location.reload();
} else {
alert("GAME OVER! YOU HAVE WON!");
document.location.reload();
}
},
animateBall : function (){
// Sets a delay of 3 second before it shoots
setTimeout(function(){
x += dx;
y += dy;
}, 3000);
},
resetShapePositions : function(){
//Sets the original position of the ball
x = canvas.width/2;
y = 50;
// Sets a new shooting path
dx = x_options[Math.floor(Math.random() * x_options.length)];
dy = 5;
// Resets the goalie to the middle
goalieX = (canvas.width-goalieWidth)/2;
},
draw : function(){
// This ensures that the ball doesn't leave a trail
// Clears the canvas of this shape each frame
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draws shapes on the canvas
footBall.shapes.ball();
footBall.shapes.goal();
footBall.shapes.goalie();
footBall.shapes.score();
footBall.shapes.missed();
footBall.shapes.attempts();
// adds values to the balls x and y position every frame
footBall.animateBall();
// Ball hits the goal
if(y + dy > canvas.height - goal_height) {
attempts_left--;
goalkeeper_missed++;
if (!attempts_left){
footBall.calculateScore();
}
else {
footBall.resetShapePositions();
}
} // Ball saved by goalie
else if (x > goalieX && x < goalieX + goalieWidth && y + dy > goalieY - ballRadius){
attempts_left--;
goalkeeper_blocked++;
if (!attempts_left){
footBall.calculateScore();
}
else {
footBall.resetShapePositions();
}
}
// makes paddle move left and right and only within the canvas
if(rightPressed && goalieX < canvas.width-goalieWidth) {
goalieX += 7;
}
else if(leftPressed && goalieX > 0) {
goalieX -= 7;
}
requestAnimationFrame(footBall.draw);
}
}
footBall.draw();
// Defines what functions are fired when keydown or keyup event triggers
document.addEventListener("keydown", footBall.controls.keyDownHandler, false);
document.addEventListener("keyup", footBall.controls.keyUpHandler, false);
</script>
</body>
</html>
足球
*{填充：0；边距：0；}
画布{背景：#a5bd7b；显示：块；边距：0自动；}
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（“2d”）；
//设置球的原始位置
var x=canvas.width/2；
变量y=50；
//定义将添加到x和y值位置的值
//x位置的可能值列表
var x_期权=[3.5,3,2.5,2,1.5,1,0.5,0，-0.5，-1，-1.5，-2，-2.5，-3，-3.5]；
//从x_选项数组中获取一个随机值
var dx=x_options[Math.floor（Math.random（）*x_options.length）]；
var-dy=5；
var-ballRadius=10；
//定义目标的高度和宽度
目标高度=40；
目标宽度=200
//定义守门员的高度、宽度和位置
var目标高度=20；
目标宽度=40；
var goalieX=（canvas.width goalieWidth）/2；
var goalieY=（canvas.height-goal_height）-30；
//默认设置为false
var-rightspressed=false；
var leftPressed=false；
var守门员_阻塞=0；
var守门员_未命中=0；
var\u left=3；
var attempt1=真；
var attempt2=错误；
var attempt3=错误；
足球={
形状：{
ball：函数（）{
ctx.beginPath（）；
弧（x，y，球半径，0，数学PI*2，假）；
ctx.fillStyle=“红色”；
ctx.fill（）；
ctx.closePath（）；
},
目标：职能（）{
ctx.beginPath（）；
ctx.rect（（canvas.width-goal\u width）/2，canvas.height-goal\u height，goal\u width，goal\u height）；
ctx.strokeStyle=“#000000”；
ctx.stroke（）；
ctx.closePath（）；
},
守门员：职能（）{
ctx.beginPath（）；
ctx.rect（守门员、守门员、守门员宽度、守门员高度）；
ctx.fillStyle=“#666666”；
ctx.fill（）；
ctx.closePath（）；
},
分数：函数（）{
ctx.font=“16px Arial”；
ctx.fillStyle=“#ffffff”；
ctx.fillText（“得分：+守门员被阻挡，8分，20分）；
},
遗漏：函数（）{
ctx.font=“16px Arial”；
ctx.fillStyle=“#ffffff”；
ctx.fillText（“未遂：“+守门员_未遂，8，40”）；
},
尝试：函数（）{
ctx.font=“16px Arial”；
ctx.fillStyle=“#ffffff”；
ctx.fillText（“左尝试次数：+左尝试次数，canvas.width-110,20）；
}
},
控制：{
keyDownHandler:函数（e）{
如果（e.keyCode==39）{
rightspressed=true；
}
否则如果（e.keyCode==37）{
leftPressed=true；
}
},
keyUpHandler:函数（e）{
如果（e.keyCode==39）{
右压=假；
}
否则如果（e.keyCode==37）{
leftPressed=false；
}
}
},
calculateScore:函数（）{
如果（守门员未命中>守门员被阻挡）{
警告（“游戏结束！你输了！”）；
document.location.reload（）；
}否则{
警惕（“游戏结束！你赢了！”）；
document.location.reload（）；
}
},
animateBall:函数（）{
//在发射前设置3秒的延迟
setTimeout（函数（）{
x+=dx；
y+=dy；
}, 3000);
},
resetShapePositions:function（）{
//设置球的原始位置
x=画布宽度/2；
y=50；
//设置新的拍摄路径
dx=x_选项[Math.floor（Math.random（）*x_选项.length）]；
dy=5；
//将守门员移到中间位置
goalieX=（canvas.width goalieWidth）/2；
},
绘图：函数（）{
//这样可以确保球不会留下痕迹
//在每个帧中清除此形状的画布
clearRect（0，0，canvas.width，canvas.height）；
//在画布上绘制形状
足球。形状。球（）；
足球。形状。目标（）；
足球。形状。守门员（）；
足球。形状。得分（）；
足球。形状。缺失（）；
足球。形状。尝试（）；
//每帧向球的x和y位置添加值
足球；
//球击中球门
如果（y+dy>canvas.height-目标高度）{
左——；
守门员_错过了++；
如果（！左）{
足球。计算核心（）；
}
否则{
足球。重置形状位置（）；
}
}//守门员救球
否则如果（x>goalieX&&xgoalieY-ballRadius）{
左——；
守门员_盖帽++；
如果（！左）{
足球。计算核心（）；
}
否则{
足球。重置形状位置（）；
}
}
//使桨叶左右移动，并且仅在画布内移动
如果（右按&&goalieX0
// is a shot in progress?
isShooting:false,
// the time when next shot will start
nextShotTime:0,
// delay between shots
delayUntilNextShot:3000,