av中文字幕在綫亚洲,综合无码字幕中文

使用HTML5、css3和js編寫網(wǎng)頁游戲

(扣除1次后發(fā)送網(wǎng)絡(luò)學(xué)習(xí)資料)

顯示效果：

HTML5和css3

！Doctype html

Html

頭(電影)

meta charset=' utf-8 '

標(biāo)題狩獵游戲/標(biāo)題

腳本src='；/腳本

腳本src=' ver/腳本

風(fēng)格(音樂)

Body {

width : 100%；

海特： 100%；

}

#page {

Position: relative:

海特： 700px

background-image : URL)；

background-size : cover；

}

H1 {

Color: red

Position:relative:

Font-family:宋體；

文本-align :中心：

padding-top : 30 px；

}

#scort{

Color: red

Position: relative:

Font-family:宋體；

Font-size: 30px:

padding-top : 20 px；

margin-left :100 px；

}

#time{

Color: red

Position: relative:

Font-family:宋體；

Font-size: 30px:

padding-top : 30 px；

Margin-left: 100px:

}

#start {

Border-radius: 15px:

background-color : red；

Position: relative:

毛利塔3360 280px

文本-align :中心：

Margin-left: 530px:

Width: 155px

海特： 50px

Color: # 000000

font-weight : 800；

font-size : 20 px；

}

#ru {

Border-radius: 15px:

background-color : red；

Position: relative:

毛利塔3360 10px

Margin-left: 530px:

Width: 155px

海特： 50px

Color: # 000000

font-weight: 800;

font-size: 20px;

}

.rules{

width: 100%;

height: 100%;

background: rgba(0,0,0,0.5);

padding: 100px 0;

box-sizing: border-box;

position: absolute;

left: 0;

top:0;

text-align: center;

font-family: 宋體;

font-size: 20px;

font-weight: 700;

display: none;

}

#end {

width: 100%;

height: 100%;

background: rgba(0,0,0,0.5);

padding: 100px 0;

box-sizing: border-box;

position: absolute;

left: 0;

top:0;

color: red;

text-align: center;

font-family: 宋體;

font-size: 20px;

font-weight: 700;

display: none;

}

#reset {

border-radius: 15px;

background-color: red;

position: relative;

margin-top: 120px;

text-align: center;

margin-left: 10px;

width: 155px;

height: 50px;

color: #000000;

font-weight: 800;

font-size: 20px;

}

</style>

</head>

<body>

<p>1.游戲時間為30s</p><br>

<p>2.射中兔子和小猴子+10分,射中白狐-50,射中鳳凰+20,射中鷹+20分</p><br>

<p>3.比的是眼疾手快!</p><br>

</div>

</div>

</body>

</html>

js代碼

// JavaScript Document
$(function(){
"use strict";
var rules =$(".rules"); //規(guī)則展示面板
var start = $("#start"); //開始游戲按鈕
var ru = $("#ru"); //游戲規(guī)則按鈕
var process = $("#second"); //時間進(jìn)度
var $end=$("#end"); //游戲結(jié)束
var $score = $("#first");
var $reset=$("#reset");
var score = 0;

//監(jiān)聽游戲規(guī)則按鈕
ru.click(function () {
rules.fadeIn(400,function () {
});
});

//監(jiān)聽關(guān)閉游戲規(guī)則頁面
$("a").click(function () {
rules.fadeOut(400,function () {
});
});

var temp;

//監(jiān)聽開始游戲按鈕
(function(){
();
ru.hide();
temp=0;
times();
startMove();
});

//監(jiān)聽重新開始按鈕
$re(function () {
//關(guān)閉游戲結(jié)束面板（mask）
$end.hide();
//恢復(fù)進(jìn)度條
times();
temp=0;
//開始游戲
startMove();
//分?jǐn)?shù)清零
$(0);
score=0;

});

function times() {
//設(shè)置進(jìn)度條為100%狀態(tài)
(30);

var timer = setInterval(function () {

temp++;
//重新給process賦值
(30-temp);

//判斷時間是否已到
if(temp===30){
//清除定時器
clearInterval(timer);
//顯示游戲結(jié)束畫面
$end.fadeIn(300,function () {
});
stopMove();
}
},1000);
}

// 定義兩個數(shù)組保存所有動物的圖片

var rabits=['ranimal2.gif','ranimal4.gif','ranimal5.gif','arnimal.gif','ranimal10.gif','arnimal.gif'];

var bird=['animal6.gif','animal8.gif','anrimal9.gif','animal6.gif'];

// 定義兩個數(shù)組保存所有可能出現(xiàn)的位置
var arrPos1 = [
{left:"100px",top:"450px"},
{left:"200px",top:"450px"},
{left:"300px",top:"450px"},
{left:"1000px",top:"450px"},
{left:"800px",top:"450px"}
];

var arrPos2 =[{left:"200px",top:"200px"},
{left:"100px",top:"100px"},
{left:"300px",top:"50px"},
{left:"1000px",top:"60px"},{left:"800px",top:"0px"}];

var animalTimer;
var animalPos;
var animalType;

function startMove(){

animalPos = Ma()*3);
animalType = Ma()*1)===1?rabits:bird;

if(animalType=== rabits){
//生成小動物jQuery dom對象
var $animalImage = $("<img src='' class='animalImage' alt=''>");
$animalImage.css({
position:"absolute",
left:arrPos1[animalPos].left,
top:arrPos1[animalPos].top,
width:"200px",
height:"220px",
display:"none"
});

var $animalImage3 = $("<img src='animal6.gif' class='animalImage3' alt=''>");
$animalImage3.css({
position:"absolute",
left:"800px",
top:"0px",
width:"200px",
height:"220px",
display:"none"
});

$("#page").append($animalImage3);
$animalImage3.fadeIn(300);
$animalImage3.click(function(){
$(score+=10);
$animalImage3.fadeOut(300);
});

var animalIndex = 0;
var animalIndexEnd = 4;

//將圖片添加到界面容器中
$("#page").append($animalImage);
$animalImage.fadeIn(300);

animalTimer = setInterval(function () {
if(animalIndex>animalIndexEnd){
$animalImage.stop().remove();
$animalImage3.fadeOut(300);
clearInterval(animalTimer);
startMove();
}
$animalImage.attr("src",animalType[animalIndex]);
animalIndex++;

},400);
//判斷加分或減分
judgeRule($animalImage);
}

if(animalType===bird){
//生成小動物jQuery dom對象
var $animalImage1 = $("<img src='' class='animalImage1' alt=''>");
$animalImage1.css({
position:"absolute",
left:arrPos2[animalPos].left,
top:arrPos2[animalPos].top,
width:"200px",
height:"220px",
display:"none"
});

var $animalImage2 = $("<img src='ranimal2.gif' class='animalImage2' alt=''>");
$animalImage2.css({
position:"absolute",
left:"500px",
top:"450px",
width:"200px",
height:"220px",
display:"none"
});

$("#page").append($animalImage2);
$animalImage2.fadeIn(300);
$animalImage2.click(function(){
$(score+=10);
$animalImage2.fadeOut(300);
});

var $animalImage4 = $("<img src='ranimal5.gif' class='animalImage4' alt=''>");
$animalImage4.css({
position:"absolute",
left:"700px",
top:"450px",
width:"200px",
height:"220px",
display:"none"
});

$("#page").append($animalImage4);
var a1=$(".animalImage4");
a1.fadeIn(300);
a1.click(function(){
$(score+=10);
a1.fadeOut(300);
});

var animalIndex1 = 0;
var animalIndexEnd1 = 4;

//將圖片添加到界面容器中
$("#page").append($animalImage1);
$animalImage1.fadeIn(300);

animalTimer = setInterval(function () {
if(animalIndex1>animalIndexEnd1){
$animalImage1.stop().remove();
$animalImage2.fadeOut(300);
clearInterval(animalTimer);
startMove();
}
$animalImage1.attr("src",animalType[animalIndex1]);
animalIndex1++;

},400);
//判斷加分或減分
judgeRule($animalImage1);
}

}

