javascript飞机大战-----002游戏引擎
基本html布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.game{
position:relative;
width: 320px;
height: 568px;
margin: 50px auto;
background: url('image/bg.png');
}
.game>img,.score,.life{
position: absolute;
}
.score{
top: 20px;
}
.life{
right: 0;
top: 20px;
}
.life{width:60px;}
.life img{float: left;}
</style>
</head>
<body>
<div class="game">
<div class="score">得分:0</div>
<div class="life">
<img src="data:image/heart.png" alt="">
<img src="data:image/heart.png" alt="">
<img src="data:image/heart.png" alt="">
</div>
</div>
</body>
</html>
效果展示
游戏引擎engine.js
/*
游戏引擎
*/
var Engine = {
//刚开始的游戏状态
gameStatus:false,
//所以敌机
enemy:{},
//子弹
bullet:{},
//得分
score:0,
//背景图片
game:document.querySelector('.game'),
//初始化
init:function(){
this.gameStart();
},
//游戏开始
gameStart:function(){
var _this = this;
//点击图片的时候判断游戏状态
this.game.onclick = function(){
if(!_this.gameStatus){
_this.gameStatus = true;
//移动移动
_this.bgMove();
}
}
},
//背景移动
bgMove:function(){
var y=0;
var _this = this;
this.bgTimer = setInterval(function(){
y+=2;
_this.game.style['background-position-y']=y+'px';
},50)
}
};
Engine.init();
如果做到这的话点击game背景会移动
javascript飞机大战-----002游戏引擎的更多相关文章
- javascript飞机大战-----009游戏结束
/* 游戏引擎 */ var Engine = { //刚开始的游戏状态 gameStatus:false, //所以敌机 enemy:{}, //子弹 bullet:{}, //得分 scroe:0 ...
- canvas绘制“飞机大战”小游戏，真香！
canvas是ArkUI开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活.高效等优点,被广泛应用于UI界面开发中. 本期,我们将为大家介绍canvas组件的使用. 一.canvas介绍 1 ...
- javascript飞机大战-----001分析
1.游戏引擎 首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子 ...
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)
整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...
- javascript 飞机大战完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用面向对象的编程方式实现飞机大战小游戏，java版
概述 本文将使用java语言以面向对象的编程方式一步一步实现飞机大战这个小游戏 本篇文章仅供参考,如有写的不好的地方或者各位读者哪里没看懂可以在评论区给我留言 或者邮件8274551712@qq.co ...
- javascript飞机大战-----0010完整版代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript飞机大战-----008积分
/* 创建敌机: */ function Enemy(blood,speed,imgs,scroe){ //敌机left this.left = 0; //敌机top this.top = 0; // ...
- javascript飞机大战-----007爆炸效果
要检验什么时候碰撞,我们必须了解什么时候不相撞.以上四种情况是不相撞的时候 首先在引擎里面写好什么时候碰撞什么时候不碰撞 /* 游戏引擎 */ var Engine = { //刚开始的游戏状态 ga ...
随机推荐
- Qt中的串口编程之一
QtSerialPort 简介 功能介绍 SerialPort SerialPortInfo 源代码 编译和安装 配置编译环境 Perl只是在Qt5的时候才需要Qt4的情况下可以不配置 使用如下推荐步 ...
- 使用特殊构造的5GB文件测试Win2012Dedup功能
WinServer2012一个崭新的功能就是支持重复数据删除功能.为了测试这个功能的情况,特别构造了一个特殊的5GB文件用于此次测试.惯例,先说下测试环境的搭建1 使用ESXi5上的版本8的VM,安装 ...
- 竟然没有转载。。。A Few of My Favorite HTML5 and CSS3 Online Tools
HTML5 Boilerplate HTML5 Boilerplate provides a great way to get started building HTML5 sites. It inc ...
- 关于Cocos2d-x中节点的获取
方法一: 1.在.h文件的属性里面先声明要使用的节点或者变量. private: Label *scorelabel; 2.在.cpp文件中创建并使用这个节点或者变量. scorelabel = La ...
- python中的矩阵、多维数组----numpy
https://docs.scipy.org/doc/numpy-dev/user/quickstart.html (numpy官网一些教程) numpy教程:数组创建 python中的矩阵.多维数 ...
- par函数cex参数-控制文字和点的大小
cex参数用来控制图片中点和文字的大小,对于一副图片来说,有很多的文字部分,包括x轴标签(xlab), y轴标签(ylab), x轴刻度上的文字, y轴刻度上的文字,主标题(main), 副标题(su ...
- CentOS下安装Filezilla软件
说到Centos大家都是非常熟悉了,当然Filezilla也是日常中应用的软件,但是在linux下安装怎么操作呢.安装Filezilla有多个方式,但用户应该最喜欢用的就是下载安装包,然后执行安装.安 ...
- WAMP环境下配置虚拟主机
1.编辑httpd.conf,查找#Include conf/extra/httpd-vhosts.conf,把前面注释符号“#”删掉 2.编辑httpd-vhosts.conf文件, <Vir ...
- ulimit设置句柄数
这几天在做一个性能测试,写了一个模拟发送http的程序.模拟100并发的情况下,随机发http get的请求.放到服务器上运行一段时间抛出Too many open files的异常. 这几天在做一个 ...
- meta标签整理
meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. 一 ...