Click here for free DL of the app version that can save data.

No:724

362

←

Prev Next

→

side scroller
Developer User3107｜Date and time 23/6/17 14:41:07
Build time 100.618 sec｜Game capacity 9.333KB｜

Script

HTMLファイルの実装例：

横スクロールアクションゲーム

スマホで操作して銃で敵を撃破しよう

ゲームオーバー

JavaScriptの実装例（game.js）：このプログラムは、スマホで操作可能な横スクロールアクションゲームです。プレイヤーは銃を持っており、画面をタップして弾を発射できます。敵を倒して得点を稼ぐことが目的です。プレイヤーは上下左右に移動できますが、敵とぶつかるとダメージを受け、一定時間倒れたまま操作不能になります。また、プレイヤーの弾や敵の移動速度は時間とともに上昇していきます。プレイヤーが敵にぶつかるか、敵が画面外に出てしまうとゲームオーバーになります。ゲームオーバー時には得点が表示され、再度ゲームを開始することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

HTMLファイルの実装例：

```html
<!DOCTYPE html>
<html>
<head>
	<title>横スクロールアクションゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
			font-family: Arial, sans-serif;
			background-color: #222;
			color: white;
		}
		canvas {
			display: block;
		}
		#start-screen, #game-over-screen {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			background-color: rgba(0, 0, 0, 0.5);
			padding: 1em;
			border-radius: 1em;
			box-shadow: 0 0 1em rgba(255, 255, 255, 0.5);
			z-index: 9999;
			display: none;
		}
		button {
			background-color: #33cc33;
			color: white;
			border: none;
			padding: 1em 2em;
			border-radius: 0.5em;
			font-size: 1.5em;
			margin-top: 1em;
			cursor: pointer;
		}
		button:hover {
			background-color: #339933;
		}
		h1, p {
			margin: 0.5em 0;
		}
		h1 {
			font-size: 3em;
			font-weight: bold;
		}
		p {
			font-size: 1.5em;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="start-screen">
		<h1>横スクロールアクションゲーム</h1>
		<p>スマホで操作して銃で敵を撃破しよう</p>
		<button id="start-button">スタート</button>
	</div>
	<div id="game-over-screen">
		<h1>ゲームオーバー</h1>
		<button id="restart-button">再挑戦</button>
	</div>
	<script src="game.js"></script>
</body>
</html>
```

JavaScriptの実装例（game.js）：

