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 ...
随机推荐
- 数据库 Oracle监听实例详解
Oracle实例别名 IMCDB = (DESCRIPTION = (ADDRESS = (PROTOCOL = TCP)(HOST = localhost)(PORT = )) (CONNECT_D ...
- Spring的p标签
看Spring in action的时候看过p标签,可惜这东西不用就忘. p标签是为了简化setter的注入而引入的. 用法: p:属性 = "{值}" p:属性-ref = &q ...
- e650. 激活事件
An object wishing to fire item events must implement ItemSelectable. This example shows typical code ...
- 网络协议之ftp---ftp 协议详解
http://blog.csdn.net/yxyhack/article/details/1826256 http://blog.chinaunix.net/uid-7777486-id-204393 ...
- H.264:FFMpeg 实现简单的播放器
H.264:FFMpeg 实现简单的播放器 FFMPEG工程浩大,可以参考的书籍又不是很多,因此很多刚学习FFMPEG的人常常感觉到无从下手.我刚接触FFMPEG的时候也感觉不知从何学起. 因此我 ...
- python改动文件内容，不须要read，write多个动作。
python 要改动文件内容,经常使用 是先read.后write , 再 rename.非常不爽. 比方:须要 把 yuv_dir ="../HD/" # &q ...
- SVN中Revert changes from this revision 跟Revert to this revision
譬如有个文件,有十个版本,假定版本号是1,2,3,4,5,6,7,8,9,10. Revert to this revision: 如果是在版本6这里点击“Revert to this revisio ...
- ubuntu-12.04.5-desktop-amd64.iso：ubuntu-12.04.5-desktop-amd64：安装Oracle11gR2
ubuntu 桌面版的安装不介绍. 如何安装oracle:核心步骤和关键点. ln -sf /bin/bash /bin/sh ln -sf /usr/bin/basename /bin/basena ...
- Page与Loaded
When navigate to page, loaded event will be triggered. Back to page, loaded event will be triggered ...
- 【zookeeper】 zookeeper 集群搭建
集群搭建环境: 发行版:CentOS-6.6 64bit 内核:2.6.32-504.el6.x86_64 CPU:intel-i7 3.6G 内存:2G 集群搭建步骤: 1. 确保机器安装了jdk ...