ブロック崩し JavaScript
windows７のＩＥ（Internet Explorer）で作成した、「ブロック崩し
」JavaScriptをＥｄｇｅで動くように修正しました。
Ｅｄｇｅで動かすためにためにかなりの修正を行ない やっと動くようになりました。
大部分ChatGPT4.0のお世話になりました。
旧バ－ジョンは１２６行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM HomePage Builder 2001 V5.0.4 for Windows">
<TITLE>game</TITLE>
</HEAD>
<BODY bgcolor="green">
<FORM><INPUT TYPE="button" VALUE="ゲ－ム開始" onclick="startplay()" style="position:absolute;top:50;left:150"><FONT size="+1"><B><IMG height="16" src="b_lis001.gif" width="16" border="0"> <A target="top" href="nftbl1.htm">も</A></B></FONT><A target="top" href="inftbl1.htm"><FONT size="+1"><B>どり</B></FONT></A></FORM>
<DIV><!-- set of racket --><img id=racket src="racket.gif" style="position:absolute;top:480;left:190">
<!-- set of ball --><img id=ball src="ball-g.gif" style="position:absolute;top:430;left:210">
<!-- set of block1 --><img id=block1 src="block1.gif" style="position:absolute;top:110;left:55">
<img id=block2 src="block1.gif" style="position:absolute;top:110;left:145">
<img id=block3 src="block1.gif" style="position:absolute;top:110;left:235">
<img id=block4 src="block1.gif" style="position:absolute;top:110;left:325">
<img id=block5 src="block2.gif" style="position:absolute;top:140;left:55">
<img id=block6 src="block2.gif" style="position:absolute;top:140;left:145">
<img id=block7 src="block2.gif" style="position:absolute;top:140;left:235">
<img id=block8 src="block2.gif" style="position:absolute;top:140;left:325">
<img id=block9 src="block3.gif" style="position:absolute;top:170;left:55">
<img id=block10 src="block3.gif" style="position:absolute;top:170;left:145">
<img id=block11 src="block3.gif" style="position:absolute;top:170;left:235">
<img id=block12 src="block3.gif" style="position:absolute;top:170;left:325">
<!-- display of court --><img id=court src="court-g.gif" style="position:absolute;top:80;left:30;z-index:-1" onMouseMove = "moveracket()"></DIV>
<SCRIPT LANGUAGE="JavaScript">
//
// ゲーム開始
//
function startplay() {
//スタート位置にボールをセットする
ball.style.posTop = 430;
ball.style.posLeft = 230;
//ボールの移動量を設定
mx = -3;
my = -3;
//残りブロック数を初期化
blocks = 12;
//スタート時間のセット
startTime = new Date();
//ゲームスタート
runningball();
return;
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//
//moving racket
//
function moveracket() {
//マウスの位置を取得する
var xp = window.event.x;
//ラケットを移動する
racket.style.posLeft = xp;
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//
// moving ball
//
function runningball(){
var xp = ball.style.posLeft;
var yp = ball.style.posTop;
// check of potision
var hitAny = document.elementFromPoint(xp,yp+5);
// closs of ball
if (hitAny != null){
if (hitAny.id == "racket"){
//Ｙ軸の移動方向を反転
my = -my;
}
//ブロックに当たったとき
else if (hitAny.width == 75){
//当たったブロックを消す
hitAny.style.display = "none";
//残りのブロックのカウンタを減らす
blocks--;
my = -my;
//ブロックを全て消し終わったとき
if(blocks == 0){
//所要時間の算出
finishTime = new Date();
spanTime = finishTime - startTime;
strSTime = "" + spanTime;
alert("Game Complete!!");
//-- locaion.href("playgame.asp?gtime=strSTime");
return;
}
}
}
//ボ－ルがコートの横にはみ出したとき
if ((xp < 40) || (xp > 407)){
mx = -mx;
}
//ボ－ルがコートの上にはみ出したとき
else if (yp < 90) {
my = -my;
}
//ボ－ルがコートの下に落ちたとき
else if (yp > 490) {
//ゲームの終了
alert("Game Over!!");
return;
}
//ボールを移動する
ball.style.posTop += my;
ball.style.posLeft += mx;
//自分自身をタイマーにセットして、繰り返しボールを動かす
window.setTimeout("runningball()",0,"JavaScript");
}
</SCRIPT>
<p><FONT COLOR="white"><STRONG><BIG>ブロック崩しゲーム</BIG></STRONG>(I.Eでのみ動作保証します)<br>
マウスでラケット動かしてお楽しみ下さい</FONT></p>
</BODY></HTML>新バージョンは１７６行
<!DOCTYPE HTML>
<html lang="ja">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HEAD>
<TITLE>ブロック崩し</TITLE>
<STYLE>
body {
background-color: green;
}
#racket, #ball, .block, #court {
position: absolute;
}
</STYLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="ゲ－ム開始" onclick="startplay()" style="position:absolute;top:50px;left:150px">
</FORM>
<DIV>
<!-- Set of racket -->
<img id="racket" src="racket.gif" style="top:480px;left:190px">
<!-- Set of ball -->
<img id="ball" src="ball-g.gif" style="top:430px;left:230px">
<!-- Set of blocks -->
<img class="block" id="block1" src="block1.gif" style="top:110px;left:55px">
<img class="block" id="block2" src="block1.gif" style="top:110px;left:145px">
<img class="block" id="block3" src="block1.gif" style="top:110px;left:235px">
<img class="block" id="block4" src="block1.gif" style="top:110px;left:325px">
<img class="block" id="block5" src="block2.gif" style="top:140px;left:55px">
<img class="block" id="block6" src="block2.gif" style="top:140px;left:145px">
<img class="block" id="block7" src="block2.gif" style="top:140px;left:235px">
<img class="block" id="block8" src="block2.gif" style="top:140px;left:325px">
<img class="block" id="block9" src="block3.gif" style="top:170px;left:55px">
<img class="block" id="block10" src="block3.gif" style="top:170px;left:145px">
<img class="block" id="block11" src="block3.gif" style="top:170px;left:235px">
<img class="block" id="block12" src="block3.gif" style="top:170px;left:325px">
<!-- Display of court -->
<img id="court" src="court-g.gif" style="top:80px;left:30px;z-index:-1">
</DIV>
<SCRIPT>
let mx = 0, my = 0, blocks = 12, startTime, gameRunning = false;
function startplay() {
// Reset game state
gameRunning = true;
// Set the ball to the start position
const ball = document.getElementById('ball');
ball.style.top = '430px';
ball.style.left = '230px';
// Reset block visibility
const blockElements = document.getElementsByClassName('block');
for (let i = 0; i < blockElements.length; i++) {
blockElements[i].style.display = 'block';
}
// Set the movement amount with some randomness
mx = (Math.random() > 0.5 ? 1 : -1) * (2 + Math.random());
my = -3;
// Initialize the remaining blocks
blocks = 12;
// Set the start time
startTime = new Date();
// Start the game
runningball();
}
function moveracket(event) {
if (!gameRunning) return;
const racket = document.getElementById('racket');
const court = document.getElementById('court');
const courtRect = court.getBoundingClientRect();
const racketWidth = racket.offsetWidth;
let xp = event.clientX - courtRect.left - racketWidth / 2;
// Ensure the racket stays within the court bounds
if (xp < 0) xp = 0;
if (xp + racketWidth > courtRect.width) xp = courtRect.width - racketWidth;
racket.style.left = xp + 'px';
}
document.getElementById('court').addEventListener('mousemove', moveracket);
function runningball() {
if (!gameRunning) return;
const ball = document.getElementById('ball');
const racket = document.getElementById('racket');
const court = document.getElementById('court');
let xp = parseInt(ball.style.left, 10);
let yp = parseInt(ball.style.top, 10);
const ballRect = ball.getBoundingClientRect();
const racketRect = racket.getBoundingClientRect();
const courtRect = court.getBoundingClientRect();
// Check for collision with racket
if (ballRect.bottom >= racketRect.top && ballRect.right >= racketRect.left && ballRect.left <= racketRect.right) {
// Reverse Y-axis direction and add some randomness to the bounce
my = -my;
mx += (Math.random() - 0.5) * 2;
}
// Check for collision with blocks
const blockElements = document.getElementsByClassName('block');
for (let i = 0; i < blockElements.length; i++) {
const block = blockElements[i];
const blockRect = block.getBoundingClientRect();
if (block.style.display !== 'none' &&
ballRect.right >= blockRect.left && ballRect.left <= blockRect.right &&
ballRect.bottom >= blockRect.top && ballRect.top <= blockRect.bottom) {
// Hide the block
block.style.display = 'none';
// Decrease block counter
blocks--;
my = -my;
// When all blocks are destroyed
if (blocks === 0) {
gameRunning = false;
// Calculate elapsed time
const finishTime = new Date();
const spanTime = finishTime - startTime;
alert("Game Complete!! Time: " + spanTime + "ms");
return;
}
break;
}
}
// When the ball goes out of the court horizontally
if (ballRect.left <= courtRect.left || ballRect.right >= courtRect.right) {
mx = -mx;
}
// When the ball goes out of the court vertically
if (ballRect.top <= courtRect.top) {
my = -my;
}
// When the ball falls out of the court
if (ballRect.bottom >= courtRect.bottom) {
gameRunning = false;
alert("Game Over!!");
return;
}
// Move the ball
ball.style.top = (yp + my) + 'px';
ball.style.left = (xp + mx) + 'px';
// Set itself in a timer to repeat the ball movement
window.setTimeout(runningball, 10);
}
</SCRIPT>
<p>
<FONT COLOR="white">
<STRONG><BIG>ブロック崩しゲーム</BIG></STRONG>(I.Eでのみ動作保証します)
<br>
マウスでラケット動かしてお楽しみ下さい
</FONT>
</p>
</BODY>
</HTML>
```
大昔の感覚が少し戻りました
画面は単純にしてあります
お時間のある時に試してみてください
いいなと思ったら応援しよう！
