观摩制作小游戏（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" />
<title>ShuYingHengXie_Game</title>
<style type="text/css">
*{margin : 0px ; padding : 0px ;}
/*游戏区域*/
.gameDiv{background:url(img/dz2.jpg) ;width:100% ; height : 800px ; border : 2px solid red ;
background-size:cover ; overflow:hidden ;}
/*分数区域*/
.score{background-image:url(img/fs.png) ; width:150px; height :180px ; background-size:150px 180px;text-align:center ; line-height:140px ; font-size:40px ; color:#63351D ; cursor:pointer ; position:fixed ; right:50px; bottom: 10px ;}
/*图片下落区域*/
.game{position:relative ; margin: 0 auto;}
.game img{ position:absolute ;}
/*成功失败指示牌*/
.failorsuccess{background-image:url(img/sp1.png) ;
width:500px ; height:350px ;margin:0 auto ; display:none ; position:relative ; top: -50px ; cursor:pointer ;}
/*游戏按钮区域*/
.startorstop{ width:100% ;height:100px ; background:#fff;}
/*按钮*/
.btn{ float:left ; background-image:url(img/stop.png) ; width:130px ; height:50px ;text-align:center; line-height:50px ; background-size:130px 50px; cursor:pointer ;}
</style>
</head> <body> <!-- 游戏区域 -->
<div class="gameDiv">
<div class="game" id="game"> </div>
<div class="failorsuccess" id="failorsuccess"></div>
<div class="score" id="score">0</div>
</div>
<!-- 游戏方式区域 -->
<div class="startorstop">
<div class="btn" id="stop">暂停游戏</div>
<div class="btn" id="start">开始游戏</div>
<div class="btn" id="quick">游戏加速</div>
</div> </body>
<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript" >
var chars = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'] ;
var score = 0 ;
var flag = true ;
/*
1.用户对谁做了操作
2.做了什么操作
3.做完操作之后想要达到什么效果
*/ $(function(){
$("#start").click(function(){
//源源不断的产生图片
window.setInterval(generateChar,1000) ;
window.setInterval(downChar,500) ;
}); $("#failorsuccess").click(function(){
location.reload() ;
}); $("#stop").click(function(){
flag = false ;
}); $("#quick").click(function(){
flag = true ;
window.setInterval(generateChar,1000) ;
window.setInterval(downChar,500) ;
}) ;
}); var generateChar = function(){
if(flag){
//随机产生图片
var random = Math.floor(Math.random()*26) ;
var img = chars[random] ;
var left = Math.floor(Math.random()*800+150);
$("#game").append("<img alt='A' src='img/"+img+".png' width='100px' height='100px' style='top:20px;left:"+left+"px;' />")
} } var downChar = function(){
if(flag){
//获取游戏区域的图片
var imgs = $("#game").children();
//遍历获取每张图片
for(var i = 0;i<imgs.length;i++)
{
var img = imgs[i] ;
if(img.nodeType==1){
var top = parseInt(img.style.top);
if(top<600){
img.style.top=top+50+"px" ;
}else{
img.remove() ;
score -= 10 ;
$("#score").html(score) ;
if(score== -150){
$("#failorsuccess").fadeIn(1000) ;
}
}
}
}
} //按键
window.onkeyup = function(){
var eve = window.event||e ;
var imgs = $("#game").children();
//遍历获取每张图片
for(var i = 0;i<imgs.length;i++)
{
var img = imgs[i] ;
var code = eve.keyCode ;//a--65 b--66
if(img.nodeType==1){
var imgSrc = img.src.split("/");
var name = imgSrc[imgSrc.length-1].split(".")[0] //A B
if(name==chars[code-65]){
img.remove() ;
score += 10 ;
$("#score").html(score) ;
} }
}
} } </script>
</html>
点击开始游戏，从上往下随机掉落字母，敲击键盘对应字母可使下落字母消失，并得分
单分数=-150时 会弹出重新开始画面
点击游戏加速，可使字母下落速度加快。
观摩制作小游戏（js应用）的更多相关文章
- 小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏
五子棋小游戏学习—— 有一个问题是,棋盘线的颜色,在canvas中,明明设置了灰色,但在我的预览中还是黑色的,很重的颜色. 以下是复刻的源码: <!DOCTYPE html> <ht ...
- c++制作小游戏--雷电
用c++实现了一个小游戏--雷电,貌似执行的还不错.贴图和声效也是Duang!Duang!的.整个项目我也会给出下载链接,有兴趣的能够编译执行一下.用到了C++11的新特性,最好是使用vs2013编译 ...
- [SpriteKit] 系统框架中Cocos2d-x制作小游戏ZombieConga
概述 使用SpriteKit实现一个简单的游戏, 通过一个游戏来进行SpriteKit的入门, 熟练2D游戏的API, 也可以更好的结合在iOS应用中. 详细 代码下载:http://www.demo ...
- 使用JS制作小游戏贪吃蛇
先看效果图: 过程如下: 1.首先创建一张画布地图<div class="map"> </div>: 2.创建食物的自调用函数 (function (){ ...
- 用Canvas制作小游戏——贪吃蛇
今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...
- Canvas进阶——制作小游戏【贪吃蛇】
今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...
- 使用cocos2d-x3.4结合cocos2.1.5制作小游戏《亲亲小熊》
在最新的cocos集成环境中,CocosStudio已经集成到cocos中了,至于界面的制作和编辑器的基本使用在cocos官网有详细教程, 这里就不细说,资源下载和详情请参看官网教程:http://c ...
- 把川普射上太阳—如何用python制作小游戏
1.准备 开始之前,你要确保Python和pip已经成功安装在电脑上噢,如果没有,请访问这篇文章:超详细Python安装指南 进行安装. Windows环境下打开Cmd(开始—运行—CMD),苹果系统 ...
- Unity小游戏制作 - 暗影随行
用Unity制作小游戏 - 暗影惊吓 最近玩了一个小游戏,叫做暗影惊吓,虽然是一个十分简单的小游戏,但是感觉还是十分有趣的.这里就用Unity来实现一个类似的游戏. 项目源码:DarkFollow 主 ...
随机推荐
- 关于陈冰、陈良乔以及《我的第一本C++书》【转】
出处:如何在淘宝上卖出 600 本自己写的 C++ 入门书? 陈冰:<我的第一本C++书> 策划编辑,现为图灵公司副总编,<C程序设计伴侣>策划编辑 陈良乔:<我的第一本 ...
- 【NOIP模拟赛】lover——心上人
心上人 [问题描述] 人到初三,总会遇到情感问题,比方说小 J 就喜欢上了小 W.于是小 J 就需要说一长串的话讨小 W 欢心.现在已知小 W 听到一些词就会很高兴,而且白听不厌,但她又讨厌小 J ...
- OpenStack 的防火墙规则流程
Contents [hide] 1 发现的问题 2 解决过程 3 删除临时错误数据 4 其实前面的解决办法是错的 发现的问题 3台虚拟机在同一宿主机,防火墙配置都一样,但是他们的网络表现不一致,有的能 ...
- Selenium 新手入门（C#）1. 用vs运行调用Selenium打开页面
Start步骤: 1.从http://docs.seleniumhq.org/download/ 下载 C# dll 文件和 Internet Explorer Driver Server(32 或 ...
- XAMPP和Bugfree详细教程
一.XAMPP安装配置 xampp是一款跨平台的集成 apache + mysql + php环境,是的配置AMP服务器变得简单轻松,支持windows,solaris, 下载地址:http://so ...
- 对比其它软件方法评估敏捷和Scrum
一般来说,选择一种软件开发方法,更像是加入一个邪教组织,而不像是做出了一个技术决策.许多公司甚至从未试图去评估这些方法,而仅仅是盲目采用最流行的方法,这就造成了如今五花八门的各种敏捷方法.因此本文将使 ...
- PHP数组的一些常用函数
[数组排序]sort()低到高,rsort()高到低.保持键值对应关系使用 asort()和arsort().对键排序ksort()和krsort().随机排序 shuffle(). [数组key相关 ...
- PHP读取一个目录下的文件个数
<?php function FileCount($dir){ global $count; if(is_dir($dir)&&file_exists($dir)){ $ob=s ...
- shell小细节
1.使用变量的时候无需首先声明其类型 2 cut 剪切数据 3.sed 定址 4.read 读取文件(管道) 5 expr 整值计算 6 lp 打印
- js实现鼠标的滑动
js实现鼠标的滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...