spaceship game maket

by magneto903

HTML

<!DOCTYPE html>
<html>
<head>
	<meta content="width=device-width,initial-scale=1" name="viewport">
  	<meta charset="utf-8">
 
	<title>Asteroids</title>
	<style>
	    #preload {
	      width: 100%;
	      height: 100%;
	      position: absolute;
	    } 

	    #preload_text {
	      font-size: 7vmin;
	      font-family: Arial;
	      background-color: white;
	      margin: 20%;
    }
  	</style>
</head>
<body oncontextmenu="return false;">

<script type="text/javascript">
    window.onload = function() {
    	// когда страница загрузилась
    	load_page();
	}
</script>

<div id="preload" >
  	<center>
  		<h1 id="preload_text">Подождите пожалуйста</h1>
  	</center>
</div>


<canvas id="canvas"></canvas>


</body>
</html>

CSS

body {
	background-color: 'white';
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	border: none;
	overflow: hidden;
	touch-action: none;
}

#canvas {
	position: absolute;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	/*border: 2px solid blue;*/
	overflow-y: auto;
	overflow-x: none;
	z-index: -100;
	display: none;
	background-color: black;
}

#main_menu {
	background-size: 220vmin;
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	box-sizing: border-box;
}

JavaScript

evar winW = $(window).width();
var winH = $(window).height();
var pixel_ratio = 1;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var canvas_fon = document.createElement('canvas');
canvas_fon.width = winW*pixel_ratio;
canvas_fon.height = winH*pixel_ratio;
var ctx_fon = canvas_fon.getContext('2d')



var game_status = 'active';
var user_type;

var player;


var zoom = 2;


var map_size_x = 2000;
var map_size_y = 2000;
var cell_size  = 50;


var x_cam = 0;
var y_cam = 0;

var delta_x = 0;
var delta_y = 0;

var cur_lvl = 1;

var enemies = [];
var bullets = [];


var mouse = {
	"x": 0,
	"y": 0,
	"down": false,
	"move": false,
	"s_x": 0,
	"s_y": 0,
}


var start_game = function(g_mode) {
	$('#canvas').css('display', 'block');
	$('#main_menu').css('display', 'none');
	player = new Player(winW/2, winH/2);
	game_status = 'active';
}


var load_page = function() {
	$('#preload').css('display', 'none');
  $('#canvas').css('display', 'none');
  start_game();
}

var move_camera = function() {
	var old_x_cam = x_cam;
	var old_y_cam = y_cam;
	var new_x_cam = -winW/(2*zoom)+player.x;
	var new_y_cam = -winH/(2*zoom)+player.y;
	
	if (new_x_cam > 0 && new_x_cam < map_size_x) {
		x_cam = new_x_cam;
	} else {
		delta_x = 0;
	}
	if (new_y_cam > 0 && new_y_cam < map_size_y) {
		y_cam = new_y_cam;
	} else {
		delta_y = 0
	}
}

var draw_grid = function(ctx) {
	let maxBlur = 3;
  let blur = (player.speed/player.max_speed)*maxBlur;
 ctx.filter = `blur(${blur}px)`;
	ctx.lineWidth = 2;
  ctx.beginPath()
	for (var x=0; x <= map_size_x+winW/2; x+=cell_size) {
		ctx.strokeStyle = 'white'
		ctx.moveTo((x-x_cam+delta_x)*zoom*pixel_ratio, (0-y_cam+delta_y)*zoom*pixel_ratio)
		ctx.lineTo((x-x_cam+delta_x)*zoom*pixel_ratio, (map_size_y+winW/2-y_cam+delta_y)*zoom*pixel_ratio)
			
	}
	for (var y=0; y <= map_size_y+winH/2; y+=cell_size) {
		ctx.strokeStyle = 'white'
		ctx.moveTo((0-x_cam+delta_x)*zoom*pixel_ratio,...