写真の編集。その時間の捻出方法の模索

var ralph; // ラルフ
var ralphDirection; // ラルフの向き
var ralphMode; // ラルフのアクションモード
var door; // ドアのスプライト
var keyCount; // カギを拾った数
var keyGroup; // カギのグループ
var stoneGroup; // トゲ岩のグループ
var yellowBlockGroup; // 壊れるブロックのグループ

var crashAnimation; // 壊れるブロックのアニメーション

var punchSound; // パンチ音
var jumpSound; // ジャンプ音
var pickupSound; // カギを拾った音
var crashSound; // ブロックを壊した音
var doorOpeningSound; // ドアが開く時の曲

// ラルフをコントロールする
function ralphControl() {
//＝＝＝＝＝＝＝＝移動中＝＝＝＝＝＝＝＝
if (ralphMode == 'move') {
// 移動と向き
if (keyDown('RIGHT')) {
// 右に移動
ralph.velocity.x = 6;
// 右向きという情報
ralphDirection = 'right';
} else if (keyDown('LEFT')) {
// 左に移動
ralph.velocity.x = -6;
// 左向きという情報
ralphDirection = 'left';
}
else {
// 左右キーが押されていなければ横移動なし
ralph.velocity.x = 0;
}

if (ralphDirection == 'right') {
// 右向きの移動アニメーション
ralph.changeAnimation('moveRight');
} else {
// 左向きの移動アニメーション
ralph.changeAnimation('moveLeft');
}

// 移動中にスペースキーを押したらパンチ
if (keyDown('SPACE')) {
// パンチモードに変える
ralphMode = 'punch';

var punch;
if (ralphDirection == 'right') {
// 右向きのパンチアニメーション
ralph.changeAnimation('punchRight');
// ラルフの右側にパンチのスプライトを作る
punch = createSprite(ralph.position.x + 30, ralph.position.y + 10, 30, 30);
} else {
// 左向きのパンチアニメーション
ralph.changeAnimation('punchLeft');
// ラルフの左側にパンチのスプライトを作る
punch = createSprite(ralph.position.x - 30, ralph.position.y + 10, 30, 30);
}

// パンチと黄色いブロックが重なったらcrash関数が呼ばれる
punch.overlap(yellowBlockGroup, crash);
// 判定が終わったらパンチを消す
punch.remove();

// パンチ音
punchSound.play();
}
}

//＝＝＝＝＝＝＝＝パンチ中＝＝＝＝＝＝＝＝
if (ralphMode == 'punch') {
// パンチ中は横移動しない
ralph.velocity.x = 0;

if (!keyDown('SPACE')) {
// スペースキーを離したら移動モードに変わる
ralphMode = 'move';
}
}


//＝＝＝＝＝＝＝＝移動中とパンチ中共通＝＝＝＝＝＝＝＝
//重力
ralph.velocity.y += 1;

// 着地している時
if (ralph.touching.bottom) {
if (keyDown('UP')) {
// 上キーが押され、速度が下向きの時に
if (ralph.velocity.y > 0) {
// 速度を上向きにする
ralph.velocity.y = -15;
// ジャンプ音
jumpSound.play();
}
} else {
// 着地中は縦の速度ゼロ
ralph.velocity.y = 0;
}
}

// ラルフとカギが重なったらpickup関数が呼ばれる
ralph.overlap(keyGroup, pickup);

// ドアが開いている？
if (door.getAnimationLabel() == 'opened') {
// 開いたドアに重なったらescape関数が呼ばれる
ralph.overlap(door, escape);
}
}

// カギを拾う
function pickup(ralph, key) {
keyCount++;
if (keyCount == 3) {
// カギを3つ集めたらドアをオープン
door.changeImage('opened');

// ドアオープンの曲
doorOpeningSound.play();
}

// カギを拾った音
pickupSound.play();

// 拾ったカギを消す
key.remove();
}

// ブロックの破壊
function crash(punch, block) {
// ブロックの位置に破片のスプライトを作る
var breakingBlock = createSprite(block.position.x, block.position.y);
breakingBlock.addAnimation('crash', crashAnimation);

// 壊した音
crashSound.play();

// ブロックを消す
block.remove();
}

