hakatashi · December 14, 2016 10:41
diff --git a/shoot-canvas-incomplete.html b/shoot-canvas-incomplete.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>SVG Shooting</title>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-core.min.js"></script>
 		<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.js"></script>
 		<style>
 			body {
 				margin: 0;
 			}

 			svg {
 				display: block;
 				width: 100vmin;
 				height: 100vmin;
 				margin: 0 auto;
 			}
 		</style>
 		<script>
 			document.addEventListener('DOMContentLoaded', () => {
 				class Bullet {
 					constructor({x, y, angle}) {
 						this.x = x;
 						this.y = y;
 						this.v = 4;
 						this.angle = angle;

 						this.paper = null; // 何か書く
 					}

 					step() {
 						this.x += Math.cos(this.angle) * this.v;
 						this.y += Math.sin(this.angle) * this.v;
 						// 何か書く

 						// 画面外判定
 						if (this.x < 0 || 500 < this.x || this.y < 0 || 500 < this.y) {
 							// 何か書く
 							bullets.delete(this);
 						}
 					}
 				}

 				const canvas = document.getElementById('paper');

 				// 背景描画
 				// paper.jsの場合
 				/*
 				paper.setup(canvas);

 				const background = new paper.Path.Rectangle({
 					from: [0, 0],
 					to: [500, 500],
 					fillColor: 'black',
 				});
 				*/

 				// Two.jsの場合
 				/*
 				const two = new Two({width: 500, height: 500}).appendTo(canvas);

 				const background = two.makeRectangle(0, 0, 500, 500);
 				background.fill = 'black';
 				background.noStroke();
 				*/

 				// EaselJSの場合
 				/*
 				const stage = new createjs.Stage("demoCanvas");

 				const background = new createjs.Shape();
 				background.graphics.beginFill('black').drawRect(0, 0, 500, 500);
 				stage.addChild(background);
 				*/

 				canvas.style.width = '100vmin';
 				canvas.style.height = '100vmin';

 				let clock = 0;

 				const bullets = new Set();

 				let selfX = 250;
 				let selfY = 400;

 				const self = null; // 何か書く

 				let dead = false;

 				const moves = {
 					37: {x: -1, y: 0},
 					38: {x: 0, y: -1},
 					39: {x: 1, y: 0},
 					40: {x: 0, y: 1},
 				};

 				const pressedKeys = new Map();

 				window.addEventListener('keydown', (event) => {
 					pressedKeys.set(event.which, true);
 				});

 				window.addEventListener('keyup', (event) => {
 					pressedKeys.set(event.which, false);
 				});

 				const distance = (xA, xB, yA, yB) => (
 					Math.sqrt((xA - xB) * (xA - xB) + (yA - yB) * (yA - yB))
 				);

 				setInterval(() => {
 					clock++;

 					// 弾を動かす
 					for (const bullet of bullets) {
 						bullet.step();
 					}

 					// 弾を射出する
 					[0, 1].forEach(i => {
 						const newBullet = new Bullet({
 							x: 250,
 							y: 250,
 							angle: ((clock * 2 + i) * 137 / 360) * Math.PI * 2,
 						});
 						bullets.add(newBullet);
 					});

 					// 自機を移動する
 					[37, 38, 39, 40].forEach((keycode) => {
 						if (pressedKeys.get(keycode) && !dead) {
 							const move = moves[keycode];
 							selfX += move.x * 3;
 							selfY += move.y * 3;
 							selfX = Math.max(0, Math.min(selfX, 500));
 							selfY = Math.max(0, Math.min(selfY, 500));

 							// 何か書く
 						}
 					});

 					// 当たり判定
 					for (const bullet of bullets) {
 						const isIntersects = false; // 何か書く
 						if (!dead && isIntersects) {
 							// Game Over
 							// 何か書く

 							dead = true;
 						}
 					}

 					// 画面更新
 					// paper.jsの場合
 					// paper.view.draw();
 					// Two.jsの場合
 					// two.update();
 					// EaselJSの場合
 					// stage.update();
 				}, 1000 / 30);
 			});
 		</script>
 	</head>
 	<body>
 		<canvas id="paper" width="500" height="500" style="display: block; margin: auto"></canvas>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>SVG Shooting</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-core.min.js"></script>
	<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.js"></script>
	<style>
	body {
	margin: 0;
	}

	svg {
	display: block;
	width: 100vmin;
	height: 100vmin;
	margin: 0 auto;
	}
	</style>
	<script>
	document.addEventListener('DOMContentLoaded', () => {
	class Bullet {
	constructor({x, y, angle}) {
	this.x = x;
	this.y = y;
	this.v = 4;
	this.angle = angle;

	this.paper = null; // 何か書く
	}

	step() {
	this.x += Math.cos(this.angle) * this.v;
	this.y += Math.sin(this.angle) * this.v;
	// 何か書く

	// 画面外判定
	if (this.x < 0 \|\| 500 < this.x \|\| this.y < 0 \|\| 500 < this.y) {
	// 何か書く
	bullets.delete(this);
	}
	}
	}

	const canvas = document.getElementById('paper');

	// 背景描画
	// paper.jsの場合
	/*
	paper.setup(canvas);

	const background = new paper.Path.Rectangle({
	from: [0, 0],
	to: [500, 500],
	fillColor: 'black',
	});
	*/

	// Two.jsの場合
	/*
	const two = new Two({width: 500, height: 500}).appendTo(canvas);

	const background = two.makeRectangle(0, 0, 500, 500);
	background.fill = 'black';
	background.noStroke();
	*/

	// EaselJSの場合
	/*
	const stage = new createjs.Stage("demoCanvas");

	const background = new createjs.Shape();
	background.graphics.beginFill('black').drawRect(0, 0, 500, 500);
	stage.addChild(background);
	*/

	canvas.style.width = '100vmin';
	canvas.style.height = '100vmin';

	let clock = 0;

	const bullets = new Set();

	let selfX = 250;
	let selfY = 400;

	const self = null; // 何か書く

	let dead = false;

	const moves = {
	37: {x: -1, y: 0},
	38: {x: 0, y: -1},
	39: {x: 1, y: 0},
	40: {x: 0, y: 1},
	};

	const pressedKeys = new Map();

	window.addEventListener('keydown', (event) => {
	pressedKeys.set(event.which, true);
	});

	window.addEventListener('keyup', (event) => {
	pressedKeys.set(event.which, false);
	});

	const distance = (xA, xB, yA, yB) => (
	Math.sqrt((xA - xB) * (xA - xB) + (yA - yB) * (yA - yB))
	);

	setInterval(() => {
	clock++;

	// 弾を動かす
	for (const bullet of bullets) {
	bullet.step();
	}

	// 弾を射出する
	[0, 1].forEach(i => {
	const newBullet = new Bullet({
	x: 250,
	y: 250,
	angle: ((clock * 2 + i) * 137 / 360) * Math.PI * 2,
	});
	bullets.add(newBullet);
	});

	// 自機を移動する
	[37, 38, 39, 40].forEach((keycode) => {
	if (pressedKeys.get(keycode) && !dead) {
	const move = moves[keycode];
	selfX += move.x * 3;
	selfY += move.y * 3;
	selfX = Math.max(0, Math.min(selfX, 500));
	selfY = Math.max(0, Math.min(selfY, 500));

	// 何か書く
	}
	});

	// 当たり判定
	for (const bullet of bullets) {
	const isIntersects = false; // 何か書く
	if (!dead && isIntersects) {
	// Game Over
	// 何か書く

	dead = true;
	}
	}

	// 画面更新
	// paper.jsの場合
	// paper.view.draw();
	// Two.jsの場合
	// two.update();
	// EaselJSの場合
	// stage.update();
	}, 1000 / 30);
	});
	</script>
	</head>
	<body>
	<canvas id="paper" width="500" height="500" style="display: block; margin: auto"></canvas>
	</body>
	</html>
No results found