Редактирование: Арканоид (JavaScript)

==Авторы==
Вертелецкая Анастасия
<br />
Камила Карамуллина 
==Описание==
Арканоид  - это тип классических компьютерных игр, целью в которых является уничтожение всех игровых блоков отскакивающим шариком. <br />
Именно к этому типу видеоигр относится этот проект.<br />
Для реализации культовой игры были задействованы языки программирования: JavaScript, HTML, CSS.<br />
Данный проект отличается от своей классической версии - в управление были добавлены некоторые особые функции, перечисленные ниже. Также
дизайн работы был вдохновлен борьбой с пандемией COVID-19.  <br /> 
==Особенности управления==
* Подсчет очков
* Подсчет времени
* Возможность менять скорость таблетки, нажав "вверх" или "вниз".
* Запуск анимации блоков при нажатии "Ctrl"
==Игровой процесс==
<br />
#На игровом поле расположены блоки-вирусы, шарик-таблетка, список игровых клавиш и платформа.
#Игрок начинает игру по кнопке "Space". После нажатия шарик отрывается от платформы и начинает полет.
#При столкновении шарика с блоком, блок-вирус пропадает и игрок зарабатывает установленное количество очков.
#Игра продолжается до момента попадания шарика-таблетки на нижний край игрового поля или до полного уничтожения блоков.
<br />
Далее реализуется два сценария:
* При попадании шарика-таблетки на нижний край игрового поля выводится экран поражения. Игрок наблюдает время прохождения и количество заработанных очков. 
* При полном уничтожении блоков выводится экран победы. Таймер останавливается и игрок может наблюдать свои итоговые результаты.
==Визуализация==
{{#widget: Iframe | url=http://tm.spbstu.ru/htmlets/js2020/VerteletskayaKaramullina/index.html | width=840 | height=740 | border = 0 }}
==Код игры==
<div class="mw-collapsible mw-collapsed">
'''Код программы на языке JavaScript:''' <div class="mw-collapsible-content">
<syntaxhighlight lang="javascript" line start="1" enclose="div">
const GAME_RUN= 1;
const GAME_LOST= 2;
const GAME_WIN= 3;

const KEY_START=32;
const KEY_LEFT=37;
const KEY_RIGHT=39;
const KEY_UP=38;
const KEY_DOWN=40;
const KEY_ANIM=17;

var game = {
	state: GAME_RUN,
	width: 640,
	height: 400,
	score: 0,
	sprites: { platform: undefined, background: undefined, block: undefined, pill: undefined, bg_lost: undefined, bg_win:undefined},
	pill: {}, 
	platform: {},
	blocks: [],
	rows: 5, // 5,
	cols: 8, // 8,
	startTime: null,
	blockAnimFreq: 400,
	needAnimBlocks: false, 
	needPaddleSidesEval: false, //true= Если мячик ударился в левую половину платформы, то отразится он влево (откуда бы ни прилетел), если в правую - отразится вправо
	init: function(){
		this.ctx = document.getElementById("mycanvas").getContext("2d");
		this.ctx.font = '16px Roboto';
		this.ctx.fillStyle = '#177398';
		window.addEventListener('keydown', function(e){
			if ( e.keyCode == KEY_START ) {
				if (game.state==GAME_RUN){
					game.platform.releaseBall();
				} else {
					window.location.reload(); 
				}
		
			} else if ( e.keyCode == KEY_LEFT ) {
				game.platform.dx = -game.platform.velocity;
			} else if ( e.keyCode == KEY_RIGHT ) {
				game.platform.dx = game.platform.velocity;
			} else if ( e.keyCode == KEY_UP ) {
				game.pill.incSpeed();
			} else if ( e.keyCode == KEY_DOWN ) {
				game.pill.decSpeed();
			} else if ( e.keyCode == KEY_ANIM ) {
				game.animateBlocks();
			}

		});
		window.addEventListener('keyup', function(e){
			game.platform.stop();
		});
	},
	preload: function(){
		for (var key in this.sprites) {
			this.sprites[key] = new Image();
			this.sprites[key].src = 'images/' + key + '.png';
		}
	},
	create: function(){
		for ( var row = 0; row < this.rows; row++ ) {
			for ( var col = 0; col < this.cols; col++ ) {
				this.blocks.push({
					x: 68 * col + 50,
					y: 36 * row + 35,
					width: 64,
					height: 32,
					frame: getRandomInt(0, 3), 
					isAlive: true
				});
			}
		}
	},
	update: function() {
		if ( this.pill.collide(this.platform) ) {
			this.pill.bumpPuddle(this.platform);
		}

		if( this.pill.dx || this.pill.dy ) {
			this.pill.move();
		}

		if( this.platform.dx ) {
			this.platform.move();
		}

		this.blocks.forEach(function(element, index){
			if ( element.isAlive ) {
				if( this.pill.collide(element) ) {
					this.pill.bumpBlock(element);
				}
			}
		}, this);

		this.pill.checkBounds();
	},
	render: function() {
		this.ctx.clearRect(0, 0, this.width, this.height);
		this.ctx.drawImage(this.sprites.background, 0, 0);
		this.ctx.drawImage(this.sprites.pill, this.pill.width * this.pill.frame, 0, this.pill.width, this.pill.height, this.pill.x, this.pill.y, this.pill.width, this.pill.height);
		this.ctx.drawImage(this.sprites.platform, this.platform.x, this.platform.y);

		this.blocks.forEach(function(element){
			if ( element.isAlive ) {
				this.ctx.drawImage(this.sprites.block, element.width * element.frame, 0, element.width, element.height, element.x, element.y, element.width, element.height);

			}
		}, this);

		this.drawCounters();

	},


	run: function() {
		switch (this.state){
			case GAME_RUN:
				this.update();
				this.render();
				window.requestAnimationFrame(function(){
					game.run();
				});				
				break;
			case GAME_LOST:
				this.showLostScreen();
				break;
			case GAME_WIN:
				this.showWinScreen();
				break;
		}
	},

	start: function(){
		this.init();
		this.preload();
		this.create();
		this.run();
	},

	startTimer: function(){
		this.startTime = new Date();
	},
	
	animateBlocks: function (){
		if (!this.needAnimBlocks){
			this.needAnimBlocks=true;
			this.blocks.forEach(function(element, index){
				if ( element.isAlive ) {
					element.animation = setInterval(function(){
						++element.frame;
						if ( element.frame > 2 ) {
							element.frame = 0;
						}
					}, this.blockAnimFreq);
				}
			}, this);
		} else {
			this.needAnimBlocks=false;
			this.blocks.forEach(function(element, index){
				if ( element.isAlive ) {
					clearInterval(element.animation);
				}
			}, this);
		}
	},

	drawCounters(){
		this.ctx.fillText('Score: ' + this.score, 15, this.height - 20);
		this.ctx.fillText('Speed: ' + this.pill.velocity, 15, this.height - 5);
		this.ctx.fillText('Time: ' + getTimeStr(game.startTime), 530, this.height - 5);
	},

	showWinScreen(){
		this.ctx.clearRect(0, 0, this.width, this.height);
		this.ctx.drawImage(this.sprites.bg_win, 0, 0);

	
		this.drawCounters();
		
	},
	showLostScreen(){
		this.ctx.clearRect(0, 0, this.width, this.height);
		this.ctx.drawImage(this.sprites.bg_lost, 0, 0);

		
		this.drawCounters();
	}

};


game.pill = {
	frame: 0,
	x: 310,
	y: game.height-72, //288,
	velocity: 3,
	vel_step: 1,
	dx: 0,
	dy: 0,
	width: 22,
	height: 22,
	move: function(){
		this.x += this.dx;
		this.y += this.dy;
	},
	animate: function(){
		var self = this;
		this.animation = setInterval(function(){
			++self.frame;
			if ( self.frame > 3 ) {
				self.frame = 0;
			}
		}, 100);
	},
	jump: function(){
		this.dy = this.dx = -this.velocity;
		this.animate();
	},
	collide: function(element) {
		var x = this.x + this.dx;
		var y = this.y + this.dy;

		if ( x + this.width > element.x &&
			x < element.x + element.width &&
			y + this.height > element.y &&
			y < element.y + element.height) {
			return true;
		}
		return false;
	},
	onTheLeftSide: function(platform) {
		return (this.x + this.width / 2) < (platform.x + platform.width / 2);
	},
	checkBounds: function(){
		var x = this.x + this.dx;
		var y = this.y + this.dy;

		if ( x < 0  ) {
			this.x = 0;
			this.dx = this.velocity;
		} else if ( x + this.width > game.width ) {
			this.x = game.width - this.width;
			this.dx = -this.velocity;
		} else if ( y < 0 ) {
			this.y = 0;
			this.dy = this.velocity;
		} else if( this.y + this.height >= game.height ) {
			this.over(GAME_LOST);
		}
	},
	bumpPuddle: function(platform){
		this.dy = -this.velocity;
		if (game.needPaddleSidesEval){
			this.dx = this.onTheLeftSide(platform) ? -this.velocity : this.velocity;
		}
	},
	bumpBlock: function(block){
		block.isAlive = false;
		this.dy *= -1;
		++game.score;
		if ( game.score == game.blocks.length ) {
			this.over(GAME_WIN);
		}
	},
	over: function(state) {
		game.state = state;
	},
	incSpeed: function() {
		this.velocity=this.velocity + this.vel_step;
		if (this.dx!=0) {this.dx=this.dx > 0 ? this.dx+this.vel_step : this.dx-this.vel_step;}
		if (this.dy!=0) {this.dy=this.dy > 0 ? this.dy+this.vel_step : this.dy-this.vel_step;}
	},
	decSpeed: function() {
		if (this.velocity>this.vel_step){
			this.velocity=this.velocity- this.vel_step;
			if (this.dx!=0) {this.dx=this.dx > 0 ? this.dx-this.vel_step : this.dx+this.vel_step;}
			if (this.dy!=0) {this.dy=this.dy > 0 ? this.dy-this.vel_step : this.dy+this.vel_step;}
		}
	}
};


game.platform = {
	x: 270,
	y: game.height-50, //310,
	dx: 0,
	velocity: 6,
	width: 104,
	height: 12,
	pill: game.pill,
	stop: function(){
		this.dx = 0;

		if ( this.pill ) {
			this.pill.dx = 0;
		}
	},
	move: function(){
		var stop_pill=false;
		this.x += this.dx;
		if ( this.x < 0  ) {
			this.x = 0; stop_pill=true;
		} else if ( this.x + this.width > game.width ) {
			this.x = game.width - this.width;
			stop_pill=true;
		}

		if ( this.pill && !stop_pill ) {
			this.pill.x += this.dx;
		}
	},
	releaseBall: function(){
		if ( this.pill ) {
			game.startTimer();
			this.pill.jump();
			this.pill = false;
		}
	}
};


function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
}

function getTimeStr(startDate) {
	var out="0:00:00";
	if (startDate) {
	 	var dateObj = new Date();
		var time=dateObj.getTime()-startDate.getTime();

		var seconds = Math.floor(time / 1000);
		var minutes = Math.floor(time / (1000 * 60));
		var hours = Math.floor(time / (1000 * 60 * 60));

		if (minutes < 10) minutes = "0" + minutes;
		if (seconds < 10) seconds = "0" + seconds;
		out = hours + ":" + minutes + ":" + seconds;
	}
	return out;
}


window.addEventListener("load",function() {
	game.start();
});
</syntaxhighlight>
</div>
<div class="mw-collapsible mw-collapsed">
'''Код программы на языке HTML:''' <div class="mw-collapsible-content">
<syntaxhighlight lang="html" line start="1" enclose="div">
<html>
<head>
<title>Kill the virus</title>
<link rel="icon" href="images/ico.png">
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<center>
<br/>
<img src="images/game.png">
<table width=500>
<tr><td><font color=red>Platform:</font></td><td><font color=red>Pill Speed:</font></td><td><font color=red>Animation:</font></td></tr>
<tr><td>Arrow LEFT, Arrow RIGHT</td><td>Arrow UP, Arrow DOWN</td><td>CTRL</td></tr>
</table>

<h3>Press SPACE to START</h3>
<canvas id="mycanvas" width="640" height="400" ></canvas>
</center>
<script src="game.js" type="text/javascript"></script>
</body>
</html>
</syntaxhighlight>
</div>
<div class="mw-collapsible mw-collapsed">
'''Код программы на языке CSS:''' <div class="mw-collapsible-content">
<syntaxhighlight lang="css" line start="1" enclose="div">
body {
	background:white;
	padding: 0;
	margin: 0;
}
canvas {
	//width: 100%;
}
h3 {
	color: #9d0c15; // white;
	font-family: "Times New Roman", Georgia, Serif";
	line-height: 0.5em;
	font-size: 1em;
}
table {
	color: #9d0c15;
	font-family: "Times New Roman", Georgia, Serif";
	line-height: 0.5em;
	font-size: 0.9em;
}
</syntaxhighlight>
</div>