vivit-jc · March 25, 2022 16:51
diff --git a/index2.html b/index2.html
 <!doctype html>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>ポパパポピポパポ　ピピョロロロピーピョロピーゴーーーーーピーーーーゴーーーーザーーーーーーーガピー</title>
 <style>
 #image {
    height: 400px;
 }
 #prev, #start, #next, #answer {
    line-height: 2.0;
    width: 5rem;
 }
 #imgnumber {
    line-height: 2.0;
 }
 </style>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
 // シャッフル虫食いクイズ用スクリプト
 // 使い方：出したい画像と同じフォルダにこれを置いて使う
 // 画像のファイル名は「p99.jpg」のようにp+整数+.jpgにする（.jpgのみ対応）
 // 別の画像を表示している最中に番号を直接打ち込んでStartすると意図しない動作をすることがあるので、
 // 本番でそういう使い方をしないように注意
 $(function(){

 const State = {
    sec: 0,
    timer: null,
    isPlaying: false,
    order: [],
 }

 function getCanvasContext2d() {
    const canvas = $('#canvas'); 
    return canvas[0].getContext('2d')
 }

 function drawRect() {
    const context = getCanvasContext2d()
    const w = $('#img').width()
    const w40  = Math.ceil(w/40)
    context.fillStyle = 'white'

    if(State.order.length >= State.sec){
        context.fillRect(0, 0, w, 400)
        for(let i=0;i<State.sec;i++){
            let o = State.order[i]
            context.clearRect((o%w40)*40, Math.floor(o/w40)*40, 40, 40)
        }
    } 
    State.sec += 1
    //console.log('timer: ' + State.sec)
 }

 function hideImage() {
    const context = getCanvasContext2d()
    context.fillStyle = 'white'
    context.fillRect( 0, 0, 1000, 400)
    State.order=[]
 }

 function stopTimer() {
    State.sec = 0
    State.isPlaying = false
    clearInterval(State.timer)
 }

 function loadImage() {
    const number = $('#imgnumber').val()
    $('#message').text('')
    $('#img').attr('src', `p${number}.jpg`)
 }

 function setOrder() {
    const w = $('#img').width()
    let oarray=[]
    const w40 = Math.ceil(w/40)
    for(let i=0;i<w40*10;i++){
        oarray.push(i)
    }
    State.order=shuffle(oarray)
    console.log(w40,State.order)
 }

 const shuffle = ([...array]) => {
  for (let i = array.length - 1; i >= 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
 }

 $('#start')[0].addEventListener('click', () => {
    if (State.isPlaying) {
        clearInterval(State.timer)
        State.isPlaying = false
    } else {
        if(State.order.length == 0){
            setOrder()
        }
        State.timer = setInterval(() => drawRect(), 300)
        State.isPlaying = true
    }
 })

 $('#answer')[0].addEventListener('click', () => {
    const context = getCanvasContext2d()
    context.clearRect(0, 0, 1000, 400)
    stopTimer()
 })

 $('#next')[0].addEventListener('click', () => {
    hideImage()
    $('#imgnumber').val(Number($('#imgnumber').val()) + 1)
    stopTimer()
    loadImage()
 })

 $('#prev')[0].addEventListener('click', () => {
    hideImage()
    $('#imgnumber').val(Number($('#imgnumber').val()) - 1)
    stopTimer()
    loadImage()
 })

 $('#imgnumber')[0].addEventListener('blur', () => {
    hideImage()
    stopTimer()
    loadImage()
 })

 $('#img')[0].addEventListener('error', () => {
    const matched = $('#img').attr('src').match(/p(\d*)\.(jpe?g|png)/)
    if (matched) {
        const [, number, ext] = matched
        if (ext === 'jpg') {
            $('#img').attr('src', `p${number}.jpeg`)
        } else if (ext === 'jpeg') {
            $('#img').attr('src', `p${number}.png`)
        } else {
            $('#message').text(`画像 p${number} (*.jpg, *.jpeg, *.png) が見つかりません`)
        }
    }
    return false
 })
 hideImage()
 loadImage()
 })
 </script>
 </head>
 <body>
 <div id="image">
 <canvas id="canvas" height="400" width="1000" style="position:absolute"></canvas>
 <img id="img" src="" height="400">
 </div>
 <p id="message"></p>
 <button id="prev">&ltPrev</button>
 <button id="start">Start/Stop</button>
 <button id="next">Next&gt</button>
 <input type="number" id="imgnumber" size="10" value="1">
 <button id="answer">Ans</button>
 </body>
 </html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ポパパポピポパポ　ピピョロロロピーピョロピーゴーーーーーピーーーーゴーーーーザーーーーーーーガピー</title>
	<style>
	#image {
	height: 400px;
	}
	#prev, #start, #next, #answer {
	line-height: 2.0;
	width: 5rem;
	}
	#imgnumber {
	line-height: 2.0;
	}
	</style>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
	// シャッフル虫食いクイズ用スクリプト
	// 使い方：出したい画像と同じフォルダにこれを置いて使う
	// 画像のファイル名は「p99.jpg」のようにp+整数+.jpgにする（.jpgのみ対応）
	// 別の画像を表示している最中に番号を直接打ち込んでStartすると意図しない動作をすることがあるので、
	// 本番でそういう使い方をしないように注意
	$(function(){

	const State = {
	sec: 0,
	timer: null,
	isPlaying: false,
	order: [],
	}

	function getCanvasContext2d() {
	const canvas = $('#canvas');
	return canvas[0].getContext('2d')
	}

	function drawRect() {
	const context = getCanvasContext2d()
	const w = $('#img').width()
	const w40 = Math.ceil(w/40)
	context.fillStyle = 'white'

	if(State.order.length >= State.sec){
	context.fillRect(0, 0, w, 400)
	for(let i=0;i<State.sec;i++){
	let o = State.order[i]
	context.clearRect((o%w40)40, Math.floor(o/w40)40, 40, 40)
	}
	}
	State.sec += 1
	//console.log('timer: ' + State.sec)
	}

	function hideImage() {
	const context = getCanvasContext2d()
	context.fillStyle = 'white'
	context.fillRect( 0, 0, 1000, 400)
	State.order=[]
	}

	function stopTimer() {
	State.sec = 0
	State.isPlaying = false
	clearInterval(State.timer)
	}

	function loadImage() {
	const number = $('#imgnumber').val()
	$('#message').text('')
	$('#img').attr('src', `p${number}.jpg`)
	}

	function setOrder() {
	const w = $('#img').width()
	let oarray=[]
	const w40 = Math.ceil(w/40)
	for(let i=0;i<w40*10;i++){
	oarray.push(i)
	}
	State.order=shuffle(oarray)
	console.log(w40,State.order)
	}

	const shuffle = ([...array]) => {
	for (let i = array.length - 1; i >= 0; i--) {
	const j = Math.floor(Math.random() * (i + 1));
	[array[i], array[j]] = [array[j], array[i]];
	}
	return array;
	}

	$('#start')[0].addEventListener('click', () => {
	if (State.isPlaying) {
	clearInterval(State.timer)
	State.isPlaying = false
	} else {
	if(State.order.length == 0){
	setOrder()
	}
	State.timer = setInterval(() => drawRect(), 300)
	State.isPlaying = true
	}
	})

	$('#answer')[0].addEventListener('click', () => {
	const context = getCanvasContext2d()
	context.clearRect(0, 0, 1000, 400)
	stopTimer()
	})

	$('#next')[0].addEventListener('click', () => {
	hideImage()
	$('#imgnumber').val(Number($('#imgnumber').val()) + 1)
	stopTimer()
	loadImage()
	})

	$('#prev')[0].addEventListener('click', () => {
	hideImage()
	$('#imgnumber').val(Number($('#imgnumber').val()) - 1)
	stopTimer()
	loadImage()
	})

	$('#imgnumber')[0].addEventListener('blur', () => {
	hideImage()
	stopTimer()
	loadImage()
	})

	$('#img')[0].addEventListener('error', () => {
	const matched = $('#img').attr('src').match(/p(\d*)\.(jpe?g\|png)/)
	if (matched) {
	const [, number, ext] = matched
	if (ext === 'jpg') {
	$('#img').attr('src', `p${number}.jpeg`)
	} else if (ext === 'jpeg') {
	$('#img').attr('src', `p${number}.png`)
	} else {
	$('#message').text(`画像 p${number} (.jpg, .jpeg, *.png) が見つかりません`)
	}
	}
	return false
	})
	hideImage()
	loadImage()
	})
	</script>
	</head>
	<body>
	<div id="image">
	<canvas id="canvas" height="400" width="1000" style="position:absolute"></canvas>
	<img id="img" src="" height="400">
	</div>
	<p id="message"></p>
	<button id="prev">&ltPrev</button>
	<button id="start">Start/Stop</button>
	<button id="next">Next&gt</button>
	<input type="number" id="imgnumber" size="10" value="1">
	<button id="answer">Ans</button>
	</body>
	</html>