用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）
其中一个画布背景是一张图片，还有小鸟，两个管子的图片。暂时不知道怎么附上去就不添加了。这里只有源代码，css和js都是在html写着的，感觉比他们的容易吧,hah
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笨鸟先生</title>
<style>
*{margin: ;padding:;}
body,html{
width:%;
height:%;
}
canvas{
background: url("images/background.png");
background-repeat: repeat-x;
background-size: % %;
position: fixed;
}
#score{
position: absolute;
font-family:Times New Roman;
font-size: 80px;
font-weight: bold;
top:30px;
left:200px;
color:black;
}
.wraper{
width: %;
height:%;
position: absolute;
top:;
left:;
z-index: ;
background-color: ghostwhite;
opacity: 0.5;
display: none;
}
.scoreban{
position: absolute;
top:200px;
left:550px;
z-index: ;
font-family:Times New Roman;
font-size: 80px;
font-weight: bold;
display: none;
}
</style>
</head>
<body>
<canvas style=" display:block;width:100%;height:100%;" id="canvas">
</canvas>
<div class="wraper"> </div>
<div class="scoreban">
<p id="scoreban0"></p>
</div>
<p></p>
<div id="score">
<i id="scoreI"></i>
</div>
<video src="music/zbj.mp3" autoplay loop width="" height="" id="bgMusic"></video>
<script>
var score = document.getElementById('scoreI');
var scoreban0 = document.getElementById('scoreban0');
var wraper = document.getElementsByClassName('wraper')[];//背景色
var scoreban = document.getElementsByClassName('scoreban')[];
var oCanvas = document.getElementById("canvas");
var ctx = oCanvas.getContext("2d");
var birdPic = new Image();
var imgtop=; //小鸟默认高度
var i = ; //小鸟下落速度
var j = ;
var time;
function flyBird(){
birdPic.src = "images/avatar.png";
ctx.clearRect(,,,);
birdPic.onload = function (){
ctx.drawImage(birdPic,,imgtop,,);
}
imgtop+=i;
i=i+0.5;
}
document.onkeydown = function (event){//空格按键触发
if(event.keyCode == ){
j=j+;
imgtop-=j;
}
i=;
j=;
};
time = setInterval(flystop,);
//过柱子的数目
var q = ;
score.innerHTML = q; //默认为0 var stop = new Image();//上下两个柱子
var stop0 = new Image(); var stopsite = ;//默认柱子的开始位置
var toparr = [,,,,,,,,,];
function flystop(){
flyBird();
stop.src = "images/ob_bottom.png";
stop0.src = 'images/ob_top.png';
for(var t = ;t<;t++){
ctx.clearRect(stopsite+*t+,,,);
ctx.drawImage(stop0,stopsite+*t,,,toparr[t]);
ctx.drawImage(stop,stopsite+*t,toparr[t]+,,);
if(stopsite+*t <= && stopsite+*t > ){ //
if(imgtop<=toparr[t] || imgtop>=toparr[t]+){
clearInterval(time);
wraper.style.display = 'block';
scoreban.style.display = 'block';
scoreban0.innerHTML = 'GG,您的分数为：'+ (q-);
}
}
if(stopsite+*t ==){
score.innerHTML = q;
q++;
}
}
if(imgtop <= || imgtop>= ctx.canvas.height){//判断是否过界
clearInterval(time);
wraper.style.display = 'block';
scoreban.style.display = 'block';
scoreban0.innerHTML = 'GG,您的分数为：'+ q;
}
stopsite-=;
if(stopsite == -){
clearInterval(time);
wraper.style.display = 'block';
scoreban.style.display = 'block';
scoreban0.innerHTML = '恭喜你,你赢了0.0';
}
}
</script>
</body>
</html>
用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）的更多相关文章
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- 原生 js 写分页
欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...
- 用原生JS写移动动画案例及实际应用
js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 原生JS写的ajax函数
参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...
- 用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...
- html5面向对象做一个贪吃蛇小游戏
canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...
- 自定义View4-塔防小游戏第一篇:一个防御塔+多个野怪（简易版）*
塔防小游戏 第一篇:一个防御塔+多个野怪(简易版) 1.canvas画防御塔,妖怪大道,妖怪行走路线 2.防御塔攻击范围是按照妖怪与防御塔中心距离计算的,大于防御塔半径则不攻击,小于则攻击 ...
随机推荐
- 理解mvn命令
mvn clean package依次执行了clean.resources.compile.testResources.testCompile.test.jar(打包)等7个阶段. mvn clean ...
- mono+jexus 部署之CompilationException
使用 HelpPage 组件 CompilationException 好不容易在ubuntu上搭建了mono+jexus,欣喜若狂的部署上发布的网站,急忙打开,成功运行. 但是别高兴的太早,当我打开 ...
- Devexpress Winform初学笔记
作为一个软件开发人员来说,得有自己的博客,可以用来ZB,哈哈!玩笑话..... 写博客并不仅仅是用来ZB的,他可以用来记录你在技术道路上探索遇到的坎,当然也有提高逼格的次然因素啦!小弟刚入博客园不久, ...
- MvvmLight框架使用入门（二）
上一篇我们简单对MvvmLight做了介绍.罗列了三个DLL中,各个命名空间下主要类的定义及大致作用.因为只是范范的概论,对于从未接触过MvvmLight的萌新来说,根本就是在晃点他们.不过万事开头难 ...
- python--深浅拷贝 join() 列表和字典的删除 fromkeys建立字典
北京的冬天雾霾依旧很重,依稀记得人生初见雾霾时的样子,那时的回忆也是有些尴尬,不过雾霾也伴随了我的成长,成为了我肺泡中不可分割的一部分. 今天我想写的是拷贝的问题,不过在这之前我想先补充一点关于字符串 ...
- kinect 2 for xbox畸变矫正
kinect 2 for xbox畸变矫正 畸变校正的详细方法在iai_kinect2/kinect2_calibration的readme文件中. 由于通过kinect2获得的图像数据有不同的模式( ...
- 【FAQ】Maven 本地仓库明明有jar包，pom文件还是报错解决办法
方法一: 找到出错的jar包文件位置,删掉_maven.repositories文件 方法二: maven中的本地仓库的index索引没有更新导致 解决方案: 在eclipse中打开菜单 window ...
- 配置CKFinder（Java版）
1. 下载 CKFinder官网下载地址提供了PHP,ASP, Java等不同下载版本. 2. 配置 1)config.xml放到WEB-INF下, 2)其他文件放到Webcontent下, 3) ...
- 二手前端入门React项目
个人对ReactJS这门技术比较感兴趣,在基友的帮助下成功创建了一个React标准前端工程,过程中遇到了不少麻烦,今天作为笔记一般记录一下遇到的问题和解决方案. 基础环境 手头一台Mac 使用OSX系 ...
- SAE实践——创建新应用开启MySQL服务
1. 创建SAE应用 当创建完成SAE账户之后,即可创建SAE应用.点击创建新应用按钮,创建一个新的SAE 应用 阅读提示信息,等待五秒,点继续创建. 填写应用信息完成创建.可选择PHP5.3和空应用 ...