// トゲ岩のコントロール
var stoneTimer = 0;
var stoneDirection = 'down';
var stoneVelocity;
function stoneControl() {
// 時間でコントロール
stoneTimer++;
if (stoneTimer == 60) {
// トゲ石が下がり始める
stoneDirection = 'down';
}
if (stoneTimer == 180) {
// トゲ石が上がり始める
stoneDirection = 'up';
stoneTimer = 0;
}

// 移動
if (stoneDirection == 'up') {
// 上昇
stoneVelocity = -10;
}
else {
// 下降
stoneVelocity = 20;
}

// 全てのトゲ岩に上下の速度をセット
for (var i = 0; i < stoneGroup.length; i++) {
stoneGroup[i].velocity.y = stoneVelocity;
}
}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

// グループ
var blueBlockGroup;
var allBlockGroup;

// 画像
var backgroundImage;
var blueBlockImage;
var yellowBlockImage;
var stoneImage;
var doorClosedImage;
var doorOpenedImage;
var keyImage;
var gameoverImage;
var escapedImage;

// アニメーション
var ralphMoveRightAnimation;
var ralphMoveLeftAnimation;
var ralphPunchRightAnimation;
var ralphPunchLeftAnimation;

// 音
var bgmSound;
var escapedSound;
var gameoverSound;

// その他
var gameMode;

function preload() {
// 画像のロード
backgroundImage = loadImage('background.png');
blueBlockImage = loadImage('stage.png');
yellowBlockImage = loadImage('stage_block_0.png');
stoneImage = loadImage('stone.png');
keyImage = loadImage('key.png');
doorClosedImage = loadImage('door_close.png');
doorOpenedImage = loadImage('door_open.png');
gameoverImage = loadImage('game_over.png');
escapedImage = loadImage('game_clear.png');

// アニメーションのロード
ralphMoveRightAnimation = loadAnimation('ralph_right_0.png', 'ralph_right_3.png');
ralphMoveLeftAnimation = loadAnimation('ralph_left_0.png', 'ralph_left_3.png');
ralphPunchRightAnimation = loadAnimation('ralph_punch_right_0.png', 'ralph_punch_right_2.png');
// パンチアニメーションはループさせない
ralphPunchRightAnimation.looping = false;
ralphPunchLeftAnimation = loadAnimation('ralph_punch_left_0.png', 'ralph_punch_left_2.png');
// パンチアニメーションはループさせない
ralphPunchLeftAnimation.looping = false;
crashAnimation = loadAnimation('yellow_block00.png', 'yellow_block07.png');
// 破壊アニメーションはループさせない
crashAnimation.looping = false;

// サウンドのロード
bgmSound = loadSound('bgm.mp3');
gameoverSound = loadSound('gameover.mp3');
escapedSound = loadSound('escaped.mp3');
punchSound = loadSound('punch.mp3');
jumpSound = loadSound('jump.mp3');
pickupSound = loadSound('pickup.mp3');
crashSound = loadSound('crash.mp3');
doorOpeningSound = loadSound('door_open.mp3');
}

function setup() {
createCanvas(50 * 15, 50 * 10);

textAlign(CENTER);
textSize(25);
fill(255);

// ゲームの初期化
gameSetup();
}

function draw() {
// 背景を表示
for (var i = 0; i < 10; i++) {
image(backgroundImage, i * backgroundImage.width - width / 4 + ralph.position.x * 0.7, 0);
}

if (gameMode == 'playing') {
playing();
}

// スプライトを全て表示
drawSprites();

if (gameMode == 'gameover') {
drawGameover();
} else if (gameMode == 'escaped') {
drawEscaped();
sendSuccess();
}
}

