はじめに
CodePenは、Web開発者向けのオンラインコードエディターであり、HTML、CSS、JavaScriptを簡単に試すことができるプラットフォームです。ここでは、CodePenの基本的な使い方とゲーム作成に向けた準備方法を紹介します。
手順
-
CodePenのアカウント作成
- まず、CodePenを利用するためにはアカウントを作成する必要があります。以下の手順に従ってください。
- CodePenの公式サイトにアクセスします。
- 右上の「Sign Up」ボタンをクリックします。
- メールアドレス、ユーザー名、パスワードを入力して「Create Free Account」をクリックします。
- 登録したメールアドレスに確認メールが届くので、メール内のリンクをクリックしてアカウントを有効化します。
-
CodePenの基本的な使い方
- ペンの作成
- CodePenでは、各プロジェクトを「Pen」と呼びます。新しいペンを作成してコードを書いてみましょう。
- 画面右上の「New Pen」ボタンをクリックします。
- 新しいペンのエディター画面が表示されます。ここで、HTML、CSS、JavaScriptを記述することができます。
- コードの入力とプレビュー
- エディターには3つの主要なセクションがあります。
- HTML: ゲームの基本構造を記述します。
- CSS: ゲームのスタイルやデザインを設定します。
- JavaScript: ゲームの動作やロジックを記述します。
- コードを入力すると、画面下部にリアルタイムでプレビューが表示されます。これにより、コードを変更した際の結果をすぐに確認することができます。
試しにボタンを配置して動かしてみる
HTMLに以下のコードを貼り付けて実験してみましょう
> <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Game</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Test Game</h1>
<button id="colorButton">Change Background Color</button>
<script>
document.getElementById('colorButton').addEventListener('click', function() {
// ランダムな背景色を生成
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
document.body.style.backgroundColor = randomColor;
});
</script>
</body>
</html>
保存と共有
コードを書き終えたら、画面右上の「Save」ボタンをクリックしてペンを保存します。
保存したペンは、他のユーザーと簡単に共有できます。右上の「Share」ボタンをクリックすると、ペンのURLが表示されます。このURLを共有することで、他の人もあなたのペンを見ることができます。
そして、単純にShareすると、コードをエディットする黒い画面も一緒にシェアしちゃいますが、これを隠して作った画面だけをシェアするには以下の手順にします。
-
ペンを保存:
右上の「Save」ボタンをクリック。 -
フルページビューを開く:
ペンの上部にある「Change View」ボタンをクリック。
「Full Page」または「Debug Mode」を選択。 -
URLをコピー:
フルページビューが開いたら、ブラウザのアドレスバーのURLをコピー。 -
モバイルでURLを開く:
コピーしたURLをモバイルのブラウザで開く。
これで、コードエディタを閉じた状態でモバイルから作ったゲームを楽しめます！
初めてのゲーム作成！！！
チュートリアル: 簡単なゲームのセットアップ
ここでは、簡単なクリックゲームのセットアップ方法を説明します。ボタンを押すと、ゲームのスコアがカウントアップされる！と言うゲームです。コピペしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Game</title>
</head>
<body>
<h1>Click Game</h1>
<button id="clickMe">Click Me!</button>
<p id="score">Score: 0</p>
</body>
</html>
body {
text-align: center;
font-family: Arial, sans-serif;
}
button {
padding: 10px 20px;
font-size: 16px;
}
p {
font-size: 18px;
}
let score = 0;
document.getElementById('clickMe').addEventListener('click', function() {
score++;
document.getElementById('score').innerText = 'Score: ' + score;
});
このコードをそれぞれのセクションに入力し、保存してプレビューを確認してください。ボタンをクリックするとスコアが増加する簡単なゲームが動作するはずです。
シェアしてみる
シェアするときはタイトルをいい感じに変えてから。
まとめ
この記事では、CodePenの基本的な使い方と簡単なゲームのセットアップ方法を紹介しました。
次回は、ChatGPTを使ってゲームを作成するコツについて詳しく説明します。
リンク
今日の、箸休めコンテンツ：ゲーム制作をChatGPTでやってみるシリーズです。
ChatGPTを使って簡単なゲームを作る①: ゲーム作成・全体概要
ChatGPTを使って簡単なゲームを作る②: CodePenの利用開始
ChatGPTを使って簡単なゲームを作る③: ChatGPTにブロック崩しゲームを作ってもらう編
ChatGPTを使って簡単なゲームを作る④: ChatGPTに「ちーかわ」ゲームを作ってもらう編
ChatGPTを使って簡単なゲームを作る⑤: ChatGPTに「ベンゼン環・神経衰弱」ゲームを作ってもらう編