오리지널 자바스크립트 미니게임 구현 code_javascript 스킬-JS 튜토리얼-php.cn

오리지널 자바스크립트 미니게임 구현 code_javascript 스킬

WBOY

풀어 주다： 2016-05-16 18:21:06

원래의

1269명이 탐색했습니다.

코드는 다음과 같습니다.

<머리>

jjb

<스크립트 언어="javascript">
(함수(){
(new Image()).src = "38.gif";
(new Image()).src = "48.gif";
(새 이미지 ()).src = "bike.gif";
(new Image()).src = "bike2.gif"
(new Image()).src = "bg.gif"; >})();
//缓存加载图文
function $(id) {return document.getElementById(id);}
var boxBaseAttr = new Object;
boxBaseAttr = {
너비: "26px",
높이: "40px",
위치: "절대",
상단: "30px",
배경: "url( 38.gif) 반복되지 않는 중앙 상단",
zIndex : 10
};
var boxBaseAttr2 = 새 개체;
boxBaseAttr2 = {
너비: "26px",
높이: "40px",
위치: "절대",
상단: "30px",
배경: "url( 48.gif) 반복되지 않는 중앙 상단",
zIndex : 10
};

var ele = 새 개체;
ele = {
div : document.createElement("div"),
span: function(){
var sp = document.createElement("span");
for(var s in boxBaseAttr) {
sp.style[s] = boxBaseAttr[s];
}
sp.setAttribute("type", "good");
sp 반환;
},
badspan : function (){
var sp2 = document.createElement("span");
for(var s in boxBaseAttr2) {
sp2.style[s] = boxBaseAttr2[s];
}
sp2.setAttribute("type", "bad");
sp2를 반환합니다.
}
};

var sco = 0, lifeWidth = 690, lifes = true;
var bar = {
getScore : function () {
sco = 10;
$("sc").innerHTML = sco;
},
loseScore : 함수 (){
sco -= 10;
$("sc").innerHTML = sco;
},
life : function (){
var life = $("life");
var sl = setInterval(function(){
if(lifeWidth < 23) {
lifes = false;
clearInterval(sl);
return;
}
else {
lifeWidth -= 23;
life.style.width = lifeWidth "px"
}
},1000);
}
};
var fire = {
init : function (o, x, y) {
o.style.display = "block";
o.style.left = x "px";
o.style.top = y "px";
var fs = setInterval(function(){
if (y >= 280) {
y -= 10;
o.style.top = y "px";
}
else{
clearInterval(fs);
o.style.display = "없음"
}
},10);
}
};

/*-- 게임 시작 ---*/
function game() {
var content = $("content"), x = 0;
var pigBaseAttr = 새 개체;
pigBaseAttr = {
배경 : "url(bike.gif) 반복 없음 중앙 상단",
위치 : "절대",
top : content.clientHeight-44 "px",
왼쪽: (content.clientWidth - 45)/2 "px",
너비: "45px",
높이: "44px",
zIndex: 1000
};
var pig = ele.div.cloneNode(true);
for(var s in pigBaseAttr) {
pig.style[s] = pigBaseAttr[s];
}
content.appendChild(돼지);

/* -- 小猪移动功能begin--*/
content.onmousemove = 함수(이벤트){
var e = 이벤트 || 창.이벤트;
if ( x > e.clientX) {
//pig.style.width = "110px";
pig.style.Background = "url(bike.gif) 반복 없음 왼쪽 상단";
if (e.clientX -45 < 0) {
pig.style.left = "0px";
} else if(e.clientX 45 > 800) {
pig.style.left = "755px";
}
else {
pig.style.left = (e.clientX - 45) "px";
}
}
else if (x < e.clientX) {
//pig.style.width = "110px";
pig.style.Background = "url(bike2.gif) 반복되지 않는 오른쪽 상단";
if (e.clientX -45 < 0) {
pig.style.left = "0px";
} else if(e.clientX 45 > 800) {
pig.style.left = "755px";
}
else {
pig.style.left = (e.clientX - 45) "px";
}
}
x = e.clientX;
}

/*-- 충돌이 있는지 확인하기 위해 수신 매개변수는 box 및 content입니다. --*/
function Meet(obox,parent) {
var objX = obox.offsetLeft;
var pigX = pig.offsetLeft;
var boxType = obox.getAttribute("type")
if (objX 26 >= pigX && objX <= pigX 45) {
if ( boxType == " good") {
bar.getScore();
fire.init($("jia"), pigX, pig.offsetTop-30)
}
else if( boxType == " bad") {
bar.loseScore();
fire.init($("jian"), pigX, pig.offsetTop-30)
obox.style .left = " -2000px";
}
}

/* -- 임의의 위치에 금화 생성 시작--*/
function createbox() {
var box = ele.span( );
var b = 30;
var boxLeft = Math.floor(Math.random()*760);//임의의 거리 생성
box.style.left = boxLeft " px";
content.appendChild(box);
//상자가 게임 인터페이스에 들어가서 움직이기 시작하고 충돌 여부를 비교하기 위해 함수와 pig를 실행하기 시작합니다.
var st = setInterval(function ( ){
if (b < ; 460){
box.style.top = b 5 "px"
b = 5
if (b >= 416) {
Meet(box, content)
}
}
else {
content.removeChild(box)
clearInterval(st)
b
}
},5);
}

function createbadbox() {
var box = ele.badspan()
var b = 30; Floor(Math.random()*760 );//임의의 거리 생성
box.style.left = boxLeft "px";
content.appendChild(box)
//box가 게임 인터페이스에 들어갑니다. , 이동 시작, 함수 실행 시작 및 pig 충돌 여부 확인
var st = setInterval(function (){
if (b < 460){
box.style.top = b 5 "px" ;
b = 5;
if (b > 416) {
meet(box, content)
}
}
else {
content.removeChild(box );
clearInterval(st) ;
}
},5)

bar.life(); >/*-- 루프 추가 상자 함수 실행 시작--*/
var xt = setInterval(function(){
if (lifes == false) {
clearInterval(xt);
alert ("시간이 다 되었습니다. 점수는 다음과 같습니다." sco)
lifeWidth = 690;
lifes = true
sco = 0; block";
$(" start").value = "다시 재생";
content.removeChild(pig);

}else{
createbox();
createbadbox ();
}
},500)
}

window.onload = function () {
$("start").onclick = function () {
$("startbox") .style.display = "none";
새 게임()
}
}
🎜>

게임 규칙:

(1) 30초밖에 남지 않았습니다. 마우스를 사용하여 돼지를 좌우로 움직이세요.

(2) 돼지가 소녀, 10포인트 추가;