JSは簡単にレンガを打って玉をはじく小さいゲームを実現します。
本論文の例では、JSがレンガを使ってパチンコをするという具体的なコードを共有しました。参考にしてください。具体的な内容は以下の通りです。
原生JSを使って書いたのですが、まだ傷があります。コードを直接コピーしてhtmlまで使えます。
速度はランダムであり，横方向と縦方向の速度に関係するという設定のため，小球の速度値はそれらの速度（立方とオープンルート）であることを示した。
リターンを押したり、スライド上で単独機の左ボタンを押してゲームを開始します。マウスがスライドまたはキーボードA（左）またはD（右）を動かして、スライダーの方向にボールをつなぐようにします。
このデモの意味は主に論理能力を鍛えるためです。
プラグインを使っていませんが、ちょっと汚いです。
そしてまだ存在するBUGは左右方向キーで終端値が設定されていません。位置精度が無くなり、スライダにボールが痙攣することがあります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
原生JSを使って書いたのですが、まだ傷があります。コードを直接コピーしてhtmlまで使えます。
速度はランダムであり，横方向と縦方向の速度に関係するという設定のため，小球の速度値はそれらの速度（立方とオープンルート）であることを示した。
リターンを押したり、スライド上で単独機の左ボタンを押してゲームを開始します。マウスがスライドまたはキーボードA（左）またはD（右）を動かして、スライダーの方向にボールをつなぐようにします。
このデモの意味は主に論理能力を鍛えるためです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
.container{
width: 500px;
height: 500px;
border:1px solid #000;
margin:auto;
position:relative;
}
.brickBox{
width: 500px;
height: 300px;
/* background-color: yellowgreen; */
position:absolute;
left: 0;
top: 0;
}
.ball{
width: 15px;
height: 15px;
background-color:purple;
border-radius:50%;
position:absolute;
bottom:30px;
left:235px;
/* margin-left:-15px; */
}
.slider{
width: 150px;
height: 30px;
background-color: #00f;
position:absolute;
/* left:50%; */
left:175px;
/* margin-left:-75px; */
bottom:0;
}
</style>
</head>
<body>
<div class="container">
<div class="brickBox"></div>
<div class="ball"></div>
<div class="slider"></div>
</div>
<div style="margin-left: 40%;font-size: 25px;"> : <span id="speed"></span> </div>
<div style="margin-left: 40% ;font-size: 25px;"> : <span id="count"></span> </div>
</body>
<script>
//
var container = document.querySelector('.container')
var brickBox = container.querySelector('.brickBox')
var ball = container.querySelector('.ball')
var slider = container.querySelector('.slider')
//
//
var brickWidth = 50;
var brickHeight = 15;
//
var brickNum = brickBox.clientWidth * brickBox.clientHeight / (brickWidth * brickHeight)
// console.log(brickNum);
var brickColNum = brickBox.clientWidth / brickWidth
//
for(var i=0;i<brickNum;i++){
var div = document.createElement('div')
setStyle(div,{
width:brickWidth + "px",
height:brickHeight + "px",
backgroundColor:getColor(true),
position:'absolute',
top:parseInt(i/brickColNum)*brickHeight + 'px',
left:(i%brickColNum)*brickWidth + 'px'
})
brickBox.appendChild(div)
}
//
//
var speedX = getRandom(1,8);
var speedY = getRandom(1,8);
document.querySelector("#speed").innerHTML= Math.sqrt(Math.pow(speedX,2)+Math.pow(speedY,2))
var timer;
//
slider.onclick = move;
//
function move(){
var count=0;
clearInterval(timer)
timer = setInterval(function(){
//
// left top
let left = ball.offsetLeft;
let top = ball.offsetTop;
// left top
//
if(boom(slider,ball)){
speedY = -speedY
}
//
if(left<=0 || left>=container.clientWidth - ball.offsetWidth){
speedX = -speedX
}
if(top<=0){
speedY = -speedY
}
//
for(let i=0;i<brickBox.children.length;i++){
if(boom(brickBox.children[i],ball)){
speedY = -speedY
brickBox.removeChild(brickBox.children[i]);
count++;
}
}
console.log(count)
document.querySelector("#count").innerHTML=count
// GAME OVER
if(top>=container.clientHeight-ball.offsetHeight){
clearInterval(timer)
if(confirm("GAME OVER, ")){
location.reload();
}else{alert(' '+count)}
}
left += speedX
top += speedY
// left top
ball.style.left = left + "px"
ball.style.top = top + "px"
},20)
}
//
slider.onmouseover = function(){
document.onmousemove = function(e){
var e = e || window.event;
var x = e.pageX;
var l = x - container.offsetLeft - 1 - slider.offsetWidth/2
if(l<0){
l = 0
}
if(l > container.clientWidth - slider.offsetWidth){
l = container.clientWidth - slider.offsetWidth
}
slider.style.left = l + "px"
}
}
//
window.onload= function(){
document.onkeydown = e=>{
var e = e || window.event;
var keycode = e.keyCode || e.which;
var keyword = String.fromCharCode(keycode).toLowerCase();
if(keycode==13){
move();
}
if(keyword=='a'){
console.log("1111")
slider.style.left= slider.offsetLeft-15+"px"
}else if(keyword=='d'){
console.log("222")
slider.style.left=slider.offsetLeft+15+"px"
}
console.log(slider.offsetLeft)
}
}
//
function boom(node1,node2){
// 4
if(node1.offsetLeft+node1.offsetWidth<node2.offsetLeft || node1.offsetTop+node1.offsetHeight<node2.offsetTop || node2.offsetLeft+node2.offsetWidth<node1.offsetLeft || node2.offsetTop+node2.offsetHeight<node1.offsetTop){
return false;
}else{
return true;
}
}
//
function getColor(hex=true){
if(hex){
var color = '#'
for(var i=0;i<3;i++){
var rgb = getRandom(256).toString(16);
rgb = rgb.length===1?'0'+rgb:rgb;
color += rgb
}
return color;
}
return `rgb(${getRandom(256)},${getRandom(256)},${getRandom(256)})`
}
//
function setStyle(ele,styleObj){
for(var attr in styleObj){
ele.style[attr] = styleObj[attr]
}
}
//
function getRandom(a,b=0){
var max = Math.max(a,b);
var min = Math.min(a,b)
return Math.floor(Math.random() * (max-min)) + min
}
</script>
</html>プラグインを使っていませんが、ちょっと汚いです。
そしてまだ存在するBUGは左右方向キーで終端値が設定されていません。位置精度が無くなり、スライダにボールが痙攣することがあります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。