前提・実現したいこと
JavaScriptでケイブ(洞窟)の壁に当たらないように進んでいくゲームを作っています。
(「ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版]」のサンプルプログラムです)
発生している問題・エラーメッセージ
body内のimg#shipに
style="height:97px;"
という記述がありますが、この記述を外すと洞窟下側の当たり判定(hitTest)が上手く機能しなくなってしまいます。
styleはhead内で記述されているにも関わらずこのような事が起こる理由を教えていただけませんか?
該当のソースコード
JavaScript
1<!DOCTYPE html> 2<html> 3<head> 4 <title>Cave</title> 5 <meta charset="utf-8" /> 6 <style> 7 #main { 8 width: 800px; 9 height: 600px; 10 background-color: #00cc00; 11 position: absolute; 12 overflow: hidden; 13 } 14 15 #ship { 16 top: 250px; 17 left: 0px; 18 width: 150px; 19 height: 97px; 20 position: absolute; 21 z-index: 100; 22 } 23 24 #bang { 25 width: 200px; 26 height: 200px; 27 position: absolute; 28 z-index: 101; 29 visibility: hidden; 30 } 31 </style> 32 <script type="text/javascript"> 33 "use strict"; 34 var y = 250, v = 0, keyDown = false, WALLS = 80, score = 0; 35 var walls = [], slope = 0, timer, ship, main; 36 37 function init() { 38 main = document.getElementById('main'); 39 ship = document.getElementById('ship'); 40 41 for (var i = 0 ; i < WALLS ; i++) { 42 walls[i] = document.createElement("div"); 43 walls[i].style.position = "absolute"; 44 walls[i].style.top = "100px"; 45 walls[i].style.left = i * 10 + "px"; 46 walls[i].style.width = "10px"; 47 walls[i].style.height = "400px"; 48 walls[i].style.backgroundColor = "#333333"; 49 main.appendChild(walls[i]); 50 } 51 52 slope = Math.floor(Math.random() * 5) + 1; 53 timer = setInterval(mainloop, 50); 54 window.addEventListener('keydown', function () { keyDown = true; }); 55 window.addEventListener('keyup', function () { keyDown = false; }); 56 } 57 58 function hitTest(){ 59 var st = parseInt(ship.style.top) + 10; 60 var sh = parseInt(ship.style.height); 61 var sb = st + sh - 20; 62 63 var wt = parseInt(walls[14].style.top); 64 var wh = parseInt(walls[14].style.height); 65 var wb = wh + wt; 66 67 return (st < wt) || (sb > wb ); 68 } 69 70 function mainloop() { 71 if (hitTest()) { 72 clearInterval(timer); 73 document.getElementById('bang').style.top = (y - 40) + "px"; 74 document.getElementById('bang').style.visibility = "visible"; 75 return; 76 } 77 78 score += 10; 79 document.getElementById('score').innerHTML = score.toString(); 80 81 v += keyDown ? -3 : 3; 82 y += v; 83 ship.style.top = y + 'px'; 84 85 var edge = walls[WALLS - 1].style; 86 var t = parseInt(edge.top); 87 var h = parseInt(edge.height); 88 var b = h + t; 89 t += slope; 90 b += slope; 91 if ((t < 0) && (slope < 0) || (b > 600) && (slope > 0)) { 92 slope = (Math.floor(Math.random() * 5) + 1) * (slope < 0 ? 1 : -1); 93 edge.top = (t + 10) + "px"; 94 edge.height = (h - 20) + "px"; 95 } else { 96 edge.top = t + "px"; 97 } 98 99 for (var i = 0 ; i < WALLS - 1 ; i++) { 100 walls[i].style.top = walls[i + 1].style.top; 101 walls[i].style.height = walls[i + 1].style.height; 102 } 103 } 104 105 </script> 106</head> 107 108<body onload="init()"> 109 <h1>Score:<span id="score"></span></h1> 110 <div id="main"> 111 <img id="ship" src="ship.png" style="height:97px;" /> 112 <img id="bang" src="bang.png" /> 113 </div> 114</body> 115</html>
補足情報(FW/ツールのバージョンなど)
ブラウザはGoogle Chromeを使用しています。
回答1件
あなたの回答
tips
プレビュー