function stopMove() {
$(".animalImage").stop().fadeOut(400).remove();
$(".animalImage1").stop().fadeOut(400).remove();
clearInterval(animalTimer);
}

function judgeRule(animal){

$(animal).one("click",function () {

// animal.fadeOut(300);
//取得點擊圖片地址
var $src = $(this).attr("src");
//根據(jù)圖片地址判斷是否是小兔子
var booFlog = $("r");//在得到的地址中查找是否包含r，

if(booFlog===1){
$(score-=50);
}
if(booFlog===2){
$(score+=20);
}

else{
$(score+=10);
}
(300);

});
}
});

加油???！

1.《網(wǎng)頁小游戲怎么玩看這里!web寫打獵小游戲》援引自互聯(lián)網(wǎng)，旨在傳遞更多網(wǎng)絡(luò)信息知識，僅代表作者本人觀點，與本網(wǎng)站無關(guān)，侵刪請聯(lián)系頁腳下方聯(lián)系方式。

2.《網(wǎng)頁小游戲怎么玩看這里!web寫打獵小游戲》僅供讀者參考，本網(wǎng)站未對該內(nèi)容進(jìn)行證實，對其原創(chuàng)性、真實性、完整性、及時性不作任何保證。

3.文章轉(zhuǎn)載時請保留本站內(nèi)容來源地址，http://f99ss.com/gl/3120391.html

丝袜人妻一区二区三区_少妇福利无码视频_亚洲理论片在线观看_一级毛片国产A级片

網(wǎng)頁小游戲怎么玩看這里!web寫打獵小游戲

《火影忍者》“SSS級”逆天忍術(shù)TOP30 夜凱未進(jìn)前十！

網(wǎng)頁小游戲怎么玩？終于找到答案了從“Wordle”到《漢兜》：填字游戲中的交流與表達(dá)

網(wǎng)頁小游戲怎么玩？我來告訴你答案在國內(nèi)外大火的 Wordle，你知道怎么玩嗎？

丝袜人妻一区二区三区_少妇福利无码视频_亚洲理论片在线观看_一级毛片国产A级片

網(wǎng)頁小游戲怎么玩看這里!web寫打獵小游戲

《火影忍者》“SSS級”逆天忍術(shù)TOP30 夜凱未進(jìn)前十！

網(wǎng)頁小游戲怎么玩？終于找到答案了從“Wordle”到《漢兜》：填字游戲中的交流與表達(dá)

網(wǎng)頁小游戲怎么玩？我來告訴你答案在國內(nèi)外大火的 Wordle，你知道怎么玩嗎？

網(wǎng)頁小游戲怎么玩？終于找到答案了從“Wordle”到《漢兜》：填字游戲中的交流與表達(dá)

網(wǎng)頁小游戲怎么玩？我來告訴你答案在國內(nèi)外大火的 Wordle，你知道怎么玩嗎？