16個x16個の白枠ブロック上で、マウスドラッグしながらなぞると黒いブロックが置かれる・・
という単純なプログラムを組みたかっただけなのですが、つまづいてしまいました。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>マウスイベントの練習</title> 6</head> 7<body> 8<div id="canvas"> 9</div> 10<script src="main.js"></script> 11</body> 12</html> 13
javascript
1document.addEventListener("DOMContentLoaded", () => { 2 "use strict"; 3 4 const canvas = document.getElementById("canvas"); 5 6 const BLOCK_WIDTH = 10; // png画像は縦横10ピクセル 7 const BLOCK_HEIGHT = 10; 8 const BOX_WIDTH = 16; // 並べる個数 9 const BOX_HEIGHT = 16; 10 const BLOCKpng = "block.png"; 11 const BLACKpng = "black.png"; 12 13 let mousBtnFlag = false; 14 15 let x, y; 16 let n = 1; // 左上がsquare1 17 const blockFlg = document.createDocumentFragment(); 18 for (y = 1; y <= BOX_HEIGHT; y++) { 19 for (x = 1; x <= BOX_WIDTH; x++) { 20 const img = document.createElement("img"); 21 img.id = `square${n}`; 22 img.src = BLOCKpng; 23 img.style.position = "absolute"; 24 img.style.left = `${x * BLOCK_WIDTH}px`; 25 img.style.top = `${y * BLOCK_HEIGHT}px`; 26 blockFlg.appendChild(img); 27 n++; 28 } 29 } 30 canvas.appendChild(blockFlg); 31 32 // 関数-------------------- 33 function mousDown() { 34 mousBtnFlag = true; 35 } 36 function mousUp() { 37 mousBtnFlag = false; 38 } 39 40 function mousMove(event) { 41 if (mousBtnFlag) { 42 event.src = BLACKpng; 43 } 44 } 45 46 // イベント処理---------------- 47 let i; 48 for (i = 1; i < n; i++) { 49 const obj = document.getElementById(`square${i}`); 50 obj.addEventListener("mousemove", () => { 51 mousMove(obj); 52 }); 53 obj.addEventListener("mouseup", () => { 54 mousUp(); 55 }); 56 obj.addEventListener("mousedown", () => { 57 mousDown(); 58 }); 59 } 60 61}); 62
マウス左ボタンを押し続けている間は
mousBtnFlag が true として、
mousemove と フラグtrueが両方成り立つ時に黒ブロックを置いていく・・
と書いたつもりですが、思惑通りには動いてくれませんでした。
いろいろイジって、思惑に最も近付いたコードが上記です。
しかしこれ以上はギブアップ気味です・・。ご教授よろしくお願いいたします。
Chromeで動いてくれればOKです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/11 01:01