Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
TSG 第14回Web分科会 実習
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.