Question

我正在尝试使球成为JS中的另一个元素，如果您查看下面的内容，我希望我希望一旦这些点达到一定水平，它就会变成红色和黄色的彗星，然后变成蓝色的青绿色，然后是红色的匕首，然后是灰色的球，然后是灰色的彗星，然后是灰色的匕首，然后是黑色的球。

var canvas, ctx, container;
canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 800;
ctx = canvas.getContext("2d");
var ball = {
y: 480
};
var score = 0;
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
var gameRunning = 0;
var i = Math.floor(Math.random()*10);
var timer;
color = ["red", "blue","green","yellow","purple","pink","silver","teal","turquoise","magenta","cyan"];


function ballMovement() {
vy += gravity;
ball.y += vy;

if (ball.y + ball.radius > canvas.height) {
ball.y = canvas.height - ball.radius;
vy = 0;

var img = document.getElementById('gameOver');
ctx.drawImage(gameOver, canvas.width/2-450, 100)
ball.radius = 0;
clearInterval(timer);
gameRunning = 0;
score=0;
//alert("Your score is: "+score);

  }
}

function init() {  
if(!document.querySelector('.container')){
setupCanvas()   
var img = document.getElementById('gameOver');
image.style.visibility = 'hidden';
}

vy = -19;
var y1 = 450

/*dagger = {

您可以说，我希望在这里制作匕首。

rec1x:0,
rec1y:0,
color1:blue,
rec2x:0,
rec2y:0,
color2:turquoise,
tri1x:0,
tri1y:ball.y,
tri2x:0,
tri2y:ball.y,
tri3x:0,
tri3y:ball.y,
tricol:red,
}

还有这颗彗星，如果我想改变颜色，我可以做comet.tricol = gray，那就没事了。

comet ={
tri1x:0,
tri1y:ball.y,
tri2x:0,
tri2y:ball.y,
tri3x:0,
tri3y:ball.y,
tricol:yellow, 
x: canvas.width/2,
y: ball.y,
radius: 20,
status: 0,
color:red,  
}*/
ball = {
x: canvas.width/2,
y: ball.y,
radius: 20,
status: 0,
color: color[i],
};

clearInterval(timer);
timer = setInterval(draw, 1000 / 35);
gameRunning = 1;
}

我的问题是，当我画画时，总会有一个错误阻止球改变，实际上，这会阻止整个比赛。有人可以通过在转换时隐藏其他两个元素，同时保持对象与ball.y一样高的方式来使“ ball”转换吗？例如，隐藏匕首和球，并显示彗星在单击时跳跃。

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
//ball
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath()
ballMovement();
}

function setupCanvas() {
container = document.createElement('div');
container.className = "container";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(container);
container.appendChild(canvas);
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 2;
}

window.onclick = function(){
vy += (ball.y-(canvas.height-canvas.height))
pull += 0.01;
touchGround = false; 
score+=1;
if(!gameRunning){
init(); 
}
else{
vy = -19;
}

vy+((canvas.height-canvas.height)-ball.y);
}
if (score<50){
}

if(score>=50){
pull += 50;
//make ball look like comet
}
if(score>=75){
pull += 70;
//make ball loook like dagger
}
if(score>=100){
pull += 50;

//make ball look like comet
comet.color=gray;
comet.tricol=gray; 
}
if(score>=125){
pull += 70;
// make ball look like gray dagger
}
if(score>=150){
pull += 20;
ball.color = black;
}
if(score>=200){
z=prompt("Congratulation,You Win, Can't Go Any Farther! Try again")
}
if (z == "yes" || z == "YES" || z == "Yes"){
if(score>=350){
var ball = {
y: 480
};
var score = 0;
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
var gameRunning = 0;
var i = Math.floor(Math.random()*10);
var timer;
color = ["red", "blue","green","yellow","purple","pink","silver","teal","turquoise","magenta","cyan"]; 
 }
}
//Goal  
//Timer
//Don't Jump Out of Canvas

如何使一个元素成为另一个元素？

0 个答案: