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

No:7058

566

←

Prev Next

→

Rosalee-chan survives game in Rosalee Hill
Developer User3958｜Date and time 23/7/5 0:48:29
Build time 19.276 sec｜Game capacity 2.558KB｜

Script

以下が、ロザリーヒルでロザリーちゃんが生き残るゲームの実装例です。このゲームでは、スマホのタッチ操作を前提としています。

ロザリーヒルでロザリーちゃんが生き残るゲーム

このゲームでは、ロザリーちゃんをドラッグで操作し、目標位置まで移動させることが目標です。ロザリーちゃんが目標位置に到達すると、新しい目標位置がランダムに生成されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

以下が、ロザリーヒルでロザリーちゃんが生き残るゲームの実装例です。このゲームでは、スマホのタッチ操作を前提としています。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ロザリーヒルゲーム</title>
</head>
<body>
<h1>ロザリーヒルでロザリーちゃんが生き残るゲーム</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
// ゲーム用の変数
var canvas;
var canvasContext;
var rosieX = 200;
var rosieY = 200;
var rosieSpeedX = 0;
var rosieSpeedY = 0;
var targetX = 0;
var targetY = 0;

// ゲームの初期化
function gameInit() {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');
    document.addEventListener('touchstart', handleTouchStart, false);
    document.addEventListener('touchmove', handleTouchMove, false);
    setInterval(moveRosie, 20);
    spawnTarget();
}

// タッチイベントの処理
function handleTouchStart(event) {
    event.preventDefault();
    var touch = event.touches[0];
    targetX = touch.clientX;
    targetY = touch.clientY;
}

function handleTouchMove(event) {
    event.preventDefault();
    var touch = event.touches[0];
    targetX = touch.clientX;
    targetY = touch.clientY;
}

// ロザリーちゃんの移動処理
function moveRosie() {
    rosieX += rosieSpeedX;
    rosieY += rosieSpeedY;
    drawGame();
}

// ゲーム画面の描画
function drawGame() {
    // ゲーム画面をクリア
    canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// ロザリーちゃんを描画
    canvasContext.fillStyle = "#FF0000";
    canvasContext.beginPath();
    canvasContext.arc(rosieX, rosieY, 20, 0, Math.PI*2, true);
    canvasContext.closePath();
    canvasContext.fill();

// 目標位置を描画
    canvasContext.fillStyle = "#0000FF";
    canvasContext.beginPath();
    canvasContext.arc(targetX, targetY, 10, 0, Math.PI*2, true);
    canvasContext.closePath();
    canvasContext.fill();
}

// 目標位置をランダムに生成
function spawnTarget() {
    targetX = Math.floor(Math.random() * (canvas.width - 20)) + 10;
    targetY = Math.floor(Math.random() * (canvas.height - 20)) + 10;
}

// ゲーム開始
gameInit();
</script>
</body>
</html>
```