Skip to content

Instantly share code, notes, and snippets.

@xhackjp1

xhackjp1/index-1.html

Last active January 30, 2021 13:37
Show Gist options
  • Save xhackjp1/5f1c10002947bd4026a99291c17b6a5c to your computer and use it in GitHub Desktop.
Save xhackjp1/5f1c10002947bd4026a99291c17b6a5c to your computer and use it in GitHub Desktop.
Download ZIP
雛形
Raw
index-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>間違いさがしゲーム</title>
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="株式会社X-HACK" />
<meta property="og:description" content="間違い探しゲームです" />
<meta
property="og:image"
content="https://js-hack.s3-ap-northeast-1.amazonaws.com/%E9%96%93%E9%81%95%E3%81%84+%E3%81%95%E3%81%8B%E3%82%99%E3%81%97.png"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="center">
<h1 class="center">間違い探し</h1>
<h4>一つだけボストンテリアが紛れています</h4>
</div>
<div id="app" class="canvas_wrap">
<canvas
id="canvas"
class="center"
width="360"
height="360"
style="background-color: darkslategrey;"
></canvas>
</div>
<script>
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
let img1 = new Image()
img1.src = "https://storage.tenki.jp/storage/static-images/suppl/article/image/2/27/277/27740/1/large.jpg"
img1.onload = () => {
ctx.drawImage(img1, 180 * 0, 180 * 0, 180, 180)
}
</script>
</body>
</html>
Raw
index-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>間違いさがしゲーム</title>
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="株式会社X-HACK" />
<meta property="og:description" content="間違い探しゲームです" />
<meta
property="og:image"
content="https://js-hack.s3-ap-northeast-1.amazonaws.com/%E9%96%93%E9%81%95%E3%81%84+%E3%81%95%E3%81%8B%E3%82%99%E3%81%97.png"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="center">
<h1 class="center">間違い探し</h1>
<h4>一つだけボストンテリアが紛れています</h4>
</div>
<div id="app" class="canvas_wrap">
<canvas
id="canvas"
class="center"
width="360"
height="360"
style="background-color: darkslategrey;"
></canvas>
</div>
<script>
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
// img 要素を生成
let img1 = new Image()
// http://~~ に通信でデータを取得しにいっている
// 通信は時間がかかる処理なので、非同期で動いている
// なぜ非同期で動くかというと、通信の完了には時間がかかるから
// その間後続の処理を行った方が効率が良いので、そういう実装になっている
img1.src = "https://storage.tenki.jp/storage/static-images/suppl/article/image/2/27/277/27740/1/large.jpg"
img1.onload = function () {
ctx.drawImage(img1, 0, 0, 180, 180)
}
</script>
</body>
</html>
Raw
index-3.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>間違いさがしゲーム</title>
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="株式会社X-HACK" />
<meta property="og:description" content="間違い探しゲームです" />
<meta
property="og:image"
content="https://js-hack.s3-ap-northeast-1.amazonaws.com/%E9%96%93%E9%81%95%E3%81%84+%E3%81%95%E3%81%8B%E3%82%99%E3%81%97.png"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="center">
<h1 class="center">間違い探し</h1>
<h4>一つだけボストンテリアが紛れています</h4>
</div>
<div id="app" class="canvas_wrap">
<canvas
id="canvas"
class="center"
width="360"
height="360"
style="background-color: darkslategrey"
></canvas>
</div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function drawImage(x, y, srcUrl) {
// img 要素を生成
let img = new Image();
img.src = srcUrl;
img.onload = function () {
ctx.drawImage(img, x, y, 120, 120);
};
}
drawImage(0, 0, "https://storage.tenki.jp/storage/static-images/suppl/article/image/2/27/277/27740/1/large.jpg")
drawImage(120, 0, "https://newsbyl-pctr.c.yimg.jp/r/iwiz-amd/20200320-00168403-roupeiro-000-12-view.jpg")
drawImage(0, 120, "https://dime.jp/genre/files/2020/11/44817f7cc02f549d516a94cc2710c53f-770x510.png")
drawImage(120, 120, "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg")
// // img 要素を生成
// let img2 = new Image();
// img2.src = "https://newsbyl-pctr.c.yimg.jp/r/iwiz-amd/20200320-00168403-roupeiro-000-12-view.jpg";
// img2.onload = function () {
// ctx.drawImage(img2, 0, 180, 180, 180);
// };
// // img 要素を生成
// let img3 = new Image();
// img3.src = "";
// img3.onload = function () {
// ctx.drawImage(img3, 180, 0, 180, 180);
// };
// // img 要素を生成
// let img4 = new Image();
// img4.src = "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg";
// img4.onload = function () {
// ctx.drawImage(img4, 180, 180, 180, 180);
// };
</script>
</body>
</html>
Raw
index-4.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>間違いさがしゲーム</title>
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="株式会社X-HACK" />
<meta property="og:description" content="間違い探しゲームです" />
<meta
property="og:image"
content="https://js-hack.s3-ap-northeast-1.amazonaws.com/%E9%96%93%E9%81%95%E3%81%84+%E3%81%95%E3%81%8B%E3%82%99%E3%81%97.png"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="center">
<h1 class="center">間違い探し</h1>
<h4>一つだけボストンテリアが紛れています</h4>
</div>
<div id="app" class="canvas_wrap">
<canvas
id="canvas"
class="center"
width="360"
height="360"
style="background-color: darkslategrey"
></canvas>
</div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// マジックナンバーは定数として定義しておく(なんのための数字か変数名で理解できるようにするため)
const MAX_COLUMN = 3;
const IMAGE_WIDTH = 120;
const IMAGES = [
"https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
"https://newsbyl-pctr.c.yimg.jp/r/iwiz-amd/20200320-00168403-roupeiro-000-12-view.jpg",
"https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
"https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
"https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
"https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
"https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
"https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
"https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
]
function drawImage(x, y, srcUrl) {
// img 要素を生成
const img = new Image();
img.src = srcUrl;
img.onload = function () {
ctx.drawImage(img, x, y, IMAGE_WIDTH, IMAGE_WIDTH);
};
}
let counter = 0;
for(let i=0;i<MAX_COLUMN;i++){
for(let j=0;j<MAX_COLUMN;j++){
drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, IMAGES[counter])
counter += 1
}
}
</script>
</body>
</html>
Raw
index-5.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>間違いさがしゲーム</title>
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="株式会社X-HACK" />
<meta property="og:description" content="間違い探しゲームです" />
<meta
property="og:image"
content="https://js-hack.s3-ap-northeast-1.amazonaws.com/%E9%96%93%E9%81%95%E3%81%84+%E3%81%95%E3%81%8B%E3%82%99%E3%81%97.png"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="center">
<h1 class="center">間違い探し</h1>
<h4>一つだけボストンテリアが紛れています</h4>
</div>
<div id="app" class="canvas_wrap">
<canvas
id="canvas"
class="center"
width="360"
height="360"
style="background-color: darkslategrey"
></canvas>
</div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// マジックナンバーは定数として定義しておく(なんのための数字か変数名で理解できるようにするため)
const MAX_COLUMN = 3;
const IMAGE_WIDTH = 120;
function drawImage(x, y, srcUrl) {
// img 要素を生成
const img = new Image();
img.src = srcUrl;
img.onload = function () {
ctx.drawImage(img, x, y, IMAGE_WIDTH, IMAGE_WIDTH);
};
}
let counter = 0;
let randomNumber = Math.floor(Math.random() * 8)
for(let i=0;i<MAX_COLUMN;i++){
for(let j=0;j<MAX_COLUMN;j++){
if(counter === randomNumber){
drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/ボストンテリア_2.png`)
}else{
drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/フレンチブルドッグ_${counter}.png`)
}
counter += 1
}
}
</script>
</body>
</html>
Raw
index-6.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>間違いさがしゲーム</title>
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="株式会社X-HACK" />
<meta property="og:description" content="間違い探しゲームです" />
<meta
property="og:image"
content="https://js-hack.s3-ap-northeast-1.amazonaws.com/%E9%96%93%E9%81%95%E3%81%84+%E3%81%95%E3%81%8B%E3%82%99%E3%81%97.png"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="center">
<h1 class="center">間違い探し</h1>
<h4>一つだけボストンテリアが紛れています</h4>
</div>
<div id="app" class="canvas_wrap">
<canvas
id="canvas"
class="center"
width="360"
height="360"
style="background-color: darkslategrey"
></canvas>
</div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// マジックナンバーは定数として定義しておく(なんのための数字か変数名で理解できるようにするため)
const MAX_COLUMN = 3;
const IMAGE_WIDTH = 120;
function drawImage(x, y, srcUrl) {
// img 要素を生成
const img = new Image();
img.src = srcUrl;
img.onload = function () {
ctx.drawImage(img, x, y, IMAGE_WIDTH, IMAGE_WIDTH);
};
}
let counter = 0;
let randomNumber = Math.floor(Math.random() * 8)
for(let i=0;i<MAX_COLUMN;i++){
for(let j=0;j<MAX_COLUMN;j++){
if(counter === randomNumber){
drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/ボストンテリア_2.png`)
}else{
drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/フレンチブルドッグ_${counter}.png`)
}
counter += 1
}
}
// addEventListenerは複数のイベントを登録できる
// 別のイベントをつけるときは、removeEventListener で
// くっつけたイベントを取り外すことを忘れずに
canvas.addEventListener("click", (event) => {
console.log({ x: event.layerX, y: event.layerY })
})
</script>
</body>
</html>
Raw
index-final.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>間違いさがしゲーム</title>
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="株式会社X-HACK" />
<meta property="og:description" content="間違い探しゲームです" />
<meta
property="og:image"
content="https://js-hack.s3-ap-northeast-1.amazonaws.com/%E9%96%93%E9%81%95%E3%81%84+%E3%81%95%E3%81%8B%E3%82%99%E3%81%97.png"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="center">
<h1 class="center">間違い探し</h1>
<h4>一つだけボストンテリアが紛れています</h4>
</div>
<div id="app" class="canvas_wrap">
<canvas
id="canvas"
class="center"
width="360"
height="360"
style="background-color: darkslategrey"
></canvas>
</div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// マジックナンバーは定数として定義しておく(なんのための数字か変数名で理解できるようにするため)
const MAX_COLUMN = 3;
const IMAGE_WIDTH = 120;
let ngImagePosition = {
x1: null,
x2: null,
y1: null,
y2: null,
}
function drawImage(x, y, srcUrl) {
// img 要素を生成
const img = new Image();
img.src = srcUrl;
img.onload = function () {
ctx.drawImage(img, x, y, IMAGE_WIDTH, IMAGE_WIDTH);
};
}
let counter = 0;
let randomNumber = Math.floor(Math.random() * 8)
for(let i=0;i<MAX_COLUMN;i++){
for(let j=0;j<MAX_COLUMN;j++){
if(counter === randomNumber){
// 正解の画像
drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/ボストンテリア_2.png`)
// 正解の画像の位置を記憶しておく・・・
ngImagePosition.x1 = IMAGE_WIDTH * i
ngImagePosition.x2 = IMAGE_WIDTH * i + 120
ngImagePosition.y1 = IMAGE_WIDTH * j
ngImagePosition.y2 = IMAGE_WIDTH * j + 120
}else{
drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/フレンチブルドッグ_${counter}.png`)
}
counter += 1
}
}
// addEventListenerは複数のイベントを登録できる
// 別のイベントをつけるときは、removeEventListener で
// くっつけたイベントを取り外すことを忘れずに
canvas.addEventListener("click", (event) => {
// console.log({ x: event.layerX, y: event.layerY })
let xPosRange = ngImagePosition.x1 <= event.layerX && ngImagePosition.x2 >= event.layerX
let yPosRange = ngImagePosition.y1 <= event.layerY && ngImagePosition.y2 >= event.layerY
if(xPosRange && yPosRange){
console.log("正解")
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment