javascriptはレンガゲームをすることを実現します。（完全なソースを添付します。）
子供の頃、一日のレンガゲームをして、ソースの整合性を付け加えました。
はい？いいね？
図のように実現する
需要分析
1、小さいボールは大きな箱に触れて、左、右の枠とスライダーの後で別の方向に反発して、下の枠に触れてからゲームが終わります。
2、ボールはブロックに触れた後、ブロックが消える。
3、すべてのブロックを削除してゲームに勝利します。
4、スライドはマウスとキーボードの両方で移動できます。
5、ゲームの難易度は調整でき、リアルタイムでスコアが表示されます。
コード解析
1、html構造：左右の2つのボックスにそれぞれ一つのdivを使って、その中に必要な内容を追加します。真ん中の本体部分は一つのdivを使って、中には一つのスライダ、一つのボール、そして全てのブロックが入ったbrick箱を使って、jsを使ってbrickに四角を動的に添加します。これによってdivの数が大幅に減少しました。構造を簡略化しました。
2、cssスタイル：position：relative/absolute/fixedを使うことによって、ページ全体のレイアウトを完成します。
3、js行為：まず小さいボールの運動に対して、私達はset Intervalタイマーを使って実現します。ボールとブロックとブロックの衝突は衝突検出関数によって実現されます。スライドの移動には2つの方法が必要です。マウスを使ってドラッグできます。キーボードを使ったイベントを実現します。
いくつかのパッケージの関数
動的に正方形を作成
関数解析
まず、私たちはid="brick"のdivケースにnつのブロックを動的に挿入し、cssには予めこれらの箱に固定された幅の高さを設定し、左の浮動レイアウトを設定しました。このようにして、すべての正方形は左から右へと上から下へと箱の中に並べられます。しかし、浮動レイアウトを通して、中間のブロックに衝突して消えたら、後ろのブロックが補充されます。これは私達が欲しいものではありません。
2、後ろのブロックが前に移動するのを防止するために、明らかに浮動小数点を使用することができません。ここでは、ブロックごとに絶対位置を使用します。
3、各ブロックを絶対的に位置決めする前に、私たちは先にそれらの現在位置のleftとtop値を取得し、それらを与えます。そうでないと、ブロックはすべて一つの格子の中に押し込まれます。
4、最後に各ブロックを絶対的に位置決めします。
コード解析は前のページを見ました。
はい？いいね？
図のように実現する
需要分析
1、小さいボールは大きな箱に触れて、左、右の枠とスライダーの後で別の方向に反発して、下の枠に触れてからゲームが終わります。
2、ボールはブロックに触れた後、ブロックが消える。
3、すべてのブロックを削除してゲームに勝利します。
4、スライドはマウスとキーボードの両方で移動できます。
5、ゲームの難易度は調整でき、リアルタイムでスコアが表示されます。
コード解析
1、html構造：左右の2つのボックスにそれぞれ一つのdivを使って、その中に必要な内容を追加します。真ん中の本体部分は一つのdivを使って、中には一つのスライダ、一つのボール、そして全てのブロックが入ったbrick箱を使って、jsを使ってbrickに四角を動的に添加します。これによってdivの数が大幅に減少しました。構造を簡略化しました。
2、cssスタイル：position：relative/absolute/fixedを使うことによって、ページ全体のレイアウトを完成します。
3、js行為：まず小さいボールの運動に対して、私達はset Intervalタイマーを使って実現します。ボールとブロックとブロックの衝突は衝突検出関数によって実現されます。スライドの移動には2つの方法が必要です。マウスを使ってドラッグできます。キーボードを使ったイベントを実現します。
いくつかのパッケージの関数
動的に正方形を作成
関数解析
まず、私たちはid="brick"のdivケースにnつのブロックを動的に挿入し、cssには予めこれらの箱に固定された幅の高さを設定し、左の浮動レイアウトを設定しました。このようにして、すべての正方形は左から右へと上から下へと箱の中に並べられます。しかし、浮動レイアウトを通して、中間のブロックに衝突して消えたら、後ろのブロックが補充されます。これは私達が欲しいものではありません。
2、後ろのブロックが前に移動するのを防止するために、明らかに浮動小数点を使用することができません。ここでは、ブロックごとに絶対位置を使用します。
3、各ブロックを絶対的に位置決めする前に、私たちは先にそれらの現在位置のleftとtop値を取得し、それらを与えます。そうでないと、ブロックはすべて一つの格子の中に押し込まれます。
4、最後に各ブロックを絶対的に位置決めします。
function createBrick(n){
var oBrick = document.getElementById("brick")
// brick n div ，
for(var i = 0; i<n; i++){
var node = document.createElement("div");
node.style.backgroundColor= color();
oBrick.appendChild(node);
}
//
var brickArr = obrick.getElementsByTagName("div")
// ， left top
for(var i=0;i<brickArr.length;i++){
brickArr[i].style.left = brickArr[i].offsetLeft+"px";
brickArr[i].style.top = brickArr[i].offsetTop+"px";
}
// ，
for(var i =0;i<brickArr.length;i++){
brickArr[i].style.position="absolute";
}
}コード解析は前のページを見ました。
function knock(node1,node2){
var l1 = node1.offsetLeft;
var r1 = node1.offsetLeft + node1.offsetWidth;
var t1 = node1.offsetTop;
var b1 = node1.offsetTop+node1.offsetHeight;
var l2 = node2.offsetLeft;
var r2 = node2.offsetLeft + node2.offsetWidth;
var t2 = node2.offsetTop;
var b2 = node2.offsetTop+node2.offsetHeight;
if(l2>r1||r2<l1||t2>b1||b2<t1){
return false;
}else{
return true;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<style>
#box{
width: 600px;height: 650px;border: 5px solid rgb(168, 139, 8);
position: relative;left: 500px;
background:linear-gradient(rgb(19, 192, 120),rgb(47, 32, 114));
}
#ball{
width: 20px;height: 20px;border-radius: 10px;
background-color: white;position: absolute;
top: 560px;box-shadow: 0px 0px 3px 3px aqua;
}
#btn{
width: 150px;height: 90px;position: fixed;left: 730px;top: 350px;
border-radius: 10px;font-size: 24px;cursor: pointer;
}
#slider{
width: 120px;height: 20px;background-color: rgb(168, 139, 8);position: absolute;
top: 585px;border-radius: 10px;box-shadow: 0px 0px 2px 2px red;cursor: pointer;
}
#brick div{
width: 98px;height: 20px;float: left;border: 1px solid black;
}
#tip{
width: 280px;position:fixed;top: 100px;left: 150px;
border: 1px solid black;text-indent: 2em;padding: 10px;border-radius: 20px;
}
#grade{
width: 180px;position:fixed;top: 100px;left: 1150px;
border: 1px solid black;text-indent: 2em;padding: 10px;border-radius: 20px;
}
#grade h3{
font-weight: 500;
}
</style>
</head>
<body>
<div id="box">
<div id="ball"></div>
<div id="slider"></div>
<div id="brick"></div>
</div>
<div id="tip">
<h1> </h1>
<p> </p>
<p> 1： ， ， </p>
<p> 2： “ ”“ ” ， </p>
<p> </p>
<p> </p>
</div>
<div id="grade">
<h3> ：</h3>
<h2>XXX</h2>
<h3> :</h3>
<h1>00</h1>
</div>
<button id="btn"> </button>
<script>
var box = document.getElementById("box");
var ball = document.getElementById("ball");
var btn = document.getElementById("btn");
var slider = document.getElementById("slider")
var obrick = document.getElementById("brick")
var brickArr = obrick.getElementsByTagName("div")
var grade = document.getElementById("grade")
var rank = grade.children[1]
var score = grade.children[3]
var sco = 0;
var timer;
var isRunning = false;
var speedX = rand(3,12);
var speedY = -rand(3,12);
var num =speedX-speedY;
console.log(num)
switch(num){
case 6:case 7:case 8:
rank.innerHTML=" ";
break;
case 9:case 10:case 11:
rank.innerHTML=" ";
break;
case 12:case 13:case 14:
rank.innerHTML=" ";
break;
case 15:case 16:case 17:
rank.innerHTML=" "
break;
case 18:case 19:case 20:
rank.innerHTML=" "
slider.style.width = 100+"px";
break;
case 21:case 22:
rank.innerHTML=" "
slider.style.width = 80+"px";
break;
case 23:case 24:
rank.innerHTML=" "
slider.style.width = 60+"px";
break;
}
//
var beginGo = rand(100,500)
ball.style.left = beginGo +40 +"px"
slider.style.left = beginGo +"px"
//
btn.onclick = function(){
btn.style.display="none";
isRunning = true;
clearInterval(timer);
timer = setInterval(function(){
//
var ballLeft = ball.offsetLeft;
var ballTop = ball.offsetTop;
//
var nextleft = ballLeft + speedX;
var nexttop = ballTop + speedY;
// ， left ，
if(nextleft<=0||nextleft>=box.offsetWidth-ball.offsetWidth-10){
speedX=-speedX;
}
// ， top ，
if(nexttop<=0){
speedY=-speedY;
}
// ， “ ”，
if(nexttop>box.offsetHeight-ball.offsetHeight){
location.reload();
alert("You were dead！")
}
//
ball.style.left = nextleft+"px";
ball.style.top= nexttop+"px";
//
if(knock(ball,slider)){
speedY=-speedY;
}
//
for(var j=0; j<brickArr.length;j++){
if(knock(brickArr[j],ball)){
speedY=-speedY
obrick.removeChild(brickArr[j]);
sco++;
score.innerHTML=sco;
break;
}
}
// 0 ， “ ”，
if(brickArr.length<=0){
location.reload();
alert("You win!")
}
},20)
}
//
slider.onmousedown = function(e){
var e = e||window.event;
//
var offsetX = e.clientX - slider.offsetLeft;
if(isRunning){
document.onmousemove = function(e){
var e = e||window.event;
var l =e.clientX-offsetX;
if(l<=0){
l=0;
}
if(l>=box.offsetWidth-slider.offsetWidth-10){
l=box.offsetWidth-slider.offsetWidth-10 ;
}
slider.style.left = l + "px";
}
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
//
document.onkeydown = function(e){
var e = e||window.event;
var code = e.keyCode || e.which;
var offsetX = slider.offsetLeft;
if(isRunning){
switch(code){
case 37:
if(offsetX<=0){
slider.style.left=0
break;
}
slider.style.left = offsetX*4/5 + "px";
break;
case 39:
if(offsetX>=box.offsetWidth-slider.offsetWidth-10){
slider.style.left=box.offsetWidth-slider.offsetWidth;
break;
}
slider.style.left = (box.offsetWidth-slider.offsetWidth-offsetX)/5 +offsetX + "px";
break;
}
}
}
createBrick(72)
//
function createBrick(n){
var oBrick = document.getElementById("brick")
// brick n div ，
for(var i = 0; i<n; i++){
var node = document.createElement("div");
node.style.backgroundColor= color();
oBrick.appendChild(node);
}
//
var brickArr = obrick.getElementsByTagName("div")
// ， left top
for(var i=0;i<brickArr.length;i++){
brickArr[i].style.left = brickArr[i].offsetLeft+"px";
brickArr[i].style.top = brickArr[i].offsetTop+"px";
}
// ，
for(var i =0;i<brickArr.length;i++){
brickArr[i].style.position="absolute";
}
}
//
function color(){
var result= "#";
for(var i=0;i<6;i++){
result += rand(0,15).toString(16)
// :0 1 ...9 a b c d f
}
return result;
}
//
function rand(n,m){
return n+parseInt(Math.random()*(m-n+1));
}
//
function knock(node1,node2){
var l1 = node1.offsetLeft;
var r1 = node1.offsetLeft + node1.offsetWidth;
var t1 = node1.offsetTop;
var b1 = node1.offsetTop+node1.offsetHeight;
var l2 = node2.offsetLeft;
var r2 = node2.offsetLeft + node2.offsetWidth;
var t2 = node2.offsetTop;
var b2 = node2.offsetTop+node2.offsetHeight;
if(l2>r1||r2<l1||t2>b1||b2<t1){
return false;
}else{
return true;
}
}
</script>
</body>
</html>