Форум

Rise · #11 (**permalink**) 22.04.2019, 21:45

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Space game | Canvas camera (scrolling) effect</title>
</head>
<body>
<canvas width="600" height="400" style="border: 1px solid #000; background: #000;"></canvas>
<br>Arrow keys: Up / Down - acceleration / deceleration, Left / Right - rotation.
<button onclick="swapShips()">Swap ships</button>
<script>
// Fun
function swapShips() {
    if (shipA.input == humanInput) {
        camera.target = shipB; shipB.input = humanInput; shipA.input = robotInput;
    } else if (shipB.input == humanInput) {
        camera.target = shipA; shipA.input = humanInput; shipB.input = robotInput;
    }
}
// Canvas
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d'); context.font = '12px monospace';
const DEGREE = Math.PI / 180;
const sprites = new Set;
// Images
const starsImage = new Image(); starsImage.src = 'https://i.imgur.com/a4BvjCM.png';
const shipsImage = new Image(); shipsImage.src = 'https://i.imgur.com/z2bkMae.png';
const imageMap = {
    stars: { source: starsImage, x: 0, y: 0, width: 1920, height: 1080, rotation: 0 },
    shipA: { source: shipsImage, x: 2, y: 2, width: 200, height: 172, rotation: 90 * DEGREE },
    shipB: { source: shipsImage, x: 204, y: 2, width: 200, height: 172, rotation: 90 * DEGREE },
};
// Class Sprite
const Sprite = {
    image: null, x: 0, y: 0, width: 64, height: 64, rotation: 0,
    get halfWidth() { return this.width / 2; },
    get halfHeight() { return this.height / 2; },
    render(ctx) {
        ctx.translate(this.x, this.y);
        ctx.rotate(this.image.rotation + this.rotation);
        ctx.drawImage(this.image.source, this.image.x, this.image.y, this.image.width, this.image.height,
            -this.halfWidth, -this.halfHeight, this.width, this.height);
    },
};
// Class Sprite instance
let space = {
    __proto__: Sprite, image: imageMap.stars, width: 1920, height: 1080, x: 960, y: 540,
};
sprites.add(space);
// Class Ship extends Sprite
const Ship = {
    __proto__: Sprite, scene: space, input: null,
    velocityX: 0, velocityY: 0, acceleration: 0.2, deceleration: 0.98,
    maxSpeed: 5, speed: 0, rotationSpeed: 3 * DEGREE,
    update(dt) {
        this.input.start;
        if (this.input.ArrowLeft) {
            this.rotation -= this.rotationSpeed;
        }
        if (this.input.ArrowRight) {
            this.rotation += this.rotationSpeed;
        }
        if (this.input.ArrowUp) {
            this.velocityX += this.acceleration * Math.cos(this.rotation);
            this.velocityY += this.acceleration * Math.sin(this.rotation);
        }
        if (this.input.ArrowDown) {
            this.velocityX *= this.deceleration;
            this.velocityY *= this.deceleration;
        }
        this.speed = Math.hypot(this.velocityX, this.velocityY);
        if (this.speed > this.maxSpeed) {
            this.velocityX *= this.maxSpeed / this.speed;
            this.velocityY *= this.maxSpeed / this.speed;
        }
        this.x = Math.max(0, Math.min(this.x + this.velocityX, this.scene.width));
        this.y = Math.max(0, Math.min(this.y + this.velocityY, this.scene.height));
    },
};
// Inputs
const humanInput = {};
const robotInput = {
    times: 0,
    get start() { if (this.times++ > 120) this.times = 0; },
    get ArrowLeft() { return this.times < 0; },
    get ArrowRight() { return this.times > 90; },
    get ArrowUp() { return this.times < 120; },
    get ArrowDown() { return this.times > 120; },
};
// Class Ship instance
let shipA = {
    __proto__: Ship, image: imageMap.shipA, input: humanInput,
    width: 80, height: 69, x: space.x, y: space.y, rotation: -90 * DEGREE,
};
sprites.add(shipA);
// Class Ship instance
let shipB = {
    __proto__: Ship, image: imageMap.shipB, input: robotInput,
    width: 80, height: 69, x: space.x + 200, y: space.y - 150, rotation: 90 * DEGREE,
};
sprites.add(shipB);
// Class Sprite instance
const camera = {
    __proto__: Sprite, scene: space, target: shipA, mapScale: 0.2 * canvas.height / space.height,
     width: canvas.width, height: canvas.height, x: shipA.x, y: shipA.y,
    update(dt) {
        this.x = Math.max(this.halfWidth, Math.min(this.target.x, this.scene.width - this.halfWidth)); 
        this.y = Math.max(this.halfHeight, Math.min(this.target.y, this.scene.height - this.halfHeight));
    },
    render(ctx) {
        ctx.fillStyle = ctx.strokeStyle = '#ccc'; ctx.lineWidth = 1 / this.mapScale;
        ctx.translate(this.x - this.halfWidth, this.y - this.halfHeight);
        ctx.fillText(`fps: ${fps.toFixed(2)} x: ${this.target.x.toFixed(2)} `+
            `y: ${this.target.y.toFixed(2)} v: ${this.target.speed.toFixed(5)}`, 5, this.height - 5);
        ctx.scale(this.mapScale, this.mapScale);
        for (let sprite of sprites) {
            ctx.strokeRect(sprite.x - sprite.halfWidth, sprite.y - sprite.halfHeight, sprite.width, sprite.height);
        }
    },
};
sprites.add(camera);
// Listeners
window.addEventListener('keydown', (e) => { humanInput[e.code] = true; e.preventDefault(); });
window.addEventListener('keyup', (e) => { humanInput[e.code] = false; });
window.addEventListener("load", (e) => { main(0); });
// Main (frame-based animation, about 60 fps, but there is delta for time-based)
let time = 0, fps = 0;
function main(now) {
    requestAnimationFrame(main);
    let delta = Math.min(now - time, 100) / 1000;
    time = now; fps = 1 / delta;
    for (let sprite of sprites) {
        if (sprite.update) sprite.update(delta);
    }
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.translate(camera.halfWidth - camera.x, camera.halfHeight - camera.y);
    for (let sprite of sprites) {
        if (sprite.render) {
            context.save(); sprite.render(context); context.restore();
        }
    }
    context.restore();
}
</script>
</body>
</html>

Зацените robotInput, это же гениально!)

Rise · #12 (**permalink**) 23.04.2019, 14:33

Есть идеи как добавить путь или маршрут в интерфейс robotInput? (из примера выше) Чтобы было допустим свойство path, как последовательность направлений, прямо столько-то пикселей, затем налево или направо столько-то градусов, и тд, в конце остановка или обратно или к началу, а может еще что-то. Может даже проще не в пикселях, а в фреймах указывать, прямо столько-то фреймов, затем налево или направо столько-то фреймов, и тд.

const robotInput = {
    times: 0,
    get start() { if (this.times++ > 120) this.times = 0; },
    get ArrowLeft() { return this.times < 0; },
    get ArrowRight() { return this.times > 90; },
    get ArrowUp() { return this.times < 120; },
    get ArrowDown() { return this.times > 120; },
};

Всемогущий · #13 (**permalink**) 23.04.2019, 17:24

Rise вы гений !!! Где вы откопали такой замечательный код !!!! Хотя он и не весь мне понятен, вместо переменных константы и тд, но код и правда крутой !!!!!!!!!! да еще и показываются координаты корабля что я никак не мог сделать. Очень интересный и необычный код надо будет поизучать и переформатировать в удобный мне формат.Robotinput. Это ваш код ? не алгоритмы я не писал про пути и маршруты. Но можно написать чтобы было рандомное перемещение в разные стороны

Как на сайте этой игры - fightz.io там монстры двигаются в рандомном направлении

Всемогущий · #14 (**permalink**) 23.04.2019, 22:07

Сразу видно что за соседним компьютером сидит профи

Всемогущий · #15 (**permalink**) 24.04.2019, 11:03

Я вот только не понимаю как ты узнаешь координаты корабля. Я вообще так поизучал весь твой код и много всего мне непонятно

Rise · #16 (**permalink**) 24.04.2019, 22:02

Да здесь всё просто насколько это возможно, если много непонятного значит есть чему учиться.

Всемогущий · #17 (**permalink**) 24.04.2019, 22:41

Привет Rise !!!!! как в приведенном ниже коде узнать координаты корабля которыq по центру ???!!! я не понял как ты сделал это в robotinput !

<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   </head>
   <body>
       <canvas id='myCanvas' height='500' width='700' style="border:1px solid black;"class="invisible"> </canvas>	 
				 
<script type="text/javascript">
 
	var angle1 = 0;  
	var sp = 1;
	var x = 400;
	var y = 250;
	var speed = 1;
	var angle = 0;
	var mod = 0;
	var stop = 0;

	var canvas  = document.getElementById("myCanvas");
	var ctx     = canvas.getContext('2d');
  
ship1 = new Image();
ship1.src = "https://i.paste.pics/74f8b071f80f88d8f71df1ffa634ee38.png";
ship1.onload = game;
 
function draw() {
	
    ctx.fillStyle = "green";
    ctx.fillRect(x, y, 30, 45);

	 
    ctx.save();
    ctx.translate(400, 200);
	ctx.rotate(Math.PI / 480 * angle); 
	ctx.scale(0.5,0.5);
    ctx.drawImage(ship1, -40, -40,80,80);
    ctx.restore();
    ctx.save();
 
 ctx.font = "14px Arial";
ctx.fillStyle = "black";
ctx.fillText("x:" + Math.round(x),110,40);
ctx.fillText("y:" + Math.round(y),190,40);
 
document.onkeydown = function(event) {
    if (event.keyCode == 87 || event.keyCode == 83) {
        mod = 0; e = 1; stop = 1;}
}
document.onkeydown = function(event) {
    //console.log(event.keyCode);
    if (event.keyCode == 87) {
        mod = 1;   
    }
    if (event.keyCode == 83) {
        mod = -1;  
    }
    if (event.keyCode == 65) {
        angle -= 10;  stop = 0;
    }
    if (event.keyCode == 68) {
        angle += 10;  stop =0;
    }
    if (event.keyCode == 32) {
		
    }
  if(event.keyCode == 70){  stop = 1;}
}}

function move(){
	
	 if( stop == 0){
	x += (speed * mod) * Math.cos(Math.PI / 480 * angle);
    y += (speed * mod) * Math.sin(Math.PI / 480 * angle);
    angle1 += 0.2 * Math.PI / 180;   
	}}

function game() {
	        ctx.clearRect(0, 0, canvas.width, canvas.height);
	        draw();
	        move();
	        requestAnimationFrame(game);
	    
	}
       </script>
   </body>
</html>

Rise · #18 (**permalink**) 24.04.2019, 23:09

Всемогущий,
Про robotInput был просто философский вопрос обращенный к форуму. А твой вопрос и код такой же как в этой теме. Ты что ничему не учишься?

рони · #19 (**permalink**) 25.04.2019, 00:23

Сообщение от Rise

Есть идеи

canvas Движение объектов по массиву координат

Всемогущий · #20 (**permalink**) 25.04.2019, 17:54

Сообщение от Rise

Всемогущий,
Про robotInput был просто философский вопрос обращенный к форуму. А твой вопрос и код такой же как в этой теме. Ты что ничему не учишься?

Да я задавал этот вопрос в другой теме, но не получил на него ответов. Да ctx.translate(400,200); ЭТО СМЕНА СИСТЕМЫ КООРДИНАТ ЧТОБЫ КОРАБЛЬ БЫЛ ПО ЦЕНТРУ !!! но это его координаты относительно центра !!!! но не других обьектов!!!!!1

Форум

Справочник

Discord чат

Курсы javascript