Canvas 偷天换日小游戏

跑跳冒险类的小游戏使用方向键来控制黄色方块的运动。

canvas，game，jump

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3449
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function loadImage(url) {
    var img = document.createElement("img");
    img.src = url;
    return img;
}

document.body.addEventListener("keydown", function(e) {
    keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
});
keys = [];

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");

width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
gravity = 0.3;
solides = [];

function boite(x, y, w, h, type, color) {
    this.color = color;

this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.speed = 4;
    this.angle = 50;
    this.vx = 0;
    this.vy = -5;
    this.type = type;

if (this.type === "joueur") {
        this.jumping = false;
    }

}

boite.prototype.draw = function() {
    context.beginPath();
    context.rect(this.x, this.y, this.w, this.h);
    if (!this.color) {

context.stroke();

} else {
        context.fillStyle = this.color;

context.fill();

}

boite.prototype.applyForce = function() {

if (this.type === "joueur") {

if (keys[38] || keys[32]) {

if (!this.jumping) {
                this.jumping = true;
                this.vy = -this.speed * 2;
            }
        }
        if (keys[38]) {
            // up arrow
        }
        if (keys[39]) {
            // right arrow
            if (this.vx < this.speed) {
                this.vx++;
            }
        }
        if (keys[37]) {
            // left arrow                  
            if (this.vx > -this.speed) {
                this.vx--;
            }
        }

}

this.x += this.vx;
    this.y += this.vy;

this.vy += gravity;
    this.vx *= 0.92;
    this.vy *= 0.99;
    /*
    if(this.y > height){
        this.y = -this.h;
    }
	
	if(this.x > width){
        this.x =-this.w;
    }
	if(this.x +this.w < 0){
        this.x =width;
    }
	*/

}

solides.push(new boite(100, 400, 1000, 20, "solide", "#363f42"));
solides.push(new boite(120, 170, 80, 20, "solide", "#aeaeae"));
solides.push(new boite(100, 0, 20, 400, "solide", "#363f42"));
solides.push(new boite(200, 180, 400, 20, "solide", "#363f42"));
solides.push(new boite(580, 200, 20, 200, "solide", "#363f42"));
solides.push(new boite(100, 0, 1000, 20, "solide", "#363f42"));

solides.push(new boite(1080, 0, 20, 400, "solide", "#363f42"));

solides.push(new boite(600, 250, 50, 20, "solide", "#363f42"));
solides.push(new boite(600, 300, 100, 20, "solide", "#363f42"));
solides.push(new boite(600, 350, 200, 20, "solide", "#363f42"));

solides.push(new boite(730, 180, 360, 20, "solide", "#363f42"));

var joueur = new boite(300, 300, 40, 60, "joueur", "#f2c641");
var pnj1 = new boite(500, 300, 40, 60, "actor", "#fff");
selfcam = false;

function scam() {
    if (selfcam == true) {
        selfcam = false;
    } else {
        selfcam = true;
    }
}

var tableau = loadImage("/uploads/160401/mona_lisa.jpg");

function update() {
    context.clearRect(0, 0, width, height);

context.save();

cameraX = canvas.width / 2 - joueur.x;
    cameraY = canvas.height / 2 - joueur.y;

if (selfcam !== true) {

if (joueur.x > width / 2) {
            context.translate(cameraX, 0);
        }

if (joueur.y > height / 2) {
            context.translate(0, cameraY);
        }
    } else {

context.translate(cameraX, cameraY);

}

solides[1].y = 290 + Math.sin(solides[1].angle) * 110;
    //solides[1].x = 170 + Math.sin(solides[1].angle) * 20;
    solides[1].angle += 0.03;

for (var i = 0; i < solides.length; i++) {
        // collision Time ? :)

colCheck(joueur, solides[i])
        colCheck(pnj1, solides[i])

//tout ce qui bouge :D

solides[i].draw();

}

context.textAlign = 'center';

context.font = "14pt arial";
    context.fillStyle = "white";
    context.fillText("There is no goal in this game ,it's not even a game !", 350, 250);
    context.fillText("just move the box with your arrow key", 350, 270);

context.fillText(" < left ^ Jump > Right", 350, 300);
    context.drawImage(tableau, 300, 50, 65, 100);

joueur.draw();
    pnj1.draw();
    joueur.applyForce();
    pnj1.applyForce();
    context.restore();

//info box      
    context.textAlign = 'left';
    context.font = "10pt arial";
    context.fillStyle = "white";
    context.fillText("Position : " + "x " + Math.round(joueur.x) + " y " + Math.round(joueur.y), 10, 100);
    context.fillText("Velocity : " + "vx " + Math.round(joueur.vx) + " vy " + Math.round(joueur.vy), 10, 120);
    context.fillText("Speed : " + Math.round(joueur.speed), 10, 140);
    context.fillText("numb of Solid : " + solides.length, 10, 160);
    context.fillText("jumping : " + passtrue(joueur.jumping), 10, 180);

function passtrue(jumping) {

if (jumping === true) {
            return "Can't jump"
        } else {
            return "Can Jump"
        }

}

requestAnimationFrame(update);

}

update();

function colCheck(shapeA, shapeB) {
    // get the vectors to check against
    var vX = (shapeA.x + (shapeA.w / 2)) - (shapeB.x + (shapeB.w / 2)),
        vY = (shapeA.y + (shapeA.h / 2)) - (shapeB.y + (shapeB.h / 2)),
        // add the half widths and half heights of the objects
        hWidths = (shapeA.w / 2) + (shapeB.w / 2),
        hHeights = (shapeA.h / 2) + (shapeB.h / 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;
                shapeA.vy *= -1;

} else {
                shapeA.jumping = false;
                colDir = "b";
                shapeA.y -= oY;
                shapeA.vy *= -0.2;

}
        } else {
            if (vX > 0) {
                colDir = "l";
                shapeA.x += oX;
                shapeA.vx *= -.5;
            } else {
                colDir = "r";
                shapeA.x -= oX;
                shapeA.vx *= -.5;

}
        }
    }
    return colDir;
}

编译

CSS

HTML

跑跳冒险类的小游戏使用方向键来控制黄色方块的运动。

canvas，game，jump

编辑器支持Emmet

快捷键

跑跳冒险类的小游戏 使用方向键来控制黄色方块的运动。

canvas，game，jump

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

跑跳冒险类的小游戏使用方向键来控制黄色方块的运动。