HTML5でパズルゲームの作り方を現役エンジニアが解説【初心者向け】
初心者向けにHTML5でパズルゲームの作り方について解説しています。ここではJavaScriptを使ってスライドパズルを作成する例を紹介します。動作の流れと、CSSでスタイルを指定する方法についても見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTML5でパズルゲームの作り方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
パズルゲームの作り方について詳しく説明していくね！
お願いします！
目次
HTMLゲームについて
ブラウザでゲームを実行するときはHTML上で動くように開発する必要があります。ここでは、ブラウザ上で動作するゲームを全般的にHTMLゲームとします。昔はFlashで開発したゲームがWeb上で公開されていました。しかし、Flashには脆弱性があることなどから2020年末にサポートが終了します。
その一方でFlashに代わる技術としてJavaScriptのSDKが充実したり、HTML5の登場によりJavaScriptで様々なゲームを開発できるようになりました。
パズルゲームについて
パズルゲームには様々な種類が存在します。最近ではスマホゲームでもパズル要素を取り入れたゲームが多く存在します。ここではHTMLで作られたパズルゲームをいくつか紹介します。
テトリス
パズルゲームの中で有名なものがテトリスです。落ち物パズルの代表でブロックを組み合わせて列を揃えて消すというルールです。テトリスはオンライン上で色んなサイトが公開しています。
https://tetris.com/play-tetris
ケスケス
こちらはスマホゲームによくあるパターンのゲームです。同じ色のブロックを小さい数字から順に消していくルールのゲームです。遊んでいくうちに時間が忘れていきそうです。
https://www.afsgames.com/del.htm
スライドパズル
縁日や駄菓子屋さんでよく見かける15パズルです。4×4の盤面に15個ある数字のピースをスライドさせて順番に並び替えるゲームです。パズルゲームの定番であり、少ない手数でクリアさせるためにはとても頭を使います。
https://www.afsgames.com/15puzzle.htm
パズルゲームを作ってみよう
それでは、実際にパズルゲームを作ってみましょう。パズルゲームはアルゴリズムが複雑でコード量が多くなりますが、今回は比較的シンプルなスライドパズルを作ります。作るものは先程紹介した15パズルをよりシンプルにした8パズルです。
今回はJavaScriptのコード量が多いため、ファイルを分けて紹介します。まずはHTMLを用意します。以下のソースコードをコピーして以下のディレクトリに保存します。
<!DOCTYPE html> <html> <head> <title>サンプルパズル</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">] <link rel="stylesheet" href="layout.css"> <script type="text/javascript" src="puzzle.js"></script> </head> <body> <center> <h1>8パズル</h1> <div id="puzzle"> <button id="t0" class="btn btn-secondary tile" onclick="pushed(this.id)" > </button> <button id="t1" class="btn btn-secondary tile" onclick="pushed(this.id)" >1</button> <button id="t2" class="btn btn-secondary tile" onclick="pushed(this.id)" >2</button><br /> <button id="t3" class="btn btn-secondary tile" onclick="pushed(this.id)" >3</button> <button id="t4" class="btn btn-secondary tile" onclick="pushed(this.id)" >4</button> <button id="t5" class="btn btn-secondary tile" onclick="pushed(this.id)" >5</button><br /> <button id="t6" class="btn btn-secondary tile" onclick="pushed(this.id)" >6</button> <button id="t7" class="btn btn-secondary tile" onclick="pushed(this.id)" >7</button> <button id="t8" class="btn btn-secondary tile" onclick="pushed(this.id)" >8</button> </div> <br> <button class="btn btn-primary" onclick="randomTaslar()">シャッフル</button> </center> </body> </html>
let taslar = ["t0","t1","t2","t3","t4","t5","t6","t7","t8"]
function tasBul(val){
for (i = 0; i < taslar.length; i++) {
if(document.getElementById(taslar[i]).firstChild.data == val){
return(taslar[i])
}
}
}
function degisme(id, bosTasId){
let yakinlar = []
if([2,5,8].includes(parseInt(bosTasId[1]))){
yakinlar = [+3,-3,-1]
}else if([0,3,6].includes(parseInt(bosTasId[1]))){
yakinlar = [+3,+1,-3]
}else{
yakinlar = [+3,+1,-3,-1]
}
for(i = 0; i < taslar.length; i++){
if(parseInt(bosTasId[1])+parseInt(yakinlar[i]) == parseInt(id[1])){
return(true);
}
}
return(false)
}
function pushed(id){
var btn = document.getElementById(id);
if (btn.firstChild.data!=" "){
bosTasId = tasBul(" ")
if(degisme(id, bosTasId) == false) return;
document.getElementById(bosTasId).firstChild.data = btn.firstChild.data;
btn.firstChild.data = " "
}
}
function solvable(rndList){
var count = 0;
for(i=0;i<rndList.length-1;i++){
if(rndList[i] == 0){
continue;
}
for(j=i+1;j<rndList.length;j++){
if(rndList[j] == 0){
continue;
}else if(rndList[i]>rndList[j]){
count++;
}
}
}
if(count%2 == 0){
return(true);
}else{
return(false);
}
}
function randomTaslar(){
var rndList = []
while(true){
rndList = []
while(rndList.length < 9){
var randomnumber = Math.ceil(Math.random()*9)-1
if(rndList.indexOf(randomnumber) > -1) continue;
rndList[rndList.length] = randomnumber;
}
if(solvable(rndList)){
break;
}
}
for (i = 0; i < taslar.length; i++) {
if(rndList[i] == 0){
val = " "
}else{
val = rndList[i].toString()
}
document.getElementById(taslar[i]).firstChild.data = val
}
}
.tile {
width:100px;
height:100px;
font-family:arial black;
font-size: x-large;
}
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| メンター 三浦
モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はpython, Node.js |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
