オリジナルJavaScriptミニゲーム実装コード_JavaScriptスキル-jsチュートリアル-php.cn

オリジナルJavaScriptミニゲーム実装コード_JavaScriptスキル

WBOY

リリース： 2016-05-16 18:21:06

オリジナル

1269 人が閲覧しました

コードは次のとおりです:

jjb

<スクリプト言語="javascript">
(function (){
(新しい画像()).src = "38.gif";
(新しい画像()).src = "48.gif";
(新しい画像()).src = "bike.gif";
(新しい画像()).src = "bike2.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("タイプ", "良い");
リターン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 : function (){
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 = "ブロック";
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 = "none"
}
},10);
}
};

/*-- ゲーム開始 --*/
function game() {
var content = $("content"), x = 0;
var pigBaseAttr = 新しいオブジェクト;
pigBaseAttr = {
background : "url(bike.gif) no-repeat center top",
position : "absolute",
top : content.clientHeight-44 "px",
left : (content.clientWidth - 45)/2 "px",
width : "45px",
height : "44px",
zIndex : 1000
};
var pig = ele.div.cloneNode(true);
for(var s in pigBaseAttr) {
pig.style[s] = pigBaseAttr[s];
}
content.appendChild(pig);

/* -- 小猪移動機能begin--*/
content.onmousemove = function (event){
var e = events ||ウィンドウ.イベント;
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 meets(obox,parent) {
var objX = obox.offsetLeft;
var pigX = pig.offsetLeft;
var boxType = obox.getAttribute("type");
if (objX 26 >= pigX && objX if ( boxType == " 良い") {
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";
}
}

/* -- ランダムな場所に金貨を作成します begin--*/
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)
}
}
else {
content.removeChild(box);
b = 30; 🎜>},5);
}

function createbadbox() {
var box = ele.badspan();
var boxLeft = 数学。 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(ボックス, コンテンツ);
else {
content.removeChild );
clearInterval(st);
}
},5); >/*-- ループ加算ボックス関数の実行開始--*/
var xt = setInterval(function(){
if (lifes == false) {
clearInterval(xt);
alert ("時間切れ、スコアは :" sco);
lifeWidth = 690
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 ポイント追加;