<!DOCTYPE html>
<html>
<head>
<title>
<!DOCTYPE html>
<html>
<head>
<title>SaturnVoyager</title>
<meta charset="utf-8" />
<style>
#space {
width: 800px; height: 800px;
touch-action: none;
}
#START {
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script>
"use strict"
var stars = [], keymap = [];
var ctx, ship, score = 0, speed = 25, timer = NaN;
function Ship(x, y) {
this.x = x;
this.y = y;
this.keydown = function (e) {
keymap[e.keyCode] = true;
}
this.keyup = function (e) {
keymap[e.keyCode] = false;
}
this.move = function () {
if (keymap[37]) { //左
this.x -= 30;
} else if (keymap[39]) {
this.x += 30; //右
}
if (keymap[38]) {
this.y -= 30; //上
} else if (keymap[40]) {
this.y += 30; //下
}
this.x = Math.max(-800, Math.min(800, this.x));
this.y = Math.max(-800, Math.min(800, this.y));
}
}
function random(v) {
return Math.floor(Math.random() * v);
}
function init() {
for (var i = 0; i < 200; i++) {
stars.push({
x: random(800 * 4) - 1600,
y: random(800 * 4) - 1600,
z: random(4095),
r: random(360),
w: random(10)-5
});
}
ship = new Ship(200, 200);
onkeydown = ship.keydown;
onkeyup = ship.keyup;
var space = document.getElementById("space");
ctx = space.getContext("2d")
ctx.font = "20px Arial";
repaint();
}
function go() {
var space = document.getElementById("space")
space.onmousedown = mymousedown;
space.onmouseup = mymouseup;
space.oncontextmenu = function (e) { e.preventDefault(); };
space.addEventListener('touchstart', mymousedown);
space.addEventListener('touchend', mymouseup);
document.body.addEventListener('touchmove', function (event) {
event.preventDefeult();
}, false);
document.getElementById("START").style.display = "none";
document.getElementById("bgm").play();
timer = setInterval(tick, 50);
}
function mymousedown(e) {
var mouseX = (!isNaN(e.offsetX) ? e.offsetX : e.touches[0].clientX) - 400;
var mouseY = (!isNaN(e.offsetY) ? e.offsetY : e.touches[0].clientY) - 400;
if (Math.abs(mouseX) > Math.abs(mouseY)) {
keymap[mouseX > 0 ? 37 : 39] = true;
} else {
keymap[mouseY > 0 ? 38 : 40] = true;
}
}
function mymouseup(e) {
keymap = [];
}
function tick() {
for (var i = 0; i < 200; i++) {
var star = stars[i];
star.z -= speed;
star.r += star.w;
if (star.z < 64) {
if (Math.abs(star.x - ship.x) < 50 &&
Math.abs(star.y - ship.y) < 50) {
//衝突→ゲームオーバー
clearInterval(timer);
timer = NaN;
document.getElementById("bgm").pause();
break;
}
//通過→奥へ再配置
star.x = random(800 * 4) - 1600;
star.y = random(800 * 4) - 1600;
star.z = 4095;
}
}
if (score++ % 10 == 0) {
speed ++;
}
ship.move();
repaint();
}
function repaint() {
ctx.fillStyle = "black"
ctx.fillRect(0, 0, 800, 800);
stars.sort(function (a, b) {
return b.z -a.z;
});
//隕石の描画
for (var i = 0; i < 200 ; i++) {
var star = stars[i];
var z = star.z;
var x = ((star.x - ship.x) << 9) / z + 400;
var y = ((star.y - ship.y) << 9) / z + 400;
var size = (50 << 9) / z;
ctx.save();
ctx.translate(x, y);
ctx.globalAlpha = 1- (z / 4096);
ctx.rotate(star.r * Math.PI / 180);
ctx.drawImage(rockImg, -size / 2, -size / 2,size, size);
ctx.restore();
}
//スコア
ctx.drawImage(scope, 0, 0, 800, 800);
ctx.fillStyle = "green";
ctx.fillText(('000000' + score).slice(-7), 670, 60);
if (isNaN(timer)) {
ctx.fillText("GAME OVER", 315, 350);
}
}
</script>
</head>
<body onload="init()">
<!--Thanks to http://takao-suenobu.com/ & http://dova-s.jp/ -->
<audio src="Escape.mp3" id="bgm" loop="loop"></audio>
<canvas id="space" width=800" height="800"></canvas>
<img id="START" src="start.png" onclick="go()"></br>
<img id="rockImg" src="rock.png" style="display:none" />
<img id="scope" src="scope.png" width="1000" height="1000"style="display:none" />
</body>
</html>
