在我们的javascript游戏中触发下一个级别？
我们正在为我们的学校制作一个游戏，它相当简单，但是，我们不知道如何让它触发下一个级别。目前，我们设置了一个按钮，当他们完成该级别时加载一个新页面，但显然，使用这种方法很容易作弊。我们想知道，当红点（字符）到达顶部框时，下一级将加载。我将发布级别一以供参考在我们的javascript游戏中触发下一个级别？,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,我们正在为我们的学校制作一个游戏，它相当简单，但是，我们不知道如何让它触发下一个级别。目前，我们设置了一个按钮，当他们完成该级别时加载一个新页面，但显然，使用这种方法很容易作弊。我们想知道，当红点（字符）到达顶部框时，下一级将加载。我将发布级别一以供参考 <html> <head> <style> canvas, img { display:block; margin:1em auto; border:1p
<html>
<head>
<style>
canvas, img {
display:block; margin:1em auto; border:1px solid black;
}
canvas {
background:url(Clouds.png);
}
</style>
</head>
<body>
<canvas id="canvas" style="border:1px solid #000"></canvas>
<script>
(function () {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
width = 500,
height = 200,
player = {
x: width / 2,
y: height - 15,
width: 5,
height: 5,
speed: 3,
velX: 0,
velY: 0,
jumping: false,
grounded: false
},
keys = [],
friction = 0.8,
gravity = 0.3;
var boxes = [];
// dimensions
boxes.push({
x: 0,
y: 0,
width: 10,
height: height
});
boxes.push({
x: 0,
y: height - 2,
width: width,
height: 50
});
boxes.push({
x: width - 10,
y: 0,
width: 50,
height: height
});
boxes.push({
x: 120,
y: 10,
width: 80,
height: 80
});
boxes.push({
x: 170,
y: 50,
width: 80,
height: 80
});
boxes.push({
x: 220,
y: 100,
width: 80,
height: 80
});
boxes.push({
x: 270,
y: 150,
width: 40,
height: 40
});
canvas.width = width;
canvas.height = height;
function update() {
// check keys
if (keys[38] || keys[32] || keys[87]) {
// up arrow or space
if (!player.jumping && player.grounded) {
player.jumping = true;
player.grounded = false;
player.velY = -player.speed * 2;
}
}
if (keys[39] || keys[68]) {
// right arrow
if (player.velX < player.speed) {
player.velX++;
}
}
if (keys[37] || keys[65]) {
// left arrow
if (player.velX > -player.speed) {
player.velX--;
}
}
player.velX *= friction;
player.velY += gravity;
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "black";
ctx.beginPath();
player.grounded = false;
for (var i = 0; i < boxes.length; i++) {
ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
var dir = colCheck(player, boxes[i]);
if (dir === "l" || dir === "r") {
player.velX = 0;
player.jumping = false;
} else if (dir === "b") {
player.grounded = true;
player.jumping = false;
} else if (dir === "t") {
player.velY *= -1;
}
}
if(player.grounded){
player.velY = 0;
}
player.x += player.velX;
player.y += player.velY;
ctx.fill();
ctx.fillStyle = "red";
ctx.fillRect(player.x, player.y, player.width, player.height);
requestAnimationFrame(update);
}
function colCheck(shapeA, shapeB) {
// get the vectors to check against
var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)),
vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)),
// add the half widths and half heights of the objects
hWidths = (shapeA.width / 2) + (shapeB.width / 2),
hHeights = (shapeA.height / 2) + (shapeB.height / 2),
colDir = null;
// if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision
if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {
// figures out on which side we are colliding (top, bottom, left, or right)
var oX = hWidths - Math.abs(vX),
oY = hHeights - Math.abs(vY);
if (oX >= oY) {
if (vY > 0) {
colDir = "t";
shapeA.y += oY;
} else {
colDir = "b";
shapeA.y -= oY;
}
} else {
if (vX > 0) {
colDir = "l";
shapeA.x += oX;
} else {
colDir = "r";
shapeA.x -= oX;
}
}
}
return colDir;
}
document.body.addEventListener("keydown", function (e) {
keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
keys[e.keyCode] = false;
});
window.addEventListener("load", function () {
update();
});
</script>
<br>
<center>
<input type="button" name="next" value="Click me when finished! No cheating! ;)" onclick="location.href='level2.html';">
</center>
<center>
<input type="button" name="restart" value="Restart" onclick="location.href='javagame.html';">
</center>
</body>
</html>
帆布{
显示：块；边距：1em自动；边框：1px纯黑；
}
画布{
背景：url（Clouds.png）；
}
（功能（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
})();
var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
宽度=500，
高度=200，
玩家={
x：宽度/2，
y:身高-15，
宽度：5，
身高:5,，
速度:3,，
velX:0，
结果:0,，
跳跃：错，
接地：错误
},
键=[]，
摩擦力=0.8，
重力=0.3；
变量框=[]；
//尺寸
推({
x:0,，
y:0，
宽度：10，
高度：高度
});
推({
x:0,，
y：高度-2，
宽度：宽度，
身高：50
});
推({
x：宽度-10，
y:0，
宽度：50，
高度：高度
});
推({
x:120，
y:10，
宽度：80，
身高：80
});
推({
x:170，
y:50，
宽度：80，
身高：80
});
推({
x:220，
y:100，
宽度：80，
身高：80
});
推({
x:270，
y:150，
宽度：40，
身高：40
});
画布宽度=宽度；
canvas.height=高度；
函数更新（）{
//检查钥匙
如果（键[38]| |键[32]| |键[87]）{
//向上箭头或空格
如果（！player.jumping&&player.grounded）{
player.jumping=true；
player.grounded=false；
player.velY=-player.speed*2；
}
}
如果（键[39]| |键[68]）{
//右箭头
如果（player.velX-player.speed）{
player.velX--；
}
}
player.velX*=摩擦力；
player.velY+=重力；
ctx.clearRect（0，0，宽度，高度）；
ctx.fillStyle=“黑色”；
ctx.beginPath（）；
player.grounded=false；
对于（变量i=0；i=oY）{
如果（vY>0）{
colDir=“t”；
形状a.y+=oY；
}否则{
colDir=“b”；
shapeA.y-=oY；
}
}否则{
如果（vX>0）{
colDir=“l”；
shapeA.x+=oX；
}否则{
colDir=“r”；
shapeA.x-=oX；
}
}
}
返回colDir；
}
document.body.addEventListener（“向下键控”，函数（e）{
键[e.keyCode]=真；
});
文件.正文.附录列表（“键控”，功能（e）{
密钥[e.keyCode]=假；
});
addEventListener（“加载”，函数（）{
更新（）；
});
if(playerReachedFinish()) {
location.href = 'level2.html';
}
当然，一旦用户看到下一个级别被称为
level2.htmllevel3.htmllevel4.html