やっぱりJavaScript! - ゲームを作る - 1

2023年7月28日 05:39

いろんなプログラム言語がありますが、動く画面、動く動作の命令を両方繋いでやることはHTMLで画面構成することができるJavaScriptがわかりやすいと思います！

わかりやすい動画を公開していただいているので見ながら自分でもコードを書いて、自分の理解不足などでわかりにくい部分をコメントしながらやっていきます。

ゲーム作成方法としては"Canvas"を使うことが多いような気がしますが、ここではHTMLタグをJavaScriptで作りながら動かしています。こちらの方がHTML、CSSが得意な人には取っ付きやすいのではと思います。HTML に直にCSSを当てているのでその辺も直感的に理解できるかも。

今回はVSCodeで書いていきます。基本のHTMLは"!"と打ってreturnすれば簡単に作ってくれます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>

</body>
</html>

JavaScript のみで作っていくのでbody要素の中にscriptタグを直接入れていきます。

ゲームの盤面となる黒い画面を作ります。全体としてはこんな感じになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>

    <script>

const width = 300;
const height = 400;

let container = null;

const init = () =>{

container = document.createElement("div");
container.style.position = "absolute"
container.style.width = `${width}px`;
container.style.height = `${height}px`;
container.style.backgroundColor = "#202";
document.body.appendChild(container);

}

window.onload = () =>{
    init()
}

    </script>

</body>
</html>

最初に必要な関数を作り

const width = 300;
const height = 400;

let container = null;

実際の描画のコードは

container = document.createElement("div");
container.style.position = "absolute"
container.style.width = `${width}px`;
container.style.height = `${height}px`;
container.style.backgroundColor = "#202";
document.body.appendChild(container);

となっていて、タグを作りCSSで場所、大きさ、色などスタイルを整えていきます。
これを"init()"関数にして"window.onload"の命令でブラウザ表示させます。

と表示されます。

そして自機を作っていきます。手っ取り早く絵文字で実装です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
</head>
<body>
    <script>
const width = 300;
const height = 400;

let container = null;

let heroEl = null;
let heroSize = width / 10;
let heroX = width / 2;
let heroY = height / 2;

const update = () =>{
heroEl.style.left = `${ heroX - heroSize / 2}px`;
heroEl.style.top = `${ heroY - heroSize / 2}px`;
};

const init = () =>{
container = document.createElement("div");
container.style.position = "absolute"
container.style.width = `${width}px`;
container.style.height = `${height}px`;
container.style.backgroundColor = "#202";
document.body.appendChild(container);

heroEl = document.createElement("div");;
heroEl.style.position = "absolute"
heroEl.style.width = `${heroSize}px`;
heroEl.style.height = `${heroSize}px`;
heroEl.style.fontSize = `${heroSize}px`;
heroEl.style.backgroundColor = "#f00";
heroEl.textContent = "🎃";
container.appendChild(heroEl);
update();
}

window.onload = () =>{
    init()
}

    </script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？