WalkingBread/camera.js

## camera.js
const MAP_X = -1500, MAP_Y = -1500, MAP_WIDTH = 3000, MAP_HEIGHT = 3000;
const W_KEY = 87, S_KEY = 83, D_KEY = 68, A_KEY = 65;
const background_color = '#f0f0ff';
var ctx, width, height;
var keycode;
var player,
    points = [];
var points_on_map = 500;

window.onload = () => {
    const canvas = document.getElementById('canvas');
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
    ctx = canvas.getContext('2d');
    ctx.translate(width / 2, height / 2);

    player = new Player(0, 0);

    for(let i = 0; i < points_on_map; i++) {
        points.push(new Point());
    }

    var background = () => {
        ctx.fillStyle = background_color;
        ctx.fillRect(MAP_X, MAP_Y, MAP_WIDTH, MAP_HEIGHT);
    }

    var frame = () => {
        background();
        for(let point of points) {
            point.show();
        }
        player.update();
        requestAnimationFrame(frame);
    }
    frame();

    document.addEventListener('keydown', (e) => {
        keycode = e.keyCode;
    });

    document.addEventListener('keyup', () => {
        keycode = null;
    });
}

class Player {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.speed = 2;
        this.mass = 300;
        this.point_to_consume = null;
    }

    update() {
        this.px = this.x;
        this.py = this.y;

        this.r = this.mass / 10;

        let xV = 0;
        let yV = 0;

        if(keycode) {
            switch(keycode) {
                case W_KEY: yV = -this.speed; break;
                case S_KEY: yV = this.speed; break;
                case D_KEY: xV = this.speed; break;
                case A_KEY: xV = -this.speed;
            }
        }

        this.x += xV;
        this.y += yV;

        if(this.x < MAP_X + this.r ||
           this.x > (MAP_X + MAP_WIDTH) - this.r ||
           this.y < MAP_Y + this.r ||
           this.y > (MAP_Y + MAP_HEIGHT) - this.r
        ){
            this.x -= xV;
            this.y -= yV;
        }

        let fx = this.px - this.x;
        let fy = this.py - this.y;

        if(this.x > (MAP_X + MAP_WIDTH) - width / 2 || this.x < MAP_X + width / 2) {
            fx = 0;
        }
        if(this.y > (MAP_Y + MAP_HEIGHT) - height / 2 || this.y < MAP_Y + height / 2) {
            fy = 0;
        }
        ctx.translate(fx, fy);

        if(this.collides_with_points()) {
            this.consume();
        }

        ctx.fillStyle = '#000';
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
        ctx.fill();

        console.log(this.x + ', ' + this.y);
    }

    collides_with_points() {
        for(let point of points) {
            let x = point.x - this.x;
            let y = point.y - this.y;

            if(Math.sqrt(x * x + y * y) <= this.r - point.r) {
                this.point_to_consume = point;
                return true;
            }
        }
        return false;
    }

    consume() {
        if(this.point_to_consume && this.mass > this.point_to_consume.mass) {
            this.mass += this.point_to_consume.mass / 2;
            points.splice(points.indexOf(this.point_to_consume), 1);
            points.push(new Point());
        }
    }
}

class Point {
    constructor() {
        this.x = MAP_X + Math.floor(Math.random() * MAP_WIDTH);
        this.y = MAP_Y + Math.floor(Math.random() * MAP_HEIGHT);
        this.mass = 20;
    }

    show() {
        this.r = this.mass / 2;
        ctx.fillStyle = '#ff00ff';
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
        ctx.fill();
    }
}

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style> body { padding: 0; margin: 0; } canvas {vertical-align: top;} </style>
        <script src="camera.js"></script>
    </head>
    <body>
        <canvas id="canvas"></canvas>
    </body>
</html>
	const MAP_X = -1500, MAP_Y = -1500, MAP_WIDTH = 3000, MAP_HEIGHT = 3000;
	const W_KEY = 87, S_KEY = 83, D_KEY = 68, A_KEY = 65;
	const background_color = '#f0f0ff';
	var ctx, width, height;
	var keycode;
	var player,
	points = [];
	var points_on_map = 500;

	window.onload = () => {
	const canvas = document.getElementById('canvas');
	width = canvas.width = window.innerWidth;
	height = canvas.height = window.innerHeight;
	ctx = canvas.getContext('2d');
	ctx.translate(width / 2, height / 2);

	player = new Player(0, 0);

	for(let i = 0; i < points_on_map; i++) {
	points.push(new Point());
	}

	var background = () => {
	ctx.fillStyle = background_color;
	ctx.fillRect(MAP_X, MAP_Y, MAP_WIDTH, MAP_HEIGHT);
	}

	var frame = () => {
	background();
	for(let point of points) {
	point.show();
	}
	player.update();
	requestAnimationFrame(frame);
	}
	frame();

	document.addEventListener('keydown', (e) => {
	keycode = e.keyCode;
	});

	document.addEventListener('keyup', () => {
	keycode = null;
	});
	}

	class Player {
	constructor(x, y) {
	this.x = x;
	this.y = y;
	this.speed = 2;
	this.mass = 300;
	this.point_to_consume = null;
	}

	update() {
	this.px = this.x;
	this.py = this.y;

	this.r = this.mass / 10;

	let xV = 0;
	let yV = 0;

	if(keycode) {
	switch(keycode) {
	case W_KEY: yV = -this.speed; break;
	case S_KEY: yV = this.speed; break;
	case D_KEY: xV = this.speed; break;
	case A_KEY: xV = -this.speed;
	}
	}

	this.x += xV;
	this.y += yV;

	if(this.x < MAP_X + this.r \|\|
	this.x > (MAP_X + MAP_WIDTH) - this.r \|\|
	this.y < MAP_Y + this.r \|\|
	this.y > (MAP_Y + MAP_HEIGHT) - this.r
	){
	this.x -= xV;
	this.y -= yV;
	}

	let fx = this.px - this.x;
	let fy = this.py - this.y;

	if(this.x > (MAP_X + MAP_WIDTH) - width / 2 \|\| this.x < MAP_X + width / 2) {
	fx = 0;
	}
	if(this.y > (MAP_Y + MAP_HEIGHT) - height / 2 \|\| this.y < MAP_Y + height / 2) {
	fy = 0;
	}
	ctx.translate(fx, fy);

	if(this.collides_with_points()) {
	this.consume();
	}

	ctx.fillStyle = '#000';
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
	ctx.fill();

	console.log(this.x + ', ' + this.y);
	}

	collides_with_points() {
	for(let point of points) {
	let x = point.x - this.x;
	let y = point.y - this.y;

	if(Math.sqrt(x * x + y * y) <= this.r - point.r) {
	this.point_to_consume = point;
	return true;
	}
	}
	return false;
	}

	consume() {
	if(this.point_to_consume && this.mass > this.point_to_consume.mass) {
	this.mass += this.point_to_consume.mass / 2;
	points.splice(points.indexOf(this.point_to_consume), 1);
	points.push(new Point());
	}
	}
	}

	class Point {
	constructor() {
	this.x = MAP_X + Math.floor(Math.random() * MAP_WIDTH);
	this.y = MAP_Y + Math.floor(Math.random() * MAP_HEIGHT);
	this.mass = 20;
	}

	show() {
	this.r = this.mass / 2;
	ctx.fillStyle = '#ff00ff';
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
	ctx.fill();
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<style> body { padding: 0; margin: 0; } canvas {vertical-align: top;} </style>
	<script src="camera.js"></script>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	</body>
	</html>