随机javascript对象生成

时间:2016-05-14 14:33:36

标签: javascript object canvas

我想知道是否有人可以帮助我完成我的项目。我正在构建一个简单的Javascript游戏,因为我是一个真正的Javascript初学者。我创造了一个障碍物,通过改变x位置向左滑动。我的问题是如何随机多次生成这个对象,并保持游戏的可实现性。

var PlayerX;
var Blocka;
var Ground

var canvas = document.getElementById("gamefield");
ctx = canvas.getContext("2d");



var Gamespeed=6.5;
var Gravity = 0.9;
var Score = 0;
var velocity = 0.01;
var score = 0;
var optellenscore;
var jumping;


PlayerX = new Player();
Blocka = new Block(1);
Ground = new Gameground();

setInterval(Update,20);


function startGame()
{
    var background = new Image();
    background.src = "images/gamingbackground2.png";
    background.onload = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(background,0,0);   
    }
}

function punten()
{
    optellenscore = setInterval(optellen, 50);
    function optellen()
    {
        score ++;
    }

}
punten();

function Player()
{
    // this staat voor verwijzing naar zichzelf
    this.width = 30;
    this.height = 50;
    this.x = canvas.width/4;
    this.y = canvas.height/3*2;
    this.draw = function(){
        ctx.fillStyle="#00BFFF";
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    // JUMP function 

}


function Block(kolb)
{
    this.width = 20;
    this.height = 40;
    this.show = true;
    //this.x = canvas.width/2;
    this.x = canvas.width + 20;
    this.y = (canvas.height/3*2)+10;
    this.draw = function(){
        this.move();
        if(this.show){
            if(kolb==1){
                ctx.fillStyle="#000000";
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }   
    }
    this.move = function() {
        this.x -= Gamespeed;
        this.death();
    }
    this.death = function(){
        if(this.x<=20){
            this.show = false;
        }
    }
}

function Gameground()
{
    // this staat voor verwijzing naar zichzelf
    this.width = 800;
    this.height = 149;
    this.x = 0;
    this.y = 451;
    this.draw = function(){
        ctx.fillStyle = "#00FFBF"
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }


}


function Update () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    Blocka.draw();
    PlayerX.draw();



    ctx.fillStyle = "#585858";
    ctx.font = "bold 25px sans-serif";
    ctx.fillText("Score: " + score, 625, 50);



    if (PlayerX.x < Blocka.x + Blocka.width &&
    PlayerX.x + PlayerX.width > Blocka.x &&
    PlayerX.y < Blocka.y + Blocka.height &&
    PlayerX.height + PlayerX.y > Blocka.y) {
    // collision detected!
    Blocka.x += 580;
    }

    Ground.draw();

    if (score > 100 && score < 115)
    {
        ctx.fillStyle = "#FE2E64";
        ctx.font = "bold 25px sans-serif";
        ctx.fillText("level 2!", 350, 200);
    }


    if (score > 200 && score < 215)
    {
        ctx.fillStyle = "#FE2E64";
        ctx.font = "bold 25px sans-serif";
        ctx.fillText("level 3!", 350, 200);
    }


}




    function checkKeyPressed(e) {
             if (e.keyCode == "32") { //kijkt of de spatiebalk is ingedrukt

                var interval1, interval2, velo, tijd;

            velo=0.00001;

            tijd= 30;


            interval1 = setInterval(plus, tijd);



            function plus()
            {

            if(velo<20)
            {
            velo += 5;
            }
            else
            {
            velo -= 0.15;
            }

            if(PlayerX.y <= 320)
            {

            clearInterval(interval1);
            interval2 = setInterval(min, tijd);

            }

            PlayerX.y -= velo;
            console.log(PlayerX.y);

            }



            function min()
            {

            if(velo<20)
            {
            velo += 0.15;
            }
            else
            {
            velo -= 0.15;
            }

            if (PlayerX.y >= 375) {
            // collision detected!
            clearInterval(interval2);
            }

            PlayerX.y += velo;
            console.log(PlayerX.y);

            }



}
}

这是我的JSFIDDLE:

JSFIDDLE

谢谢:)

0 个答案:

没有答案