js小游戏（飞行的小鸟--canvas）

js小游戏（飞行的小鸟）

这个里面用到的主要是 canvas 绘图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body {background-color: gray;}#canvas {display: block;background-color: white;/* opacity: 0.5; */margin: 180px auto;border: 2px solid white;border-radius: 15px;}#center {width: 800px;margin: 0 auto;position: relative;}#mark {position: absolute;top: -60px;/* left: 0; */left: 320px;width: 130px;height: 50px;border: 2px solid aqua;text-align: center;line-height: 50px;border-radius: 10px;background-color: aqua;font-family: "微软雅黑";/* font-weight: bold; */color: red;font-size: 20px;}#p {width: 200px;height: 200px;position: absolute;text-align: center;line-height: 200px;top: 90px;left: 300px;display: none;border: 2px solid black;border-radius: 50%;background-color: gray;font-size: 20px;color: red;}</style></head><body><div id="center"><canvas id="canvas" width="800px" height="400px"></canvas><div id="mark"></div><p id="p" style="background-color:rgba(0, 0, 0, 0.1)"></p></div></body><script type="text/javascript">// var canvas = .getElementById("canvas");var context = canvas.getContext("2d");//新建一个图片var img = new Image();img.src = "images/Clipboard2.jpg";var birdX = 200;var birdY = 100;var birdTimer = null;img.onload = function() {//判断第一次使用这个定时器if (birdTimer == null) {birdTimer = setInterval(function() {//小鸟最低到底部if (birdY <= 340)birdY += 1;//清除上一帧画面context.clearRect(0, 0, 800, 400);drawColumn();context.drawImage(img, birdX, birdY);}, 10)}}//鼠标摁下小鸟往上飞切换图片  本来是小鸟挥动翅膀 但是没找到图，干脆换了一个图canvas.onmousedown = function() { img.src = "images/bird2.png";birdY -= 40;}//松开换回来canvas.onmouseup = function() {img.src = "images/Clipboard2.jpg";}var columnArr = [];var columnTimer = null;function creatColumn() {columnTimer = setInterval(function() {//column数组var column = {};column.positionX = 800;//在-100到-200之间随机Y值,这个值取决于图片大小column.positionY = -Math.round(Math.random() * 100 + 100);//把图片添加进来column.imgA = new Image();column.imgB = new Image();column.imgA.src = "images/zhuzifan.jpg";column.imgB.src = "images/zhuzizheng.jpg";//每日一列柱子都不一样column.id = new Date().getTime();columnArr.push(column);}, 1500)//画图}creatColumn();var same = null;var mark = 0;//绘图function drawColumn() {//画出不同的柱子for (var i = 0; i < columnArr.length; i++) {//柱子左移columnArr[i].positionX--;//画context.drawImage(columnArr[i].imgA, columnArr[i].positionX, columnArr[i].positionY);context.drawImage(columnArr[i].imgB, columnArr[i].positionX, columnArr[i].positionY + 400);//判断通过的条件if (birdX + 60 >= columnArr[i].positionX && birdX - 70 <= columnArr[i].positionX) {console.log("'asd");//柱子不同则加分if (columnArr[i].id != same) {mark++;same = columnArr[i].id;document.getElementById("mark").innerHTML = "得分：" + mark;}//碰撞游戏结束if (birdY < columnArr[i].positionY + 250 || birdY + 60 > columnArr[i].positionY + 400) {console.log("pengle");clearInterval(birdTimer);clearInterval(columnTimer);p.style.display = "block";p.innerHTML = "游戏即将重新开始";setTimeout(function() {location.reload(); //重新加载页面}, 3000)}}}}</script>
</html>

小游戏制作的比较粗略，图片处理的一般，可以换成自己喜欢图片。

js小游戏（飞行的小鸟--canvas）相关推荐

【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax
Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 Github → github.com/dntzhang/ca- 综合 DEMO | 运动 DEMO 小程序 DEMO 正在审核中敬请 ...
java小游戏——飞翔的小鸟（java初学作品）
注:学习了java基础后,做出来的一个小作品,可以用来巩固学习概述: 飞翔的小鸟能够作为Java基础的收官之作,包涵了Java很多的基础知识,在学习完Java基础后,尝试编写一些东西,能够起到很好的 ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
js小游戏之经典炸弹人（1）--地图实现
前段时间,写了一款js小游戏--经典炸弹人,因为这是第一次写游戏,对很多东西都不是很熟悉.于是,疯狂的上网找资料,结果发现,关于经典炸弹人的js资料少的可怜.所以,很是头疼了一段时间.在写完经典炸弹人 ...
html5 2d小游戏,cax: HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎...
Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎微信小游戏特性 Learn Once, Write Anywhere(小程序.小游戏.PC Web.Mobile Web) Writ ...
html集成到小程序1011无标题,GitHub - billee1011/cax: 小程序、小游戏以及 Web 通用 Canvas 渲染引擎...
Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎小程序 DEMO 正在审核中敬请期待小游戏 DEMO 正在审核中敬请期待特性 Learn Once, Write Anywhere ...
【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax 1
Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 Github → https://github.com/dntzhang/cax 点我看看 DEMO 小程序 DEMO 正在审核中敬请 ...
java小游戏-飞翔的小鸟
java小游戏-ava小游戏-飞翔的小鸟 1 游戏窗口的显示 2 游戏背景添加 3 背景颜色的添加 4 屏幕中绘制小鸟 5 实现小鸟上下移动 6 解决屏幕闪烁问题 7 云彩的添加与移动 8 云彩的自动 ...
是男人就要坚持30秒：原生JS小游戏
在继之前完成的数个JavaScript demo后,我发现我还没有写过JS小游戏,这次呢,我就来分享一个,非常经典的"是男人就要坚持30s"的小游戏.当然我肯定 is a man, ...

js小游戏（飞行的小鸟--canvas）

js小游戏（飞行的小鸟）

js小游戏（飞行的小鸟--canvas）相关推荐

最新文章

热门文章

js小游戏 （飞行的小鸟--canvas）

js小游戏 （飞行的小鸟）

js小游戏 （飞行的小鸟--canvas）相关推荐

最新文章

热门文章

js小游戏（飞行的小鸟--canvas）

js小游戏（飞行的小鸟）

js小游戏（飞行的小鸟--canvas）相关推荐