umarov · March 3, 2019 18:00
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="utf-8">
    <title>Tanks</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .tank-d {
            transform: rotate(0deg)
        }

        .tank-s {
            transform: rotate(90deg)
        }

        .tank-a {
            transform: rotate(180deg)
        }

        .tank-w {
            transform: rotate(270deg)
        }
    </style>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('canvas')
            const w = canvas.width = window.innerWidth
            const h = canvas.height = window.innerHeight
            setup(canvas.getContext('2d'), w, h)
            document.addEventListener('keydown', e => keyDown(e.key))
        })
    </script>
 </head>

 <body>
    <canvas id="canvas"></canvas>
    <img id="tank-image" src="tank.png" alt="tank" style="display: none">
    <img id="tank-image-s" src="tank-s.png" alt="tank" style="display: none">
    <img id="bullet-image" src="bullet.png" alt="tank" style="display: none">
    <script>
        let socket

        const fieldWidth = 20
        const fieldHeight = 20

        let cellSize
        let fieldScreenWidth, fieldScreenHeight
        let fieldCenterShiftX, fieldCenterShiftY

        let gameObjects = {}
        let tankImage
        let tankImageS
        let bulletImage
        const tankDirections = ['tank-d', 'tank-s', 'tank-a', 'tank-w']

        function setup(ctx, w, h) {
            socket = io()
            socket.on('upd', msg => {
                gameObjects = Object.assign({}, gameObjects, msg)
            })
            socket.on('dstr', msg => {
                for (let i = 0; i < msg.length; ++i) {
                    delete gameObjects[msg[i]]
                }
            })

            cellSize = Math.min(w / fieldWidth, h / fieldHeight)
            fieldScreenWidth = fieldWidth * cellSize
            fieldScreenHeight = fieldHeight * cellSize
            fieldCenterShiftX = (w - fieldScreenWidth) / 2
            fieldCenterShiftY = (h - fieldScreenHeight) / 2

            tankImage = document.getElementById('tank-image')
            tankImageS = document.getElementById('tank-image-s')
            bulletImage = document.getElementById('bullet-image')

            window.requestAnimationFrame(timestamp => draw(ctx, w, h, timestamp));
        }

        function draw(ctx, w, h, timestamp) {
            ctx.fillStyle = 'black'
            ctx.beginPath()
            ctx.rect(0, 0, w, h)
            ctx.fill()

            for (let y = 0; y < fieldWidth; ++y) {
                for (let x = 0; x < fieldWidth; ++x) {
                    const screenX = fieldCenterShiftX + x * cellSize
                    const screenY = fieldCenterShiftY + y * cellSize
                    ctx.fillStyle = 'grey'
                    ctx.beginPath()
                    ctx.rect(screenX + 1, screenY + 1, cellSize - 2, cellSize - 2)
                    ctx.fill()
                }
            }

            for (const [_, gameObject] of Object.entries(gameObjects)) {
                const screenX = fieldCenterShiftX + gameObject.x * cellSize
                const screenY = fieldCenterShiftY + gameObject.y * cellSize
                ctx.save();
                if (gameObject.t == 't') {

                    if (gameObject.dx == 0 && gameObject.dy == -1) {
                        // Pressed W
                        // Rotate Before Drawing Image
                        ctx.rotate(270 * Math.PI / 180)
                        // Draw image with rotates directions
                        ctx.drawImage(tankImage, -(screenY), screenX, cellSize - 2, cellSize - 2)
                    } else if (gameObject.dx == 1 && gameObject.dy == 0) {
                        // Pressed D
                        // Rotate Before Drawing Image
                        ctx.rotate(0 * Math.PI / 180)
                        // Draw image with rotates directions
                        ctx.drawImage(tankImage, screenX, screenY, cellSize - 2, cellSize - 2)
                    } else if (gameObject.dx == 0 && gameObject.dy == 1) {
                        // Pressed S
                        // Rotate Before Drawing Image
                        ctx.rotate(90 * Math.PI / 180)
                        // Draw image with rotates directions
                        ctx.drawImage(tankImage, screenY, -(screenX), cellSize - 2, cellSize - 2)
                    } else {
                        // Pressed A
                        // Rotate Before Drawing Image
                        ctx.rotate(180 * Math.PI / 180)
                        // Draw image with rotates directions
                        ctx.drawImage(tankImage, -(screenX), -(screenY), cellSize - 2, cellSize - 2)
                    }


                } else {
                    ctx.drawImage(bulletImage, -(screenX + 1), -(screenY + 1), cellSize - 2, cellSize - 2)
                }
                ctx.restore();

                // ctx.fillStyle = gameObject.c
                // ctx.beginPath()
                // ctx.rect(screenX + 1, screenY + 1, cellSize - 2, cellSize - 2)
                // ctx.fill()
            }

            window.requestAnimationFrame(timestamp => draw(ctx, w, h, timestamp));
        }

        function keyDown(key) {
            switch (key) {
                case 'w':
                case 'a':
                case 's':
                case 'd':
                case ' ':
                    socket.emit('cmd', key);
                    break
            }
        }
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Tanks</title>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	}

	.tank-d {
	transform: rotate(0deg)
	}

	.tank-s {
	transform: rotate(90deg)
	}

	.tank-a {
	transform: rotate(180deg)
	}

	.tank-w {
	transform: rotate(270deg)
	}
	</style>
	<script src="/socket.io/socket.io.js"></script>
	<script>
	document.addEventListener('DOMContentLoaded', () => {
	const canvas = document.getElementById('canvas')
	const w = canvas.width = window.innerWidth
	const h = canvas.height = window.innerHeight
	setup(canvas.getContext('2d'), w, h)
	document.addEventListener('keydown', e => keyDown(e.key))
	})
	</script>
	</head>

	<body>
	<canvas id="canvas"></canvas>
	<img id="tank-image" src="tank.png" alt="tank" style="display: none">
	<img id="tank-image-s" src="tank-s.png" alt="tank" style="display: none">
	<img id="bullet-image" src="bullet.png" alt="tank" style="display: none">
	<script>
	let socket

	const fieldWidth = 20
	const fieldHeight = 20

	let cellSize
	let fieldScreenWidth, fieldScreenHeight
	let fieldCenterShiftX, fieldCenterShiftY

	let gameObjects = {}
	let tankImage
	let tankImageS
	let bulletImage
	const tankDirections = ['tank-d', 'tank-s', 'tank-a', 'tank-w']

	function setup(ctx, w, h) {
	socket = io()
	socket.on('upd', msg => {
	gameObjects = Object.assign({}, gameObjects, msg)
	})
	socket.on('dstr', msg => {
	for (let i = 0; i < msg.length; ++i) {
	delete gameObjects[msg[i]]
	}
	})

	cellSize = Math.min(w / fieldWidth, h / fieldHeight)
	fieldScreenWidth = fieldWidth * cellSize
	fieldScreenHeight = fieldHeight * cellSize
	fieldCenterShiftX = (w - fieldScreenWidth) / 2
	fieldCenterShiftY = (h - fieldScreenHeight) / 2

	tankImage = document.getElementById('tank-image')
	tankImageS = document.getElementById('tank-image-s')
	bulletImage = document.getElementById('bullet-image')

	window.requestAnimationFrame(timestamp => draw(ctx, w, h, timestamp));
	}

	function draw(ctx, w, h, timestamp) {
	ctx.fillStyle = 'black'
	ctx.beginPath()
	ctx.rect(0, 0, w, h)
	ctx.fill()

	for (let y = 0; y < fieldWidth; ++y) {
	for (let x = 0; x < fieldWidth; ++x) {
	const screenX = fieldCenterShiftX + x * cellSize
	const screenY = fieldCenterShiftY + y * cellSize
	ctx.fillStyle = 'grey'
	ctx.beginPath()
	ctx.rect(screenX + 1, screenY + 1, cellSize - 2, cellSize - 2)
	ctx.fill()
	}
	}

	for (const [_, gameObject] of Object.entries(gameObjects)) {
	const screenX = fieldCenterShiftX + gameObject.x * cellSize
	const screenY = fieldCenterShiftY + gameObject.y * cellSize
	ctx.save();
	if (gameObject.t == 't') {

	if (gameObject.dx == 0 && gameObject.dy == -1) {
	// Pressed W
	// Rotate Before Drawing Image
	ctx.rotate(270 * Math.PI / 180)
	// Draw image with rotates directions
	ctx.drawImage(tankImage, -(screenY), screenX, cellSize - 2, cellSize - 2)
	} else if (gameObject.dx == 1 && gameObject.dy == 0) {
	// Pressed D
	// Rotate Before Drawing Image
	ctx.rotate(0 * Math.PI / 180)
	// Draw image with rotates directions
	ctx.drawImage(tankImage, screenX, screenY, cellSize - 2, cellSize - 2)
	} else if (gameObject.dx == 0 && gameObject.dy == 1) {
	// Pressed S
	// Rotate Before Drawing Image
	ctx.rotate(90 * Math.PI / 180)
	// Draw image with rotates directions
	ctx.drawImage(tankImage, screenY, -(screenX), cellSize - 2, cellSize - 2)
	} else {
	// Pressed A
	// Rotate Before Drawing Image
	ctx.rotate(180 * Math.PI / 180)
	// Draw image with rotates directions
	ctx.drawImage(tankImage, -(screenX), -(screenY), cellSize - 2, cellSize - 2)
	}


	} else {
	ctx.drawImage(bulletImage, -(screenX + 1), -(screenY + 1), cellSize - 2, cellSize - 2)
	}
	ctx.restore();

	// ctx.fillStyle = gameObject.c
	// ctx.beginPath()
	// ctx.rect(screenX + 1, screenY + 1, cellSize - 2, cellSize - 2)
	// ctx.fill()
	}

	window.requestAnimationFrame(timestamp => draw(ctx, w, h, timestamp));
	}

	function keyDown(key) {
	switch (key) {
	case 'w':
	case 'a':
	case 's':
	case 'd':
	case ' ':
	socket.emit('cmd', key);
	break
	}
	}
	</script>
	</body>

	</html>