gpt4 book ai didi

javascript - Canvas 小行星游戏

转载 作者:行者123 更新时间:2023-11-29 18:08:08 26 4
gpt4 key购买 nike

我正在使用 Canvas 在 html5 中制作小行星游戏。我制作了可移动的船,它可以左右旋转,也可以向前移动。当没有按下按键时,我增加了摩擦力来减慢它的速度。接下来要做的是发射子弹/激光。我只有一枪,子弹向前移动,但它也跟随船的运动:/我不知道如何将它从船上拆下来以及如何制造更多子弹。

代码如下:

window.addEventListener('keydown',doKeyDown,true);
window.addEventListener('keyup',doKeyUp,true);
var canvas = document.getElementById('pageCanvas');
var context = canvas.getContext('2d');
var angle = 0;
var H = window.innerHeight; //*0.75,
var W = window.innerWidth; //*0.75;
canvas.width = W;
canvas.height = H;
var xc = W/2; //zeby bylo w centrum :v
var yc = H/2; //jw.
var x = xc;
var y = yc;
var dv = 0.2;
var dt = 1;
var vx = 0;
var vy = 0;
var fps = 30;
var maxVel = 10;
var frict = 0.99;
var brakes = 0.90;
var keys = new Array();
var fire = false;
var laser = false;
///////////////////lasery xD
var lx = 25,
ly = 9,
lw = 4,
lh = 4;

function doKeyUp(evt){
keys[evt.keyCode] = false;
fire = false;
}

function doKeyDown(evt){
keys[evt.keyCode] = true;
}

//OOOOOOOOOOOOOOOOOOLASEROOOOOOOOOOOOOOOOOOOOOOOOOOO
function drawLaser() {
context.fillStyle = "red";
context.fillRect(lx,ly,lw,lh);

}

function moveLaser() {
lx += 2;


}


//OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
function ogienZdupy(){
context.fillStyle = "red";
context.beginPath();
context.moveTo(-2,2);
context.lineTo(2,10);
context.lineTo(-2,18);
context.lineTo(-25,10);
context.lineTo(-2,2);
context.strokeStyle = "red";
context.stroke();
}

function convertToRadians(degree) {
return degree*(Math.PI/180);
}

function incrementAngle() {
angle += 5;
if(angle > 360){
angle = 0;
}
}

function decrementAngle(){
angle -= 5;
if(angle > 360){
angle = 0;
}
}
function xyVelocity(){
vx += dv * Math.cos(convertToRadians(angle)); //* friction;
vy += dv * Math.sin(convertToRadians(angle)); //* friction;
if(vx > maxVel){
vx = maxVel;
}
if(vy > maxVel){
vy = maxVel;
}
}

function shipMovement(){
if(38 in keys && keys[38]){
xyVelocity();
fire = true;
}
if(40 in keys && keys[40]){
vx = 0;
vy = 0;
}

if(37 in keys && keys[37]){
decrementAngle();
};
if (39 in keys && keys[39]){
incrementAngle();
};
if (32 in keys && keys[32]){
laser = true;
};
}

function xyAndFriction(){

x += vx * dt;
y += vy * dt;

vx *= frict;
vy *= frict;

}

function outOfBorders(){

if(x > W){
x = x - W;
}
if(x< 0){
x = W;
}

if(y > H){
y = y - H;
}

if(y < 0){
y = H;
}
}

function blazeatron420(){
context.beginPath();
context.moveTo(0,0);
context.lineTo(20,10);
context.lineTo(0,20);
context.lineTo(7,10);
context.lineTo(0,0);
context.strokeStyle = "green";
context.stroke();
}

function space(){
context.fillStyle = "black";
context.fillRect(0,0,W,H);
}

function drawEverything() {

shipMovement();
xyAndFriction();
outOfBorders();

//context.save();
space();
context.save();
context.translate(x,y);
//context.translate(25,25);
context.rotate(convertToRadians(angle));
context.translate(-7,-10);
if(fire){
ogienZdupy();
}
if(laser){
drawLaser();
moveLaser();
}
context.fillStyle = "green";
//context.fillText(vx + " km/h",50,50);
/*context.fillText("dupa",-30,0);
context.beginPath();
context.moveTo(-20,5);
context.lineTo(-5,10);
context.strokeStyle = "green"; //KOLOR LINII ;_;
context.stroke();*/
blazeatron420();
context.restore();
}

setInterval(drawEverything, 20);

还有 fiddle http://jsfiddle.net/tomasthall/q40zvd6v/1/

最佳答案

我将您的激光绘图移出了旋转的上下文。在开火的瞬间启动 lx 和 ly 到 xy。

laser = true;
lx = x;
ly = y;

http://jsfiddle.net/q40zvd6v/2/

现在你只需要给激光一个合适的向量。这可以通过你的船的 Angular 和一些三 Angular 学来计算。

        if (32 in keys && keys[32]){
laser = true;
lx = x;
ly = y;
var angle_in_radians = convertToRadians(angle);
lvx = Math.cos(angle_in_radians);
lvy = Math.sin(angle_in_radians);
};

现在拍摄效果很好: http://jsfiddle.net/q40zvd6v/4/

不过,如果将飞船矢量添加到射弹矢量,看起来会好得多。

        if (32 in keys && keys[32]){
laser = true;
lx = x;
ly = y;
var angle_in_radians = convertToRadians(angle);
lvx = Math.cos(angle_in_radians);
lvy = Math.sin(angle_in_radians);
lvx += vx;
lvy += vy;
};

http://jsfiddle.net/q40zvd6v/5/

祝你游戏顺利:>

关于javascript - Canvas 小行星游戏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29823285/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com