- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
// Commented because does not work in Sandbox
// window.localStorage; //Ignore this line
// Where all my variables have been assigned
var c = document.getElementById("GameScreen");
var ctx = c.getContext("2d");
var charY = 220;
const gravity = 10;
var score = 0;
var time = 0;
var speed = 5;
var cloneID = 0;
var clonePos = [600];
var clonePoints = [0];
var animationBounce = 0;
var jump = 10;
var charDead = 0;
var dataCharY = [];
var dataDisObst = [];
var disObst = 1000;
var lowestLoopDis;
var jumpFactor = 0;
var disDeath;
var AIgames = 1;
var bestScoreAI = 0;
ctx.translate(c.width / 2, c.height / 2);
// Was going to use this for background trees but haven't done it yet
new obj(50, 50, 30, 30);
// Runs most functions
function runAll() {
if (charDead == 0) {
clearAll(); //This function runs most of the code
updateChar();
createGround();
updateObj();
groundDetect();
updateScore();
hitDetect();
addData();
testBetterAI();
getDisObst();
jumpAI();
removeUnusedObst();
}
}
// Was going to use this for trees but haven't yet
function obj(x, y, width, height) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx.beginPath();
ctx = c.getContext("2d");
ctx.fillStyle = "brown";
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.fillStyle = "green";
ctx.arc(-293, 150, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
this.cloneID = cloneID;
}
new obj(-293, 212, 0, 2 * Math.PI);
// Creates the floor (IKR)
function createGround() {
ctx.fillStyle = "green";
ctx.fillRect(-635, 250, c.width, 50);
}
// Creates the character every milisecond (or 10, I can't remember)
function updateChar() {
ctx.fillStyle = "blue";
ctx.fillRect(-300, charY - animationBounce, 15, 30);
ctx.fillStyle = "pink";
ctx.beginPath();
ctx.arc(-293, charY - animationBounce - 15, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
}
// Removes everything in order to be redrawn in new position
function clearAll() {
ctx.clearRect(-700, -700, 2000, 2000);
}
// Redraws every square / object
function updateObj() {
for (var i = 0; i != clonePos.length; i++) {
ctx.fillStyle = "green";
ctx.fillRect(clonePos[i], 220, 30, 30);
}
}
// Creates new square (I also decided to rename them half way through with obstacle instead of object)
function createObst() {
clonePos.push(600);
cloneID++;
}
// Changes the squares / obstacles position relative to the movement
function moveObst() {
for (var ii = 0; ii != clonePos.length; ii++) {
clonePos[ii] -= speed;
}
}
// Tests to see if the character is on the ground
function groundDetect() {
if (charY > 220) {
charY = 220;
}
}
// Makes gravity actually work
function charGravity() {
if (charY < 220) {
charY += gravity;
}
}
// Updates the score counter text
function updateScore() {
document.getElementById("scoreText").innerHTML = score;
}
// Gives the character a little bounce when moving
function charBounce() {
setTimeout(function() {
animationBounce++;
}, 100);
setTimeout(function() {
animationBounce++;
}, 200);
setTimeout(function() {
animationBounce++;
}, 300);
setTimeout(function() {
animationBounce--;
}, 400);
setTimeout(function() {
animationBounce--;
}, 500);
setTimeout(function() {
animationBounce--;
}, 600);
}
// Makes the character jump
function charJump() {
if (charY == 220) {
jump = 4;
setTimeout(function() {
charY -= jump;
}, 20);
jump = 8;
setTimeout(function() {
charY -= jump;
}, 40);
jump = 12;
setTimeout(function() {
charY -= jump;
}, 60);
jump = 16;
setTimeout(function() {
charY -= jump;
}, 80);
setTimeout(function() {
charY -= jump;
}, 100);
setTimeout(function() {
charY -= jump;
}, 120);
}
}
// Detects when the character has a hit a square
function hitDetect() {
for (var iB = 0; iB != clonePos.length; iB++) {
if (clonePos[iB] > -320 && clonePos[iB] < -280 && charY > 200) {
charDied();
}
}
}
// Runs when character dies
function charDied() {
disDeath = disObst;
charDead = 1;
charRevive();
testBetterAI();
decideAdjustments();
}
// Adds score very interval
function addingScore() {
if (charDead == 0) {
score += 100;
}
}
// Adds to an array that I will use later
function addData() {
dataCharY.push(charY);
dataDisObst.push(disObst);
}
// Test to see if one of my AI's (which hasn't been made yet) scores is better than the previous best
function testBetterAI() {
// Commented because does not work in Sandbox
// if (score > localStorage.getItem("bestScore")) {
// }
}
// Calculates the distance to the nearest square / obstacle
function getDisObst() {
lowestLoopDis = 1000;
for (var iiA = 0; iiA != clonePos.length; iiA++) {
if (clonePos[iiA] > -320) {
if (clonePos[iiA] > 0) {
if (Math.abs(clonePos[iiA]) < lowestLoopDis) {
lowestLoopDis = Math.abs(clonePos[iiA]);
}
} else {
if (Math.abs(clonePos[iiA]) < lowestLoopDis) {
lowestLoopDis = Math.abs(clonePos[iiA]);
}
}
}
}
if (lowestLoopDis < disObst) {
disObst = lowestLoopDis;
}
}
// Increments the speed of the obstacles / squares and the character
function addSpeed() {
if (speed < 25) {
speed++;
}
}
// Restarts the game
function charRevive() {
clonePos = [600];
charDead = 0;
score = 0;
time = 0;
speed = 5;
AIgames++;
}
// I accidently did this twice, whoops
function testBetterAI() {
if (score > bestScoreAI) {
bestScoreAI = score;
}
}
// Makes the unfinished AI jump when it wants to
function jumpAI() {
if (disObst <= disDeath + jumpFactor) {
charJump();
}
}
// What changes need to be made in order to improve the AI
function decideAdjustments() {
jumpFactor += Math.floor(Math.random() * 10) - 5;
if (jumpFactor < 0) {
jumpFactor = 0;
}
}
// Removing blocks that are off the screen
function removeUnusedObst() {
if (clonePos[0] < -650) {
clonePos.shift();
}
}
// Intervals here
setInterval(function() {
time++;
}, 1000);
setInterval(function() {
runAll();
}, 10);
setInterval(function() {
moveObst();
}, 50);
setInterval(function() {
charGravity();
}, 25);
setInterval(function() {
createObst();
}, 3000);
setInterval(function() {
charBounce();
}, 650);
setInterval(function() {
addingScore();
}, 3500);
setInterval(function() {
addSpeed();
}, 25000);
#GameScreen {
background-color: CornflowerBlue;
}
#scoreText {
text-align: center;
font-size: 35px;
}
<div id="scoreText"></div>
<canvas id="GameScreen" width="1270px" height="550px"></canvas>
最佳答案
会发生什么
在您的hitDetect
函数中:
function hitDetect() {
for (var iB = 0; iB != clonePos.length; iB++) {
if (clonePos[iB] > -320 && clonePos[iB] < -280 && charY > 200) {
charDied();
}
}
}
您遍历 clonePos
数组,直到 iB
等于该数组的长度。如果满足条件(碰撞),则执行 charDied
,而后者又执行 charRevive
:
function charRevive() {
clonePos = [600];
// ...
}
与此同时,hitDetect
循环继续。并且在某一时刻(似乎是在你开始提高速度的时候),碰巧 iB
现在高于 1
,这是新的长度clonePos
。现在,会发生什么?好吧,你陷入了无限循环:
要吸取的教训
如果您正在循环一个可以在循环期间发生变异(并改变其长度)的数组,永远不要使用这种类型的条件:
i != myArr.length
如果您希望循环在某个时刻结束,请始终选择更严格的条件:
i < myArr.length
而且,更好的是,如果在满足条件后循环没有意义,则通过返回来结束此循环。例如:
function hitDetect() {
for (var iB = 0; iB < clonePos.length; iB++) {
if (clonePos[iB] > -320 && clonePos[iB] < -280 && charY > 200) {
return charDied();
// Alternatively, if there is other stuff to do after the loop, you can use:
// break;
}
}
}
固定代码
// Commented because does not work in Sandbox
// window.localStorage; //Ignore this line
// Where all my variables have been assigned
var c = document.getElementById("GameScreen");
var ctx = c.getContext("2d");
var charY = 220;
const gravity = 10;
var score = 0;
var time = 0;
var speed = 5;
var cloneID = 0;
var clonePos = [600];
var clonePoints = [0];
var animationBounce = 0;
var jump = 10;
var charDead = 0;
var dataCharY = [];
var dataDisObst = [];
var disObst = 1000;
var lowestLoopDis;
var jumpFactor = 0;
var disDeath;
var AIgames = 1;
var bestScoreAI = 0;
ctx.translate(c.width / 2, c.height / 2);
// Was going to use this for background trees but haven't done it yet
new obj(50, 50, 30, 30);
// Runs most functions
function runAll() {
if (charDead == 0) {
clearAll(); //This function runs most of the code
updateChar();
createGround();
updateObj();
groundDetect();
updateScore();
hitDetect();
addData();
testBetterAI();
getDisObst();
jumpAI();
removeUnusedObst();
}
}
// Was going to use this for trees but haven't yet
function obj(x, y, width, height) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx.beginPath();
ctx = c.getContext("2d");
ctx.fillStyle = "brown";
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.fillStyle = "green";
ctx.arc(-293, 150, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
this.cloneID = cloneID;
}
new obj(-293, 212, 0, 2 * Math.PI);
// Creates the floor (IKR)
function createGround() {
ctx.fillStyle = "green";
ctx.fillRect(-635, 250, c.width, 50);
}
// Creates the character every milisecond (or 10, I can't remember)
function updateChar() {
ctx.fillStyle = "blue";
ctx.fillRect(-300, charY - animationBounce, 15, 30);
ctx.fillStyle = "pink";
ctx.beginPath();
ctx.arc(-293, charY - animationBounce - 15, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
}
// Removes everything in order to be redrawn in new position
function clearAll() {
ctx.clearRect(-700, -700, 2000, 2000);
}
// Redraws every square / object
function updateObj() {
for (var i = 0; i < clonePos.length; i++) {
ctx.fillStyle = "green";
ctx.fillRect(clonePos[i], 220, 30, 30);
}
}
// Creates new square (I also decided to rename them half way through with obstacle instead of object)
function createObst() {
clonePos.push(600);
cloneID++;
}
// Changes the squares / obstacles position relative to the movement
function moveObst() {
for (var ii = 0; ii < clonePos.length; ii++) {
clonePos[ii] -= speed;
}
}
// Tests to see if the character is on the ground
function groundDetect() {
if (charY > 220) {
charY = 220;
}
}
// Makes gravity actually work
function charGravity() {
if (charY < 220) {
charY += gravity;
}
}
// Updates the score counter text
function updateScore() {
document.getElementById("scoreText").innerHTML = score;
}
// Gives the character a little bounce when moving
function charBounce() {
setTimeout(function() {
animationBounce++;
}, 100);
setTimeout(function() {
animationBounce++;
}, 200);
setTimeout(function() {
animationBounce++;
}, 300);
setTimeout(function() {
animationBounce--;
}, 400);
setTimeout(function() {
animationBounce--;
}, 500);
setTimeout(function() {
animationBounce--;
}, 600);
}
// Makes the character jump
function charJump() {
if (charY == 220) {
jump = 4;
setTimeout(function() {
charY -= jump;
}, 20);
jump = 8;
setTimeout(function() {
charY -= jump;
}, 40);
jump = 12;
setTimeout(function() {
charY -= jump;
}, 60);
jump = 16;
setTimeout(function() {
charY -= jump;
}, 80);
setTimeout(function() {
charY -= jump;
}, 100);
setTimeout(function() {
charY -= jump;
}, 120);
}
}
// Detects when the character has a hit a square
function hitDetect() {
for (var iB = 0; iB < clonePos.length; iB++) {
if (clonePos[iB] > -320 && clonePos[iB] < -280 && charY > 200) {
return charDied();
}
}
}
// Runs when character dies
function charDied() {
disDeath = disObst;
charDead = 1;
charRevive();
testBetterAI();
decideAdjustments();
}
// Adds score very interval
function addingScore() {
if (charDead == 0) {
score += 100;
}
}
// Adds to an array that I will use later
function addData() {
dataCharY.push(charY);
dataDisObst.push(disObst);
}
// Test to see if one of my AI's (which hasn't been made yet) scores is better than the previous best
function testBetterAI() {
// Commented because does not work in Sandbox
// if (score > localStorage.getItem("bestScore")) {
// }
}
// Calculates the distance to the nearest square / obstacle
function getDisObst() {
lowestLoopDis = 1000;
for (var iiA = 0; iiA < clonePos.length; iiA++) {
if (clonePos[iiA] > -320) {
if (clonePos[iiA] > 0) {
if (Math.abs(clonePos[iiA]) < lowestLoopDis) {
lowestLoopDis = Math.abs(clonePos[iiA]);
}
} else {
if (Math.abs(clonePos[iiA]) < lowestLoopDis) {
lowestLoopDis = Math.abs(clonePos[iiA]);
}
}
}
}
if (lowestLoopDis < disObst) {
disObst = lowestLoopDis;
}
}
// Increments the speed of the obstacles / squares and the character
function addSpeed() {
if (speed < 25) {
speed++;
}
}
// Restarts the game
function charRevive() {
clonePos = [600];
charDead = 0;
score = 0;
time = 0;
speed = 5;
AIgames++;
}
// I accidently did this twice, whoops
function testBetterAI() {
if (score > bestScoreAI) {
bestScoreAI = score;
}
}
// Makes the unfinished AI jump when it wants to
function jumpAI() {
if (disObst <= disDeath + jumpFactor) {
charJump();
}
}
// What changes need to be made in order to improve the AI
function decideAdjustments() {
jumpFactor += Math.floor(Math.random() * 10) - 5;
if (jumpFactor < 0) {
jumpFactor = 0;
}
}
// Removing blocks that are off the screen
function removeUnusedObst() {
if (clonePos[0] < -650) {
clonePos.shift();
}
}
// Intervals here
setInterval(function() {
time++;
}, 1000);
setInterval(function() {
runAll();
}, 10);
setInterval(function() {
moveObst();
}, 50);
setInterval(function() {
charGravity();
}, 25);
setInterval(function() {
createObst();
}, 3000);
setInterval(function() {
charBounce();
}, 650);
setInterval(function() {
addingScore();
}, 3500);
setInterval(function() {
addSpeed();
}, 25000);
body { text-align: center; }
#GameScreen {
background-color: CornflowerBlue;
width: 350px; height: 150px;
}
<div id="scoreText"></div>
<canvas id="GameScreen" width="1270px" height="550px"></canvas>
关于javascript - 为什么我未完成的 javascript 游戏在第三次死亡后崩溃?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60308666/
我正在关注 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
我正在研究我的游戏技能(主要是阵列)来生成敌人,现在子弹来击倒他们。我能够在测试时设置项目符号,但只有当我按下一个键(比方说空格键)并且中间没有间隔时才可见,所以浏览器无法一次接受那么多。 有没有什么
我是一名优秀的程序员,十分优秀!