网页小游戏怎么玩看这里!web写打猎小游戏

使用HTML5、css3和js编写网页游戏

(扣除1次后发送网络学习资料)

显示效果：

HTML5和css3

！Doctype html

Html

头(电影)

meta charset=' utf-8 '

标题狩猎游戏/标题

脚本src='；/脚本

脚本src=' ver/脚本

风格(音乐)

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"); //规则展示面板
var start = $("#start"); //开始游戏按钮
var ru = $("#ru"); //游戏规则按钮
var process = $("#second"); //时间进度
var $end=$("#end"); //游戏结束
var $score = $("#first");
var $reset=$("#reset");
var score = 0;

//监听游戏规则按钮
ru.click(function () {
rules.fadeIn(400,function () {
});
});

//监听关闭游戏规则页面
$("a").click(function () {
rules.fadeOut(400,function () {
});
});

var temp;

//监听开始游戏按钮
(function(){
();
ru.hide();
temp=0;
times();
startMove();
});

//监听重新开始按钮
$re(function () {
//关闭游戏结束面板（mask）
$end.hide();
//恢复进度条
times();
temp=0;
//开始游戏
startMove();
//分数清零
$(0);
score=0;

});

function times() {
//设置进度条为100%状态
(30);

var timer = setInterval(function () {

temp++;
//重新给process赋值
(30-temp);

//判断时间是否已到
if(temp===30){
//清除定时器
clearInterval(timer);
//显示游戏结束画面
$end.fadeIn(300,function () {
});
stopMove();
}
},1000);
}

// 定义两个数组保存所有动物的图片

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

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

// 定义两个数组保存所有可能出现的位置
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");
//根据图片地址判断是否是小兔子
var booFlog = $("r");//在得到的地址中查找是否包含r，

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

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

});
}
});

加油⛽⛽⛽！

1.《网页小游戏怎么玩看这里!web写打猎小游戏》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《网页小游戏怎么玩看这里!web写打猎小游戏》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/gl/3120391.html

网页小游戏怎么玩看这里!web写打猎小游戏

《火影忍者》“SSS级”逆天忍术TOP30 夜凯未进前十！

网页小游戏怎么玩？终于找到答案了从“Wordle”到《汉兜》：填字游戏中的交流与表达

网页小游戏怎么玩？我来告诉你答案在国内外大火的 Wordle，你知道怎么玩吗？