スライドパズルゲームの作り方
⭐️ソースコード解説⭐️
<!DOCTYPE html>
<html>
<head>
<title>Slide Puzzle Game</title>
<style>
.game-board {
width: 300px;
height: 300px;
position: relative;
}
.piece {
width: 100px;
height: 100px;
position: absolute;
box-sizing: border-box;
border: 1px solid #000 ;
background-size: cover;
}
.button {
font-size: 20px;
padding: 10px 20px;
margin: 20px 0;
border: none;
background-color: #ff6347 ;
color: white;
border-radius: 5px;
cursor: pointer;
}
HTML部分:
HTML部分はゲームボード(game-boardというidを持つdiv)と、シャッフル機能を提供するボタン(shuffleButtonというidを持つbutton)を定義します。
CSS部分:
スタイルシートでは、ゲームのビジュアルを定義します。具体的には以下のようなスタイルを適用します。
.game-board: ゲームボードを定義するクラスです。ゲームボードの幅と高さは300pxで、位置はページ上の相対位置です。
.piece: パズルの各ピースを表現するクラスです。各ピースは100px四方で、位置はgame-board内の絶対位置です。ボックスモデルはコンテンツボックスを基準にします。境界線は黒で1pxです。背景画像はピースサイズに合わせて調整されます。
.button: ボタンのスタイルを定義するクラスです。文字サイズは20px、パディングは上下に10px、左右に20pxで、マージンは上下に20pxです。境界線はなく、背景色はトマト色(#ff6347)、文字色は白です。ボタンの角は少し丸く(半径5px)、カーソルが上に来るとポインタになります。
JavaScript部分:
JavaScript部分では、ゲームのロジックを処理します。ピースの画像URLを配列に保存し、ゲームボードの状態を2次元配列で管理します。さらに、各ピースがクリックされたときの振る舞い、ゲームボードの更新、ピースのシャッフルといった関数を定義します。
</style>
</head>
<body>
<div id="game-board" class="game-board"></div>
<button class="button" id="shuffleButton">Shuffle</button>
ここから先は
¥ 1,100
この記事が気に入ったらサポートをしてみませんか？