使用jquery开发的打字练习网页小游戏，用到了js面向对象编程的一些基础知识。由于没有做难度控制等等一些功能，所以代码量很少，很容易阅读。
图：
代码可以到附件里下载。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
//浏览器宽度、高度
var cw=document.documentElement.clientWidth;
var ch=document.documentElement.clientHeight;
//字符集
var letters="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,S,Y,Z";
//随机数
function fRandomBy(under, over){
return parseInt(Math.random()*(over-under+1) + under);
}
//随机字符
function randomLetter(){
var arr=letters.split(",");
return arr[fRandomBy(0,25)];
}
var bombArr=new Array();
var bombObj=function(x){
var letter=randomLetter();
var div=$("<div></div>")
.addClass("bomb")
.css("left",x)
.html(letter)
.appendTo($("body"))
return {
down:function(){
div.animate({"top":ch+"px"},3000,function(){
if(div.css("top")==ch+"px"){
gameOver();
}
});
},
fire:function(){
div.width(100)
.height(100)
.css("background","url(img/explosion.png) no-repeat")
.html("")
.stop();
setTimeout(function(){
div.remove();
},1000);
},
getKey:function(){
return letter;
}
}
}
var planeObj=function(){
var div=$("<div></div>")
.addClass("plane")
.css({
top:"0px",
left:"0px"
})
.appendTo($("body"))
return {
fly:function(){
div.animate({"left":cw+"px"},3000,function(){
$(this).remove();
});
},
dropBomb:function(){
var x=div.css("left");
var left=x.replace("px","");
if(left>0&&cw-left>50){
var bomb=new bombObj(x);
bombArr.push(bomb);
bomb.down();
}
}
}
}
var score=0;
$(document).keydown(function(event){
var arr=letters.split(",");
var str=arr[event.keyCode-65];
for(var i=0;i<bombArr.length;i++){
var bomb=bombArr[i];
if(bomb.getKey()==str){
bomb.fire();
bombArr.splice(i,1);
score++;
$("#scoreBoard").html(score);
}
}
});
function gameOver(){
clearInterval(p1);
clearInterval(p2);
$(".plane").stop().remove();
$(".bomb").stop().remove();
$("#gameBtn").val("重新开始").show();
$("#scoreBoard").html("0");
}
var p1,p2;
$("#gameBtn").click(function(){
$(this).hide();
p1=setInterval(function(){
var plane=new planeObj();
plane.fly();
p2=setInterval(function(){
plane.dropBomb();
}, fRandomBy(700, 1000));
},2000);
});
});
</script>
<title>无标题文档</title>
<style>
body {
overflow:hidden;
width:100%;
background:url(img/qh06-1280.jpg);
}
#scoreBoard {
background:url(img/scorebg.png) no-repeat;
width:100px;
height:100px;
position:absolute;
right:0px;
bottom:0px;
font-size:24px;
font-weight:bold;
text-align:center;
line-height:80px;
}
#gameBtn {
position:absolute;
top:230px;
left:550px;
}
.bomb {
background:url(img/bigbomb.png) no-repeat;
width:56px;
height:81px;
position:absolute;
top:0px;
color:#ffffff;
font-size:20px;
text-align:center;
font-weight:bold;
line-height:110px;
}
.plane {
background:url(img/bomber01.png) no-repeat;
width:200px;
height:50px;
position:absolute;
}
#gameBtn {
background:url(img/btnstart.png) no-repeat;
width:263px;
height:170px;
cursor:pointer;
border:none;
font-size:32px;
text-align:center;
font-weight:bold;
color:#0f0e0c;
line-height:30px;
}
</style>
</head>
<body scroll="no">
<input id="gameBtn" type="button" value="游戏开始" />
<div id="scoreBoard">0</div>
</body>
</html>
分享到：
相关推荐
【简单jQuery推箱子游戏】是一款基于JavaScript库jQuery开发的趣味逻辑游戏，旨在锻炼玩家的空间想象能力和逻辑思维能力。游戏的核心玩法是控制一个角色在固定的格子地图中推动箱子，目标是将所有箱子推到指定的位置...
在本项目中，我们使用JavaScript和jQuery这两种强大的Web开发工具来实现这样一个打地鼠游戏。下面将详细介绍这两个技术在游戏开发中的应用及其相关知识点。 首先，JavaScript是Web开发的基础，它是一种轻量级的脚本...
《使用jQuery制作坦克游戏：深度探索JavaScript与jQuery的交互艺术》 在编程世界里，jQuery以其简洁、易用的API，极大地简化了JavaScript的DOM操作，使得开发者能够更高效地处理网页交互。本项目“用jQuery做的tank...
《jQuery飞机大战游戏》是一款基于JavaScript库jQuery开发的在线射击小游戏。它利用了jQuery的强大功能，结合HTML5的Canvas元素，为用户呈现了一个刺激、趣味的空战场景。本游戏展示了jQuery在网页交互和动画效果...
好玩的jQuery和JS的坦克大战网页小游戏.zip好玩的jQuery和JS的坦克大战网页小游戏.zip好玩的jQuery和JS的坦克大战网页小游戏.zip好玩的jQuery和JS的坦克大战网页小游戏.zip好玩的jQuery和JS的坦克大战网页小游戏.zip...
【标题】：“用Jquery做的一个简单的拼图游戏” 这篇标题揭示了我们即将探讨的是一个基于JQuery开发的简易拼图游戏。JQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在...
在本教程中，我们将深入探讨如何使用jQuery这个强大的JavaScript库来创建一个互动式的Web拼图游戏。jQuery简化了DOM操作、事件处理以及动画效果的实现，使得开发这种类型的富交互应用变得更为简单。 首先，我们需要...
本游戏利用JavaScript和jQuery的强大功能，允许用户通过拖放操作来完成拼图，提高了用户参与度和娱乐性。 **1. jQuery基础** jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在本...
2. **jQuery初始化**：游戏开始时，jQuery库(`jquery-1.8.3.js`)会被加载到页面中，然后通过`$(document).ready()`函数来确保DOM加载完成后再执行后续的JavaScript代码。 3. **文本显示**：使用jQuery，可以方便地...
《jQuery点名抽奖游戏代码详解》 在当今的网络应用中，互动性和趣味性成为了吸引用户的重要手段。jQuery，作为一款强大的JavaScript库，以其简洁的API和丰富的特效，深受开发者喜爱。本文将深入探讨如何利用jQuery...
jQuery并非专门的数据管理工具，但在JavaScript中，可以借助jQuery对象来操作和存储这些数据，配合事件驱动的编程模型，实现游戏逻辑。 5. **用户交互**：jQuery提供丰富的事件处理功能，可以监听玩家的输入，比如...
《jQuery小游戏》是一款基于JavaScript库jQuery开发的互动游戏，它主要展示了jQuery在网页交互和动态效果方面的强大功能。jQuery是一个轻量级、高性能的JavaScript库，它的出现极大地简化了JavaScript的DOM操作，...
2. JavaScript文件：主要包含游戏逻辑，可能命名为"Tetris.js"，其中定义了游戏对象、方块类、游戏状态管理等。 3. CSS文件（可选）："Tetris.css"，用于分离样式和结构，提供更好的代码组织和页面样式。 4. 图片...
5. **响应式设计**: 如有需要，可以使用jQuery的 Responsive Design 插件，确保游戏在不同设备上都能良好运行。 总的来说，jQuery为开发者提供了强大的工具，使得创建互动性强、体验良好的网页小游戏成为可能。通过...
【标签】"jQuery Js"进一步确认了这个游戏的核心技术栈，即主要使用jQuery库和JavaScript语言来实现。JavaScript是Web开发中不可或缺的部分，负责处理页面的动态行为，而jQuery则作为其工具库，提供了一系列方便的...
在本项目中，“使用Jquery实现小游戏（躲避轰炸区）”是一个基于JavaScript库Jquery开发的互动小游戏。这个游戏的核心目标是让玩家通过控制角色避开不断落下的“轰炸”，从而提高反应速度和手眼协调能力。这里我们将...
《纯jQuery实现的纸牌游戏解析》 在IT领域，JavaScript是一种极其重要的前端开发语言，其灵活性和强大的功能使得开发者可以创造出各种各样的交互式网页应用。本篇将深入探讨一款完全基于jQuery库构建的纸牌游戏，让...
3. `script.js` - JavaScript文件，包含游戏逻辑和jQuery代码。 **开发步骤** 1. 创建HTML结构，包括游戏容器和可能需要的控制按钮。 2. 编写CSS样式，设计游戏界面。 3. 使用jQuery初始化游戏状态，包括创建蛇、...
js消除图片小游戏，效果如下所示： 做了一个简易的消除图片的小游戏，没有连线的规则。 总结以上所述是小编给大家介绍的js消除图片小游戏代码，希望对大家有所帮助 小游戏主要分为小游戏jquery特效代码、小游戏js...