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分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| メンター 三浦
モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はpython, Node.js |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
