Invader 01
このコースはChris Courses - Space Invadersのコードを参考に作りました。
セットアップをしよう
準備
1. VS Code の Server プラグインをセットアップしよう
Live Serverという VS Code のプラグインを使用します。
Serverとは？
サーバは
index.htmlや.jsファイルを Chrome などのブラウザで見られるようにしてくれるものです。まさにファイルを Serve（提供）してくれるものです。
- まずは VS Code を開いた後、
index.htmlを開きます。
ViewメニューからExtensionsを選びます。
- 検索バーに
Live Serverと入力し、下記の Extension が表示されたらインストールします。
ViewメニューからCommand Paletteを選択します。
- 入力バーに
live serverと入力し、Live Server: Open with Live Serverを選択します。
- 選択サーバが起動します。ブラウザが表示され、これで準備ができました。
2. 各ファイルを準備しよう
- 以下のファイルを作成しましょう。
index.html: HTML ファイル。ブラウザに読み込まれる。index.js: Javascript ファイル。HTML に動きを与える。style.css: CSS ファイル。HTML の見た目を変える
index.htmlのポイント
type="module"にすることにより、.jsファイルをimportするようにできます。 これにすることでサーバを立ち上げなければいけなくなります。
<script type="module" src="index.js"></script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SPACE INVADER</title>
<!-- INDEX.JS -->
<script type="module" src="index.js"></script>
<!-- STYLE.CSS -->
<link rel="stylesheet" href="style.css" />
<style></style>
</head>
<body>
<div id="parentDiv">
<canvas></canvas>
</div>
</body>
</html>
index.jsのポイント
globalThisとは？
globalThisはwindowと同じようなグローバルオブジェクトです。グローバルオブジェクトというのは、プログラムのどこからでも呼び出せる変数のことです。この変数（オブジェクト）に様々な値を割り当てることができます。
.addEventListener()の確認
addEventListenerで設定されているkeyup,keydownがconsole.log()で表示されるのを確認しましょう。a,d,SPACEを押すとconsole.log()に表示されます。
// -------------------------------------------
// SETUP CANVAS
// -------------------------------------------
// globalThisはどのファイルでも共有できるグローバル変数
// どのファイルでもその変数を使いたい時に追加する
// globalThisにcanvasを割り当てる
// globalThisにcanvasのcontextを割り当てる
globalThis.canvas = document.querySelector("canvas")
globalThis.ctx = globalThis.canvas.getContext("2d")
// ゲーム画面のサイズを固定
globalThis.canvas.width = 1024
globalThis.canvas.height = 576
// -------------------------------------------
// VARIABLES
// -------------------------------------------
// 各キーの押されている(pressed)状態を保管する
globalThis.keys = {
a: {
pressed: false,
},
d: {
pressed: false,
},
space: {
pressed: false,
},
}
// KEYDOWN -------------------------
globalThis.addEventListener("keydown", ({ key }) => {
switch (key) {
case "a": {
globalThis.keys.a.pressed = true
console.log("A keydown!")
break
}
case "d": {
globalThis.keys.d.pressed = true
console.log("D keydown!")
break
}
case " ": {
globalThis.keys.space.pressed = true
console.log("SPACE keydown!")
}
}
})
// KEYUP -------------------------
globalThis.addEventListener("keyup", ({ key }) => {
switch (key) {
case "a": {
globalThis.keys.a.pressed = false
console.log("A keyup!")
break
}
case "d": {
globalThis.keys.d.pressed = false
console.log("D keyup!")
break
}
case " ": {
globalThis.keys.space.pressed = false
console.log("SPACE keyup!")
break
}
}
})
style.cssの準備
- 以下のコードを
style.cssファイルに貼り付けましょう。
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
font-family: sans-serif;
font-size: 14px;
}
#parentDiv {
position: relative;
}
#scoreContainer {
position: absolute;
z-index: 10;
color: white;
left: 10px;
top: 10px;
margin: 0;
display: none;
}
#startScreen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(
90deg,
rgba(18, 16, 52, 1) 0%,
rgba(22, 17, 36, 1) 50%,
rgba(0, 0, 0, 1) 100%
);
z-index: 20;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
text-align: center;
}
button {
font-size: 1.5rem;
height: 80px;
width: 260px;
background: linear-gradient(
0deg,
rgba(27, 22, 68, 1) 0%,
rgba(20, 67, 126, 1) 100%
);
border: none;
color: white;
border-radius: 3px;
cursor: pointer;
box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.5), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
}
button:hover {
opacity: 0.8;
}
button:active {
opacity: 0.6;
}
#restartScreen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(
90deg,
rgba(18, 16, 52, 1) 0%,
rgba(22, 17, 36, 1) 50%,
rgba(0, 0, 0, 1) 100%
);
z-index: 20;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
h1 {
color: white;
font-size: 3rem;
}
assetsフォルダの準備
assetsフォルダを作成しましょう。assetsフォルダの中に入れるship.pngとinvader.pngをダウンロードしましょう。
