Как я могу сделать Элемент другим Элементом? - PullRequest
0 голосов
/ 02 мая 2019

Я пытаюсь сделать шар другим элементом в 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 = grey, тогда все будет хорошо.

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?Например, спрячьте кинжал и мяч и покажите комету, прыгающую по щелчку.

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
...