```js
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 画面サイズの設定
const SCREEN_WIDTH = window.innerWidth;
const SCREEN_HEIGHT = window.innerHeight;
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;

// ゲームオブジェクトの定義
const player = {
    x: 100,
    y: SCREEN_HEIGHT / 2,
    width: 50,
    height: 50,
    speed: 5,
    image: new Image(),
    bullets: [],
    score: 0
};
player.image.src = 'player.png';

const enemies = [];
const enemyImage = new Image();
enemyImage.src = 'enemy.png';

// ゲーム開始前の画面
const startScreen = document.getElementById('start-screen');
const startButton = document.getElementById('start-button');
startButton.addEventListener('click', startGame);

// ゲームオーバー画面
const gameOverScreen = document.getElementById('game-over-screen');
const restartButton = document.getElementById('restart-button');
restartButton.addEventListener('click', restartGame);

// ゲームの状態管理
let gameStarted = false;
let gameScored = false;
let gamePaused = false;

// ゲーム開始時の処理
function startGame() {
    gameStarted = true;
    startScreen.style.display = 'none';
    spawnEnemy();
    draw();
}

// ゲームオーバー時の処理
function gameOver() {
    gameStarted = false;
    gamePaused = true;
    gameOverScreen.style.display = 'block';
}

// ゲーム再開時の処理
function restartGame() {
    player.x = 100;
    player.y = SCREEN_HEIGHT / 2;
    player.bullets = [];
    player.score = 0;
    enemies.length = 0;
    gameStarted = true;
    gamePaused = false;
    gameOverScreen.style.display = 'none';
    spawnEnemy();
    draw();
}

// 敵の生成
function spawnEnemy() {
    const enemy = {
        x: SCREEN_WIDTH,
        y: Math.random() * (SCREEN_HEIGHT - 100),
        width: 50,
        height: 50,
        speed: Math.random() * 5 + 2,
        health: 2
    };
    enemies.push(enemy);
    setTimeout(spawnEnemy, Math.random() * 3000 + 2000);
}

// プレイヤーの移動
document.addEventListener('keydown', movePlayer);
document.addEventListener('keyup', stopPlayer);
function movePlayer(event) {
    if (gameStarted && !gamePaused) {
        switch (event.key) {
            case 'ArrowUp':
                player.y -= player.speed;
                break;
            case 'ArrowDown':
                player.y += player.speed;
                break;
            case 'ArrowLeft':
                player.x -= player.speed;
                break;
            case 'ArrowRight':
                player.x += player.speed;
                break;
        }
    }
}
function stopPlayer() {
    player.image.src = 'player.png';
}

// 弾の移動
setInterval(moveBullets, 20);
function moveBullets() {
    if (gameStarted && !gamePaused) {
        player.bullets.forEach(bullet => {
            bullet.x += bullet.speed;
            if (bullet.x > SCREEN_WIDTH) {
                bullet.expired = true;
            }
        });
        player.bullets = player.bullets.filter(bullet => !bullet.expired);
    }
}

// 敵の移動
setInterval(moveEnemies, 20);
function moveEnemies() {
    if (gameStarted && !gamePaused) {
        enemies.forEach(enemy => {
            enemy.x -= enemy.speed;
            if (enemy.health <= 0) {
                enemy.expired = true;
            }
            if (enemy.x + enemy.width < 0) {
                gameOver();
            }
        });
        enemies.filter(enemy => !enemy.expired);
    }
}

// 衝突判定
setInterval(detectCollisions, 20);
function detectCollisions() {
    if (gameStarted && !gamePaused) {
        player.bullets.forEach(bullet => {
            enemies.forEach(enemy => {
                if (bullet.x < enemy.x + enemy.width &&
                    bullet.x + bullet.width > enemy.x &&
                    bullet.y < enemy.y + enemy.height &&
                    bullet.y + bullet.height > enemy.y) {
                    bullet.expired = true;
                    enemy.health--;
                    if (enemy.health <= 0) {
                        player.score++;
                    }
                }
            });
        });
        player.bullets = player.bullets.filter(bullet => !bullet.expired);
    }
}

// 描画処理
function draw() {
    ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    // プレイヤーの描画
    ctx.drawImage(player.image, player.x, player.y, player.width, player.height);
    // 弾の描画
    player.bullets.forEach(bullet => {
        ctx.fillStyle = 'white';
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
    });
    // 敵の描画
    enemies.forEach(enemy => {
        ctx.drawImage(enemyImage, enemy.x, enemy.y, enemy.width, enemy.height);
    });
    // スコア表示
    ctx.fillStyle = 'white';
    ctx.font = '36px sans-serif';
    ctx.fillText('得点：' + player.score, 20, 40);
    // ゲームオーバー時の描画
    if (!gameStarted && !gameScored) {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
        ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
        ctx.fillStyle = 'white';
        ctx.font = '64px sans-serif';
        ctx.fillText('ゲームオーバー', SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2 - 64);
        ctx.font = '48px sans-serif';
        ctx.fillText('スコア：' + player.score, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
        gameScored = true;
    }
    if (gameStarted && !gamePaused) {
        requestAnimationFrame(draw);
    }
}

// タッチ操作の処理
let touchX = 0;
let touchY = 0;
canvas.addEventListener('touchstart', handleTouchStart);
canvas.addEventListener('touchmove', handleTouchMove);
function handleTouchStart(event) {
    if (event.touches.length === 1) {
        touchX = event.touches[0].clientX;
        touchY = event.touches[0].clientY;
    }
}
function handleTouchMove(event) {
    if (event.touches.length === 1) {
        event.preventDefault();
        const diffX = touchX - event.touches[0].clientX;
        const diffY = touchY - event.touches[0].clientY;
        if (Math.abs(diffX) > Math.abs(diffY)) {
            // 左右移動
            if (diffX > 0) {
                player.x -= player.speed;
            } else {
                player.x += player.speed;
            }
        } else {
            // 上下移動
            if (diffY > 0) {
                player.y -= player.speed;
            } else {
                player.y += player.speed;
            }
        }
        touchX = event.touches[0].clientX;
        touchY = event.touches[0].clientY;
    }
}

// クリック操作の処理
canvas.addEventListener('click', fireBullet);
function fireBullet(event) {
    if (gameStarted && !gamePaused) {
        const bullet = {
            x: player.x + player.width,
            y: player.y + player.height / 2 - 5,
            width: 10,
            height: 10,
            speed: 10
        };
        player.bullets.push(bullet);
        player.image.src = 'player_shoot.png';
    }
}
```

このプログラムは、スマホで操作可能な横スクロールアクションゲームです。プレイヤーは銃を持っており、画面をタップして弾を発射できます。敵を倒して得点を稼ぐことが目的です。プレイヤーは上下左右に移動できますが、敵とぶつかるとダメージを受け、一定時間倒れたまま操作不能になります。また、プレイヤーの弾や敵の移動速度は時間とともに上昇していきます。プレイヤーが敵にぶつかるか、敵が画面外に出てしまうとゲームオーバーになります。ゲームオーバー時には得点が表示され、再度ゲームを開始することができます。