JS 미니 게임
;
(function (newChild) {
function NodeConstructor() {}
NodeConstructor.prototype = {
constructor : NodeConstructor,
// px
pcEmAttr : ['width','height','margin','padding','left','top','right','bottom'],
//
createNode : function(_type, callback) {
let node = document.createElement(_type);
return callback && callback.call(this, node) || node;
}, //
style : function(node , attr){
this.enmuerate(attr,function (value , key) {
if (this.inArray(key, this.pcEmAttr) && value / 1){
node.style[key] = value + 'px';
} else {
node.style[key] = value;
}
})
},
// ,
enmuerate : function(enmuerates , callback) {
if (this.isArray(enmuerates)) {
for ( let i = 0 , iL = enmuerates.length; i < iL ; i++){
callback.call(this , enmuerates[i],i,enmuerates);
}
} else {
for (let key in enmuerates) {
callback.call(this, enmuerates[key], key, enmuerates);
}
}
},
//
inArray: function(value , arr){
return new RegExp(`\\b${value}\\b`, 'i').test(arr.toString());
},
//
isArray : function (arr) {
return arr instanceof Array;
}
};
/*==================================== ============================================================*/
//
function Ready(){}
Ready.prototype = NodeConstructor.prototype;
//
/*----------------------------------- --------------------------------------------------*/
function GameConstructor() {}
GameConstructor.prototype = new Ready();
GameConstructor.prototype.constructor = GameConstructor;
//
GameConstructor.prototype.init = function (options) {
//
this.node = options.node;
//
this.width = options.width || 600;//
this.height = options.height || 600;//
this.enemy = options.enemy || 4;//
this.level = options.level || 80;
this.level = Math.min(this.level , 120);
this.level = Math.max(80 , this.level);//
// this.style Ready prototype
this.style(this.node , {
width : this.width,
height : this.height
});
return this;
};
//
/**************************************** *******************************************************/
//
GameConstructor.prototype.start = function () {
//
this.document = document.createDocumentFragment();
// console.dir(this.document);
// this.document.appendChild(document.createElement('div'));//
//
this.createSelf();
//
this.createEnemys();
//
this.timers();
//
this.node.appendChild(this.document);
//
this.up();
};
//
GameConstructor.prototype.timers = function (){
//
this.goTime = new Date();
//
this.upTime = null;
};
//
GameConstructor.prototype.createSelf = function() {
this.player = this.createNode('div' , function(player){
player.className = "self";
this.style(player,{
width : 50,
height : 50,
left : this.width/2 - 25,
top : this.height/2 -25
});
//
let that = this;
//
/*
player.addEventListener("mousedown" , function(){
document.onmousemove = () => {
console.log(that);
}
});
player.addEventListener("mouseup" , function(){
document.onmousemove = null;
});
player.addEventListener("mouseleave" , function () {
document.onmousemove = null;
})
*/
player.onmousedown = (e) => {
let goX = e.clientX,
goY = e.clientY,
goLeft = player.offsetLeft,
goTop = player.offsetTop;
that.node.onmousemove = (e) => {
that.style(player , {
left : e.clientX - goX + goLeft,
top : e.clientY - goY + goTop
})
};
that.node.onmouseleave = that.node.onmouseup = () => {
that.node.onmousemove = null;
}
}
});
this.document.appendChild(this.player);
};
//
GameConstructor.prototype.createEnemys = function () {
//
this.enemys = new Array(this.enemy);
//
this.enmuerate(this.enemys , function (value , key ,arr) {
let attr = {
width : this.random(45 , this.width/10),
};
attr.height = attr.width;
attr.top = this.random(0 , this.height - attr.height);//top
//
if (this.random(0,1)){//
attr.left = this.random(0 , Math.abs(this.width/5 - attr.width));
} else {
attr.left = this.random(Math.abs(this.width - 2*attr.width) , Math.abs(this.width - attr.width));
}
//
let node = this.createNode('div', function (node) {
node.className = `enemy${this.random(1, 8)}`;
this.style(node, attr)
});
//
attr.node = node;
//
//
attr.Xv = this.random(this.width/this.level , this.width / 120);
attr.Yv = attr.Xv;
if (this.half(attr.left , this.width) ){
attr.Xv /= -1;
}
// ,
if (this.half(attr.top , this.height)){
attr.Yv /= -1;
}
//
this.document.appendChild(node);
arr[key] = attr;//
});
// console.log(this.enemys);
};
// , ,
GameConstructor.prototype.half = function (n,m) {
return n >= m/2;
};
//
GameConstructor.prototype.random = function(n , m){
return Math.floor(Math.random() * (Math.abs(m - n) + 1) + Math.min(n,m));
};//
//
GameConstructor.prototype.moveEnemys = function(){
this.enmuerate(this.enemys , function (enemy) {
enemy.left += enemy.Xv;
enemy.top += enemy.Yv;
//
if (enemy.left <= 0) {
enemy.left = 0;
enemy.Xv /= -1;
}
if (enemy.left > this.width - enemy.width) {
enemy.left =this.width - enemy.width;
enemy.Xv /=-1;
}
if (enemy.top <= 0) {
enemy.top = 0;
enemy.Yv /= -1;
}
if (enemy.top >= this.height - enemy.height) {
enemy.top = this.height - enemy.height;
enemy.Yv /=-1;
}
// ^
//
if (enemy.Xv > 0) {
this.style(enemy.node ,{
"transform": "scale(-1,1)"
})
} else {
this.style(enemy.node ,{
"transform": "scale(1,1)"
})
}
// console.log(enemy.node);
this.style(enemy.node , {
left : enemy.left,
top : enemy.top
})
})
};
/**************************************** *******************************************************/
GameConstructor.prototype.up = function () {
//
this.moveEnemys();
//
this.changeLevel();
//
if(this.checkBom()){
this.end();
} else {
this.timer = requestAnimationFrame(this.up.bind(this));
}
// requestAnimationFrame(this.up);
};
//
GameConstructor.prototype.changeLevel = function () {
if (new Date() - this.upTime > 5000 || this.upTime === null) {
// console.log(" ");
this.enmuerate(this.enemys , function (enemy) {
if ((Math.abs(enemy.Xv)) <= this.width / 40 && Math.abs(enemy.Yv) <= this.height / 40){
enemy.Xv *= this.random(0,5) / 10 + 1;
enemy.Yv *= this.random(0,5) / 10 + 1;
} else {
enemy.Xv = Math.abs(this.random(this.width/this.level , this.width / 120));
enemy.Yv = Math.abs(enemy.Xv);
}
});
this.upTime = new Date();
}
};
//
GameConstructor.prototype.checkBom = function () {
let status = false;
//
if (this.player.offsetLeft <= 0) {
status = true;
}
if (this.player.offsetLeft >= this.width - this.player.offsetWidth) {
status = true;
}
//
if (this.player.offsetTop <= 0) {
status = true;
}
if (this.player.offsetTop >= this.height - this.player.offsetHeight) {
status = true;
}
//
this.enmuerate(this.enemys,function(enemy){
if(this.isBoom(this.player,enemy.node)){
status = true;
}
});
return status;
};
GameConstructor.prototype.isBoom = function (node1 , node2) {
let _left = (node1.offsetLeft + node1.offsetWidth/2) - (node2.offsetLeft + node2.offsetWidth/2),
_top = (node1.offsetTop + node1.offsetHeight/2) - (node2.offsetTop + node2.offsetHeight/2);
let c = Math.sqrt(_left*_left + _top*_top);
return c <= node1.offsetWidth/2 + node2.offsetWidth/2;
};
/**************************************** *******************************************************/
GameConstructor.prototype.end = function () {
//
this.node.onmousemove = null;
//
cancelAnimationFrame(this.timer);
//
this.endTime = new Date();
alert("Game Over :" + (this.endTime - this.goTime) /1000 + "s" );
};
// windows
window.missGame = function (options) {
// gameConstructor init
return new GameConstructor().init(options);
}
})();
/*
->
->
:
:
:
*/
//
const oWrap = document.getElementById("wrap");
let newGame =missGame({
node : document.querySelector('#wrap'),
enemy : 2,
level : 100
});
newGame.start();
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.