gpt4 book ai didi

javascript - Canvas 游戏,如何保持清爽

转载 作者:太空宇宙 更新时间:2023-11-04 16:15:27 24 4
gpt4 key购买 nike

所以我为我的一个项目制作了这款 Pong for Canvas 游戏,但我似乎无法让它在第一帧后继续。有人可以帮助我让这个游戏在第一帧后继续运行吗?首先是 HTML,然后是 JS。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Connor's COMP-106 Pong</title>

<script src="js/CCAdventure-Example.js"></script>
</head>
<canvas id="gc" width="640" Height="480"></canvas>

p1y=p2y=40;
pt=10;
ph=100;
bx=by=50;
bd=6;
xv=yv=4;
score1=score2=0;
ais=2;
window.onload=function(){
c=document.getElementById('gc');
cc=c.getContext('2d');
setInterval(update,1000/30);

}
function reset(){
bx=c.width/2;
by=c.height/2;
xv=-xv;
yv=3;
}
function update(){
bx+=xv;
by+=yv;
if(by<0 && yv<0){
yv=-yv;
}
if(by>c.height && yv>0){
yv=-yv;
}
if(bx<0){
if(by>p1y && by<p1y+ph){
xv=-xv;
dy=by-(p1y+ph/2);
yv = dy*0.3;
} else{
score2++;
reset();
}
}
if(bx>c.width){
if(by>p2y && by<p2y+ph){
xv=-xv;
dy=by-(p2y+ph/2);
yv = dy*0.3;
} else{
score1++;
reset();
}
}
if(p2y+ph/2<by){
p2y+=ais;
} else{
p2y-=ais;
}


cc.fillstyle='black';
cc.fillRect(0,0,c.width,c.height);
cc.fillStyle='white';
cc.fillRect(0,p1y,pt,ph);
cc.fillRect(c.width-pt,p2y,pt,ph);
cc.fillRect(bx-bd/2,by-bd/2,bd,bd);
cc.fillText(score1,100,100);
cc.fillText(score2,c.width-100,100);
}

最佳答案

如果您在 resetupdate 中向代码添加日志记录,您可以看到代码仍在绘制(并且获胜)。

您没有看到任何更新的原因是您输入了 cc.fillstyle='black'; 而不是 cc.fillStyle='black';这会阻止您看到“白色” Racket 、球和得分。

Working JSFiddle

(我更改了几个变量名称以跟踪发生的情况)

PS。我不确定性能方面是否会产生很大的差异,但我喜欢在再次绘制形状之前使用 .clearRect() ,以便我知道我正在使用空 Canvas 。

关于javascript - Canvas 游戏,如何保持清爽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41116137/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com