Geminiがすごいぞ（；^ω^）
Geminiがすごいことに、、、
ChatGPTさんまでなんかあれなことに、、、
ChatGPTさんはアップルのアイフォーン向けのアプリの限定で
リリースしてたと思ったんですがいつのまに、、、
( ﾟДﾟ)y─┛~~
自分もこの画像から、
右と左に歩いているコマ画像をGeminiで作ってみました
それでそれをパラパラ漫画のように表示して横移動する
HTMLのソースを作ってみました。( ﾟДﾟ)y─┛~~
このの４つの画像と下記HTMLファイルを同じフォルダに格納すると
キャラクターが左右に歩き続けます。( ´ー｀)y-~~
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NEET Walk</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#gameArea {
width: 100%;
height: 100vh;
position: relative;
background-color: #f4f4f4;
}
#character {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
background-size: cover;
background-image: url('1.jpg'); /* 初期の画像 */
}
</style>
</head>
<body>
<div id="gameArea">
<div id="character"></div>
</div>
<script>
let character = document.getElementById('character');
let direction = 1; // 1は右、-1は左
let currentImage = 2; // 最初は右向きの画像（3番目の画像）
let images = [
'1.jpg', // 左歩きの画像
'2.jpg', // 左歩きの画像
'3.jpg', // 右歩きの画像
'4.jpg' // 右歩きの画像
];
let posX = 50; // 初期位置（画面中央）
let speed = 0.5; // 移動速度（%単位）
// キャラクターを動かす関数
function moveCharacter() {
// キャラクターの移動（速度を減らして滑らかに）
posX += direction * speed;
// 画像を切り替える（左右に歩く）
if (direction == 1) {
currentImage = (currentImage + 1) % 2 + 2; // 右方向の画像切り替え
} else {
currentImage = (currentImage + 1) % 2; // 左方向の画像切り替え
}
// 画像を背景に設定
character.style.backgroundImage = `url(${images[currentImage]})`;
// キャラクターの位置を更新
character.style.left = `${posX}%`;
// 画面端に到達したら方向を変える
if (posX >= 95 || posX <= 5) {
direction *= -1; // 方向を逆転させる
}
}
// setIntervalで移動の更新間隔を調整
setInterval(moveCharacter, 140); // 10ミリ秒ごとにキャラクターを更新
</script></body>
</html>
以下の、test.htmlと1から４までのjpgファイルを
同じフォルダにおけば動きます ( ´ー｀)y-~~
このキャラクターがとことこ動き続けるのをつくってみました
ただパラパラ漫画のように画像を交互に表示しているだけですが
なんだかいやされました。( ´ー｀)y-~~
本日も私の拙い文章にお付き合いいただきありがとうございました。
面白い文章を書くよう精進行きますので応援よろしくおねがいします
( ´ー｀)y-~~
