Discover Aliens game's game

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

No:665

168

←

Prev Next

→

Discover Aliens game
Developer User3064｜Date and time 23/6/17 2:58:54
Build time 33.239 sec｜Game capacity 3.117KB｜

Script

このゲームは、スタートボタンをクリックすると、キャンバス上にランダムに配置された宇宙人をクリックして発見するゲームです。宇宙人をクリックすると、宇宙人を発見した旨が表示されます。宇宙人を見つけられなかった場合は、その旨が表示されます。スマホで操作する場合は、タップすることで宇宙人をクリックすることができます。また、絵文字を多く使って、楽しく遊んでもらえるようにしました。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>

<html>

<head>

<title>宇宙人発見ゲーム</title>

<style>

body {

background-color: #000;

color: #fff;

}

.canvas {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

.button {

display: block;

margin: 10px auto;

padding: 10px;

border: none;

background-color: #fff;

color: #000;

font-size: 24px;

border-radius: 5px;

text-align: center;

cursor: pointer;

}

</style>

</head>

<body>

// ゲームの状態を表す変数

var playing = false;

// 宇宙人の画像を読み込む

var alienImage = new Image();

alienImage.src = 'alien.png';

// キャンバスの設定

var canvas = document.querySelector('.canvas');

var ctx = canvas.getContext('2d');

ctx.font = 'bold 24px sans-serif';

ctx.textAlign = 'center';

ctx.fillText('宇宙人を発見せよ！', canvas.width / 2, canvas.height / 2);

// スタートボタンをクリックした時の処理

document.querySelector('#start-button').addEventListener('click', startGame);

function startGame() {

playing = true;

document.querySelector('#start-button').style.display = 'none';

// キャンバスをクリアする

ctx.clearRect(0, 0, canvas.width, canvas.height);

// 宇宙人をランダムに配置する

var alienX = Math.floor(Math.random() * (canvas.width - alienImage.width));

var alienY = Math.floor(Math.random() * (canvas.height - alienImage.height));

// 宇宙人を表示する

ctx.drawImage(alienImage, alienX, alienY);

// キャンバス上をクリックした時の処理

canvas.addEventListener('click', function(event) {

if (playing) {

// 宇宙人の座標とクリックした場所の座標を比較する

var rect = canvas.getBoundingClientRect();

var mouseX = event.clientX - rect.left;

var mouseY = event.clientY - rect.top;

if (mouseX >= alienX && mouseX <= alienX + alienImage.width && mouseY >= alienY && mouseY <= alienY + alienImage.height) {

// 宇宙人を発見した時の処理

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillText('宇宙人を発見しました！', canvas.width / 2, canvas.height / 2);

playing = false;

document.querySelector('#start-button').style.display = 'block';

} else {

// 宇宙人を発見できなかった時の処理

ctx.fillText('宇宙人は見つかりませんでした・・・', canvas.width / 2, canvas.height / 2);

}

});

}

</script>

</body>

</html>