// ゲーム全体の初期化
function gameSetup() {
// グループの作成
blueBlockGroup = createGroup();
yellowBlockGroup = createGroup();
allBlockGroup = createGroup();
keyGroup = createGroup();
stoneGroup = createGroup();

for (y = 0; y < stageLayout.length; y++) {
for (x = 0; x < stageLayout[y].length; x++) {
if (stageLayout[y][x] == 1) {
// レンガを作る
var block = createSprite(x * 50 + 25, y * 50 + 25, 50, 50);
block.addImage(blueBlockImage);
block.immovable = true;
blueBlockGroup.add(block);
allBlockGroup.add(block);
} else if (stageLayout[y][x] == 2) {
// ラルフを作る
ralph = createSprite(x * 50 + 25, y * 50 + 25);
ralph.setCollider('rectangle', 0, 0, 50, 60);
ralph.addAnimation('moveRight', ralphMoveRightAnimation);
ralph.addAnimation('moveLeft', ralphMoveLeftAnimation);
ralph.addAnimation('punchRight', ralphPunchRightAnimation);
ralph.addAnimation('punchLeft', ralphPunchLeftAnimation);
} else if (stageLayout[y][x] == 3) {
// トゲ石を作る
var stone = createSprite(x * 50 + 25, y * 50 + 25);
stone.addImage('stone', stoneImage);
stoneGroup.add(stone);
} else if (stageLayout[y][x] == 4) {
// カギを作る
var key = createSprite(x * 50 + 25, y * 50 + 25);
key.addImage(keyImage);
keyGroup.add(key);
} else if (stageLayout[y][x] == 5) {
// ドアを作る
door = createSprite(x * 50 + 25, y * 50 + 25);
door.addImage('closed', doorClosedImage);
door.addImage('opened', doorOpenedImage);
door.setCollider('rectangle', 25, 0, 100, 340);
} else if (stageLayout[y][x] == 6) {
// 壊れるブロックを作る
var block = createSprite(x * 50 + 25, y * 50 + 25, 50, 50);
block.addImage(yellowBlockImage);
block.immovable = true;
yellowBlockGroup.add(block);
allBlockGroup.add(block);
}
}
}

// カギの数をゼロに戻す
keyCount = 0;

// ラルフ初期化
ralphMode = 'move';
ralphDirection = 'right';

// ゲームモードをplayingに戻す
gameMode = 'playing';

}

function playing() {
// カメラがラルフに着いてくる
camera.position.x = ralph.position.x + width / 4;

// ラルフを動かす
ralphControl();

// トゲ石を動かす
stoneControl();

// ラルフとトゲ石が重なったらgameover関数が呼ばれる
ralph.overlap(stoneGroup, gameover);
// ラルフが穴に落ちたらgameover関数が呼ばれる
if (ralph.position.y > height) {
gameover();
}

// ラルフとブロックの当たり判定
ralph.collide(allBlockGroup);

// トゲ石とブロックの当たり判定
stoneGroup.collide(allBlockGroup);
}

// ゲームオーバー
function gameover() {
// モードをgameoverにする
gameMode = 'gameover';

// 脱出の曲を流す
gameoverSound.play();

// 動きを止める
noLoop();
}

// ドアから脱出
function escape() {
// モードをescapedにする
gameMode = 'escaped';

// 脱出の曲を流す
escapedSound.play();

// 動きを止める
noLoop();
}

function drawGameover() {
image(gameoverImage, camera.position.x - 205.5, height / 2 - 20);
text('マウスクリックでプレイスタート', camera.position.x, 330);
}

function drawEscaped() {
image(escapedImage, camera.position.x - 177, height / 2 - 20);
text('マウスクリックでプレイスタート', camera.position.x, 330);
}

function mouseClicked() {
// gameoverかescapedの時に
if (gameMode == 'gameover' || gameMode == 'escaped') {
// スプライトを全て消す
ralph.remove();
door.remove();
blueBlockGroup.removeSprites();
yellowBlockGroup.removeSprites();
keyGroup.removeSprites();
stoneGroup.removeSprites();
allBlockGroup.removeSprites();

gameSetup();
loop();
}
}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

// ステージの設計図
// 0: 空白, 1: 壁・床, 2: ラルフ, 3: トゲ石, 4: カギ, 5: ゴール, 6: 壊れる壁
var stageLayout = [
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];

CSSでレイアウトを横並び表示に変更する（　float　）

Fri, 07 May 2021 21:08:10 +0900

ご覧いただきありがとうございます。

今回はレイアウトを勉強しました。

HTMLで単純に記述しただけでは縦並びになってしまうので

横並びに変更するためのCSSを書きました。

divに対し、floatで並びが横並びのレイアウトになりました。

HTML---------------------------------------

A

B

C

CSS--------------------------------------

body {
background-color: navy;
}

div {
border-style: solid;
border-color: gold;
width: 100px;
margin: 10px;
padding: 30px;
float: left;
border-radius: 30px;
border-width:15px;
background-color: white;
}
h1{
font-size:50px;
text-align:center;
}