はじめに
こんにちは！@70days_jsです。
インベーダーゲームを作ろうとしました。
失敗して、ビームを出すだけのゲームになってしまいました。
インベーダーはいません。
今日は55日目。(2019/12/12)
よろしくお願いします。
サイトURL
やったこと
ビームを出すゲームを作りました。(gif)↓
gifにある通り、赤いのが自分で、青いのがビームです。
矢印キーで動きます。（←で左、→で右）
エンターでビームを出します。
端まで行くとそれ以上いけないことを示すために機体の色が青くなります。
html（全文）↓
<body>
<div id="wrapper">
<div id="me"></div>
</div>
</body>
薄い赤の全体部分がid="wrapper"です。
id="me"はビームを出す赤い機体です。
css（全文）↓
body {
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
# wrapper {
width: 500px;
height: 500px;
background-color: rgba(150, 50, 150, 0.3);
position: relative;
overflow: hidden;
}
# me {
width: 50px;
height: 25px;
background-color: red;
position: absolute;
bottom: 0;
left: 220px;
}
.beem {
width: 10px;
height: 50px;
background-color: aqua;
position: absolute;
bottom: 25px;
left: 0px;
animation: go 1s ease 0.5s;
opacity: 0;
}
@keyframes go {
0% {
transform: translateY(0);
}
1% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-450px);
opacity: 1;
}
}
ビームの移動はアニメーションです。
JavaScript（全文）↓
let me = document.getElementById("me");
let wrapper = document.getElementById("wrapper");
document.addEventListener("keydown", logKey);
let kyori = 220;
let idou = 5;
function logKey(e) {
let myKeyCode = e.keyCode;
// ← キー
if (myKeyCode === 37) {
// 左端
if (kyori < 5) {
me.style.backgroundColor = "blue";
} else {
me.style.backgroundColor = "red";
me.style.left = (kyori -= idou) + "px";
kyori -= 5;
}
// → キー
} else if (myKeyCode === 39) {
//右端
if (kyori > 445) {
me.style.backgroundColor = "blue";
} else {
me.style.backgroundColor = "red";
me.style.left = (kyori += idou) + "px";
kyori += 5;
}
}
if (myKeyCode === 32) {
let div = document.createElement("div");
div.setAttribute("class", "beem");
div.style.left = kyori + 25 + "px";
wrapper.appendChild(div);
}
}
keyCodeで矢印とエンターを確認しています。
エンターを押したらdivを作成してビームのクラスをつけると、エンターを押してビームが出るように見えます。
感想
ビームをcssで実装してしまったので、インベーダーを作ってもpositionを取れないと気づきましたが時すでに遅し。
軽い気持ちで書き始めましたが、ちゃんと前もって考えるべきでした。
同じ轍を踏んでしまった。年末までにインベーダーゲームは絶対に作ります。
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。