网页在线小游戏(web写打猎小游戏)
网页在线小游戏文章列表:
- 1、web写打猎小游戏
- 2、雨季想骑车？这九款小游戏让你在家享受风和自由！
- 3、蔚蓝2发布了？开发团队推出3周年免费小游戏
- 4、H5小游戏｜骑士勇闯噩梦塔爬塔碰多种族间的爬塔体验
- 5、新版微信小程序加入小游戏，说实话小编玩上瘾了……
web写打猎小游戏
利用HTML5、css3和js写网页小游戏
（扣1送web学习资料）
效果展示：
HTML5和css3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打猎小游戏</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jQuery-1.8.0.js"></script>
<script src="vertity.js"></script>
<style>
body {
width: 100%;
height: 100%;
}
#page {
position: relative;
height: 700px;
background-image: url(bg3.jpg);
background-size: cover;
}
h1 {
color: red;
position:relative;
font-family: 宋体;
text-align: center;
padding-top: 30px;
}
#scort{
color: red;
position: relative;
font-family: 宋体;
font-size: 30px;
padding-top: 20px;
margin-left:100px;
}
#time{
color: red;
position: relative;
font-family: 宋体;
font-size: 30px;
padding-top: 30px;
margin-left: 100px;
}
#start {
border-radius: 15px;
background-color: red;
position: relative;
margin-top: 280px;
text-align: center;
margin-left: 530px;
width: 155px;
height: 50px;
color: #000000;
font-weight: 800;
font-size: 20px;
}
#ru {
border-radius: 15px;
background-color: red;
position: relative;
margin-top: 10px;
margin-left: 530px;
width: 155px;
height: 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>
<div id="page">
<h1>打 猎 小 游 戏</h1>
<div id="scort">得分:<span id="first"></span></div>
<div id="time">倒计时:<span id="second"></span><span>s</span></div>
<button id="start" >开始游戏</button>
<button id="ru" >游戏规则</button>
<div class="rules">
<p>游戏规则</p>
<div id="rule">
<p>1.游戏时间为30s</p><br>
<p>2.射中兔子和小猴子 10分,射中白狐-50,射中凤凰 20,射中鹰 20分</p><br>
<p>3.比的是眼疾手快!</p><br>
<a href="javascript:void(0)">[关闭]</a>
</div>
</div>
<div id="end">
<h1>GAME OVER</h1>
<button id="reset">重新挑战</button>
</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;
//监听开始游戏按钮
start.click(function(){
start.hide();
ru.hide();
temp=0;
times();
startMove();
});
//监听重新开始按钮
$reset.click(function () {
//关闭游戏结束面板（mask）
$end.hide();
//恢复进度条
times();
temp=0;
//开始游戏
startMove();
//分数清零
$score.text(0);
score=0;
});
function times() {
//设置进度条为100%状态
process.text(30);
var timer = setInterval(function () {
temp ;
//重新给process赋值
process.text(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 = Math.round(Math.random()*3);
animalType = Math.round(Math.random()*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.text(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.text(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.text(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 = $src.indexOf("r");//在得到的地址中查找是否包含r，
if(booFlog===1){
$score.text(score-=50);
}
if(booFlog===2){
$score.text(score =20);
}
else{
$score.text(score =10);
}
//animal.fadeOut(300);
});
}
});
加油⛽⛽⛽！
雨季想骑车？这九款小游戏让你在家享受风和自由！
小编相信，最近阴雨绵绵的天气肯定已经让不少小伙伴们的右手饥渴难耐了吧？拿上钥匙，穿起装备的你，望着倾盆大雨，无奈的将装备脱下转而乘坐其他的交通工具。
雨季骑行不光会将全身搞得湿漉漉，挡泥板和后背上飞溅的泥点足以让你在洗车时懊恼不已。
不管驾龄多久了老司机，湿滑的路面分分钟教你做人。
今天小编我将为大家推荐九款手机上的摩托游戏，让你可以足不出户就能感受到风和自由。
1.《特技摩托：前线》（Trials：Frontier）
“Trials”已经成为经典的摩托车小游戏。2000年以网页游戏出现在大家视野里。2013年出现在手机移动平台，这款游戏采用经典的横版过关玩法，玩家需要控制机车在屏幕中前倾后仰和进退。
这款游戏主要的特色在于丰富多样的任务以及升级系统。无论你是过关党还是收集控，你都能在游戏中体验到独特的快感。
2. 《机车公爵》（Bike Baron）
基本上和特技摩托的玩法一致，但画面更加卡通，游戏中的关卡设计特别丰富，其中有炸药桶等特殊物品。上手简单轻快，但挑战性略显不足，但轻松有趣，不会让你抓狂到“砸手机”。
3.《疯狂穿越》(Motocross Meltdown)
疯狂竞速是一款F2P摩托车场地竞速游戏。游戏里虽然也有摩托车特技环节，但主要以竞速为主。
这款游戏最大的特点在于它将音乐游戏的玩法引入到了摩托竞速之中，玩家在特定的时机点击屏幕下方闪过的圆点，就可以顺畅转弯或是做出特技动作。画质比较优秀，但没有多少自由度是这款游戏的弊端。
4. 《SBK 15》
SBK是“世界超级摩托车锦标赛”，即“SuperBike”的缩写，是一项世界级的摩托车比赛。这一赛事的特点在于，选手所选用的摩托赛车并非特制，而是用市售的量产型摩托车经过有限改装参赛。
游戏《SBK》系列是SBK大赛的官方游戏。在移动平台上，无论是真实度还是专业程度方面，它都是最好的摩托赛车游戏之一。玩家可以使用重力感应操控游戏中车辆的方向，操作起来有些难度。比如说在过弯的时候，玩家必须减速转向并且还要找准切弯角度才可以顺畅通过。
5.《杜卡迪挑战赛》（Ducati Challenge）
《杜卡迪挑战赛》是杜卡迪车队为了推广品牌而推出的一款真实向摩托赛车游戏。
《杜卡迪挑战赛》是一款老游戏，画面表现并不如最新的《SBK 15》，但游戏中拥有更真实的物理设定。比如说当机车的轮子压过路边草地的时候，轮子上变成绿色。相对于《SBK》中轻微的物理碰撞效果，《杜卡迪挑战赛》中车手撞到路边的话是真的会飞出去的。我们可以想见，这种真实性的设计之所以没有流传至今被新游戏所采用，很大程度上也和玩家的接受程度有关。
6.《地狱骑手》（Hellrider）
这是一款休闲游戏，你所扮演的地狱骑士要骑着摩托通过各种曲线来撞碎所有骷髅。
游戏不算太难，容易上手，但挑战高分是一件很困难的事情，特别是在面对每一阶段末尾的BOSS战时更是如此。玩家需要找机会捡起地上的炸弹将其丢给boss。
7.《Vektor 1.0》
《Vektor 1.0》有着近未来赛博朋克风格的故事背景，但实际上，这款游戏就是操控玩法不同的暴力摩托。游戏中玩家操控机车一路疾驰，并且通过滑砍来消灭前来追击的对手。颇有创战纪的赶脚！
游戏风格是一大亮点但游戏的表现不算太好，玩家只能在单向车道行进，但画面显示双向车道，这使得玩家在画面中的比例过小。不过精致的美工与新颖的剧情值得一玩。
8.《SXPD》
一款动作竞速游戏，以一个虚构的美国城市新皇家（New Royale）为基本场景，围绕着一个代号 SXPD 的女警察展开，她将勇闯街头和恶势力作斗争。
游戏给人印象最为深刻的莫过于其独特的漫画风格了，在黑白为主、夹杂了其它颜色的画笔勾勒下，仿佛让玩家置身于漫画世界中一般。
9.《Traffic Rider》
《Traffic Rider》是一款惊险刺激的第一视角驾驶摩托车在车流中飞驰的竞速游戏。游戏中有多种多样的车辆任你选择，虽然名字不同，但是相信各位骑士都能在游戏中找到自己心爱的摩托车。
游戏中一共有四个场景，分别是公路、沙漠、城市以及冬天，同时有早中晚不同的时间任你选择。但是游戏虽好，现实生活中请注意安全驾驶哦~
蔚蓝2发布了？开发团队推出3周年免费小游戏
在平台跳跃游戏《蔚蓝》的第三章有一个隐藏的内置小游戏，通过八位像素版本为我们展示了游戏原型。正值游戏发售3周年，《蔚蓝》的开发团队推出了名为《Celeste Classic 2（蔚蓝 经典版2）》的PICO-8免费小游戏，玩家可在网页上直接游玩或者下载后游玩。
《Celeste Classic 2》的大致玩法和《蔚蓝》一致，玩家可以通过跳跃来越过障碍，抵达终点。感兴趣的玩家可游玩或下载。
《蔚蓝》是由加拿大电子游戏设计师马特·索尔森和诺尔·贝瑞所设计开发的平台类独立游戏，讲述了主角玛德琳在攀登塞莱斯特山途中，面对自身恐慌和抑郁的故事。 本作中玩家操纵玛德琳，在一系列关卡中移动、跳跃、攀爬和冲刺，在躲避致命障碍的同时，利用关卡中的机关来抵达终点。玩家在关卡中可以收集多种收集品以解锁更高难度的关卡。
H5小游戏｜骑士勇闯噩梦塔爬塔碰多种族间的爬塔体验
这次带来的是今天第二款H5游戏，《爬塔碰》，比较考验玩家的运气、实力以及对资源的把控，毕竟战斗后是不能回血的......
进入游戏，玩家可以在几大种族中自由选择，人类、精灵、巨人、不死族等，有着各自的属性天赋，前期的话影响比较大。
与一些文字冒险游戏一样，玩家需要利用好手中的资源逐渐探索整个幽暗之塔的秘密，每一层都会随机发生一些不可思议的事件或者隐藏任务，宝箱、金币、传送门、陷阱等，所以说非洲人的话估计会步步艰辛。
战斗方面，除开要与守关的怪物与BOSS战斗外，部分情况下还会遭遇到早早等待的玩家打劫，相对于怪物来说更加艰难，而且战斗之后是不能回复血量和魔法值的，当然，运气不错的话遇到商人可以顺带购买一些补给品，这个比较考验运气。
而随着主角等级的提升可以获取一些技能点，相应的玩法相信大家都很熟悉，合理的分配才是王道，桐人就不过多赘述啦~
对于休闲玩家来说，游戏中的任务最好都完成下，获得的钻石和资源奖励还是很客观的，土豪的话建议直接充充充。
整体而言，《爬塔碰》作为一款爬塔游戏比较考验玩家的资源分配和随机应变能力以及如何能够在有限的条件下爬到更高的楼层，丰富的装备和技能系统也是给游戏增添了不少的乐趣。
小编推荐，讲真，这款游戏还是不错的，没事的时候，可以点击进去玩耍~
游戏名称：武神江湖
游戏介绍：全天9:30-23：00半不间断，每半小时有一个活动玩法。包括:挖矿，阵营战，公会战，以及boss攻城战.地宫双倍，金陵烤,怪物攻城等活动。
游戏简介：
《武神江湖》是一款武侠题材传奇玩法的即时战斗手游，以武侠为背景,再现传奇经典玩法；嗜血PK、沙城争霸、酷炫坐骑、超级BOSS、新式副本等应有尽有；丰富的PVE和PVP玩法，全自由化的PK，激烈刺激的对抗，更加真实的打斗效果，秉承经典的同时，也让它们更具特色，与你一起回武侠的传奇世界，战出一个新传奇！
游戏地址：
猛戳“阅读全文”进入《武神江湖》游戏！
新版微信小程序加入小游戏，说实话小编玩上瘾了……
在最新版的微信中，小程序支持了新类目——小游戏。也就是说以后玩一些小游戏，无需下载安装，点开即玩，类似于在线网页小游戏一样。
更新完微信后，打开微信映入眼帘的首先是一个小游戏推荐页面。
点击开始游戏按钮，进入一个名叫“跳跳乐”的游戏，这是一款由腾讯出品的小游戏。
游戏规则很简单，长按屏幕并松开控制力度向下一个方块跳跃。玩过的朋友，可以参与好友排行，看看谁跳的方块多。不知不觉小编把玩了好久入了迷……玩这个游戏不能急躁，有点小虐心。
目前小程序包括的小游戏还有欢乐坦克大战、欢乐消消消、四川麻将等。这些游戏直接用微信搜索，即可添加小程序，简单快捷。
对于微信小程序小游戏，你怎么看？欢迎在评论区发表你的看法！