imjacobclark · January 3, 2020 19:09
diff --git a/game.js b/game.js
 <!doctype html>
 <html>

 <head>
    <meta charset="utf-8">
    <title>Coin Collector!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
            overflow: hidden;
            background-color: green;
        }
    </style>

    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <link rel="manifest" href="manifest.json" />
 </head>

 <body>
    <script type="module">
        const ONE_BLOCK_IN_PIXELS = 10;
        const SCREEN_OUT_OF_BOUNDS_OFFSET = 1;

        const coinCollectorApplication = new PIXI.Application({
            width: window.innerWidth,
            height: window.innerHeight,
            antialias: true,
            transparent: false,
            resolution: 1,
            backgroundColor: 0x262d41,
            autoDensity: true
        });

        let type = "WebGL"

        if (!PIXI.utils.isWebGLSupported()) {
            type = "canvas"
        }

        document.body.appendChild(coinCollectorApplication.view);

        const polyPoints = [
                (window.innerWidth / 2), -50, // top left
                (window.innerWidth / 2), -50, // top right
                window.innerWidth, window.innerHeight, // bottom right
                0, window.innerHeight // bottom left
            ];

        const floor = new PIXI.Graphics()
                .beginFill(0x22a6d7, 0.4)
                .drawPolygon(polyPoints)
                .lineStyle(100, 0xFF0000);

        floor.sortableChildren = true

        const backgroundTexture = PIXI.Texture.from('back.png');
        const background = new PIXI.Sprite(backgroundTexture);
        background.width = window.innerWidth;
        background.height = window.innerHeight;

        const bushTexture = PIXI.Texture.from('bush.png');
        const treeTexture = PIXI.Texture.from('tree.png');

        const playerTexture = PIXI.Texture.from('player.png');
        const player = new PIXI.Sprite(playerTexture);
        player.width = 150;
        player.height = 150;
        player.x = window.innerWidth / 2;
        player.y = window.innerHeight - 200;

        document.addEventListener('keydown', e => {
            if (e.keyCode === 39 || e.keyCode === 68) {
                player.x = player.x + 30;
            }

            if (e.keyCode === 37 || e.keyCode === 65 || e.keyCode === 81) {
                player.x = player.x - 30;
            }
        })

        const objects = []

        let treeSpawning = false;

        window.setInterval(function () {
            let sprite = new PIXI.Sprite(bushTexture);
            sprite.zIndex = 1
            objects.push({
                x: (window.innerWidth / 2 + 40) - (Math.floor(Math.random() * 90) + 1),
                y: 0,
                height: 5,
                width: 5,
                sprite: sprite,
                direction: Math.floor(Math.random() * 2) + 1,
                xMovement: Math.floor(Math.random() * 3700) + 500,
                multiplier: 0
            })
        }, 300);

        window.setInterval(function () {
            let sprite = new PIXI.Sprite(treeTexture);
            sprite.zIndex = 3
            objects.push({
                x: (window.innerWidth / 2 - 10) - (Math.floor(Math.random() * 90) + 1),
                y: -100,
                height: 80,
                width: 80,
                sprite: sprite,
                direction: Math.floor(Math.random() * 2) + 1,
                xMovement: Math.floor(Math.random() * 3700) + 500,
                multiplier: 0
            })
        }, 1200);

        coinCollectorApplication.ticker.add(delta => {
            objects.forEach(object => {
                object.sprite.x = object.x
                object.sprite.y = object.y
                object.sprite.width = object.width
                object.sprite.height = object.height
                floor.addChild(object.sprite);

                object.y = object.y + 4 * object.multiplier;

                if(object.direction === 1){
                    object.x = object.x + (window.innerWidth / object.xMovement)  * object.multiplier
                }else{
                    object.x = object.x - (window.innerWidth / object.xMovement)  * object.multiplier
                }

                object.height = object.height + 0.4;
                object.width = object.width + 0.4;
                object.multiplier = object.multiplier + 0.01
            })
        });

        coinCollectorApplication.stage.addChild(background);
        coinCollectorApplication.stage.addChild(floor);
        coinCollectorApplication.stage.addChild(player);

    </script>
 </body>

 </html>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Coin Collector!</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	text-align: center;
	overflow: hidden;
	background-color: green;
	}
	</style>

	<meta name="viewport" content="width=device-width, user-scalable=no" />
	<link rel="manifest" href="manifest.json" />
	</head>

	<body>
	<script type="module">
	const ONE_BLOCK_IN_PIXELS = 10;
	const SCREEN_OUT_OF_BOUNDS_OFFSET = 1;

	const coinCollectorApplication = new PIXI.Application({
	width: window.innerWidth,
	height: window.innerHeight,
	antialias: true,
	transparent: false,
	resolution: 1,
	backgroundColor: 0x262d41,
	autoDensity: true
	});

	let type = "WebGL"

	if (!PIXI.utils.isWebGLSupported()) {
	type = "canvas"
	}

	document.body.appendChild(coinCollectorApplication.view);

	const polyPoints = [
	(window.innerWidth / 2), -50, // top left
	(window.innerWidth / 2), -50, // top right
	window.innerWidth, window.innerHeight, // bottom right
	0, window.innerHeight // bottom left
	];

	const floor = new PIXI.Graphics()
	.beginFill(0x22a6d7, 0.4)
	.drawPolygon(polyPoints)
	.lineStyle(100, 0xFF0000);

	floor.sortableChildren = true

	const backgroundTexture = PIXI.Texture.from('back.png');
	const background = new PIXI.Sprite(backgroundTexture);
	background.width = window.innerWidth;
	background.height = window.innerHeight;

	const bushTexture = PIXI.Texture.from('bush.png');
	const treeTexture = PIXI.Texture.from('tree.png');

	const playerTexture = PIXI.Texture.from('player.png');
	const player = new PIXI.Sprite(playerTexture);
	player.width = 150;
	player.height = 150;
	player.x = window.innerWidth / 2;
	player.y = window.innerHeight - 200;

	document.addEventListener('keydown', e => {
	if (e.keyCode === 39 \|\| e.keyCode === 68) {
	player.x = player.x + 30;
	}

	if (e.keyCode === 37 \|\| e.keyCode === 65 \|\| e.keyCode === 81) {
	player.x = player.x - 30;
	}
	})

	const objects = []

	let treeSpawning = false;

	window.setInterval(function () {
	let sprite = new PIXI.Sprite(bushTexture);
	sprite.zIndex = 1
	objects.push({
	x: (window.innerWidth / 2 + 40) - (Math.floor(Math.random() * 90) + 1),
	y: 0,
	height: 5,
	width: 5,
	sprite: sprite,
	direction: Math.floor(Math.random() * 2) + 1,
	xMovement: Math.floor(Math.random() * 3700) + 500,
	multiplier: 0
	})
	}, 300);

	window.setInterval(function () {
	let sprite = new PIXI.Sprite(treeTexture);
	sprite.zIndex = 3
	objects.push({
	x: (window.innerWidth / 2 - 10) - (Math.floor(Math.random() * 90) + 1),
	y: -100,
	height: 80,
	width: 80,
	sprite: sprite,
	direction: Math.floor(Math.random() * 2) + 1,
	xMovement: Math.floor(Math.random() * 3700) + 500,
	multiplier: 0
	})
	}, 1200);

	coinCollectorApplication.ticker.add(delta => {
	objects.forEach(object => {
	object.sprite.x = object.x
	object.sprite.y = object.y
	object.sprite.width = object.width
	object.sprite.height = object.height
	floor.addChild(object.sprite);

	object.y = object.y + 4 * object.multiplier;

	if(object.direction === 1){
	object.x = object.x + (window.innerWidth / object.xMovement) * object.multiplier
	}else{
	object.x = object.x - (window.innerWidth / object.xMovement) * object.multiplier
	}

	object.height = object.height + 0.4;
	object.width = object.width + 0.4;
	object.multiplier = object.multiplier + 0.01
	})
	});

	coinCollectorApplication.stage.addChild(background);
	coinCollectorApplication.stage.addChild(floor);
	coinCollectorApplication.stage.addChild(player);

	</script>
	</body>

	</html>