在github里看到了个不错的脚本，决定亲自动手来写
然后在四天的琢磨下总算是把飞机游戏给写出来了，效果如下
满足大家的需求 先给& 下面有详细的思路分享
先创建一个 在这个文件夹里面创建& images文件夹 和 js 文件夹 和一个index.html& 如图
因为代码里绑定了相对路径 如果不这么做显示不出来
images里面的素材可以自己找 但是名字一定要跟下面的一样
bak背景& enemy敌人飞机& hero我方飞机& newbullet子弹& pause暂停
js文件夹存放下面两个文件
文件名:elements.js (记得把win7默认隐藏后缀的勾去掉)
function bullet(x,y){
this.islive=true;
this.timmer=null;
this.run=function run(){
if(this.y&-10||this.islive==false){
clearInterval(this.timmer);
this.islive=false;
this.y-=20;
function enemy(x,y){
this.islive=true;
this.timmer=null;
this.run=function run(){
if(this.y&boxheight||this.islive==false){
clearInterval(this.timmer);
this.islive=false;
this.y+=2.5;
文件名:myplane.js (记得把隐藏后缀去掉)
var fps=55;
var score=0;
var boxx=0;
var boxy=0;
var boxwidth=500;
var boxheight=500;
var planeI
var planewidth=60;
var planeheight=60;
var bulletI
var allbullets = new Array();
var bulletwidth=10;
var bulletheight=10;
var enemyI
var allenemys = new Array();
var enemywidth=30;
var enemyheight=30;
bulletImage = new Image();
bulletImage.src="images/newbullet.PNG";
enemyImage = new Image()
enemyImage.src="images/enemy.jpg";
function beginplane(){
planex = boxwidth / 2 - planewidth /2 ;
planey = boxheight -
planeImage = new Image();
planeImage.src="images/hero.jpg";
function init(){
canvas = document.getElementById('canvas');
cxt = canvas.getContext('2d');
cxt.lineWidth=3;
beginplane();
var body = document.getElementsByTagName('body')[0];
btimmer = setInterval(producebullet,500);
etimmer = setInterval(produceenemy,800)
body.addEventListener('keydown',function (event){
switch(event.keyCode){
case 37 : if(planex&boxx){sp=8}else{sp=0}planex-=break;
case 38 : if(planey&boxy){sp=8}else{sp=0}planey-=break;
case 39 : if((planex+planewidth)&boxwidth){sp=8}else{sp=0}planex+=break;
case 40 : if((planey+planeheight)&boxheight){sp=8}else{sp=0}planey+=break;
default:break;
gameTimmer = setInterval(run,1000/fps);
function drawenemy(){
for (var i=0;i&allenemys.i++){
if(allenemys[i].islive){
cxt.drawImage(enemyImage,allenemys[i].x,allenemys[i].y,enemywidth,enemyheight);
function drawplane(){
cxt.clearRect(boxx,boxy,boxwidth,boxheight);
cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);
function drawbullet(){
for(var i=0;i&allbullets.i++){
if(allbullets[i].islive){
cxt.drawImage(bulletImage,allbullets[i].x,allbullets[i].y,bulletwidth,bulletheight);
function produceenemy(){
var x = Math.ceil(Math.random()*(boxwidth-planeheight));
heroenemy = new enemy(x,33);
allenemys.push(heroenemy);
var timmer = setInterval("allenemys["+ (allenemys.length-1) + "].run()",50);
allenemys[allenemys.length-1].timmer=
function producebullet(){
herobullet = new bullet(planex+planewidth/2,planey+10);
allbullets.push(herobullet);
var timmer = setInterval("allbullets[" + (allbullets.length-1) + "].run()",50);
allbullets[(allbullets.length-1)].timmer=
function checkbullet(){
for(var i=0;i&allenemys.i++){
if(allenemys[i].islive){
var e =allenemys[i];
for(var j=0;j&allbullets.j++){
if(allbullets[j].islive){
var b = allbullets[j];
if(b.x&e.x-bulletwidth&&b.x+bulletwidth&e.x+enemywidth+10&&b.y&e.y){
e.islive=false;
b.islive=false;
score+=100;
function checkplane(){
for(var i=0;i&allenemys.i++){
if(allenemys[i].islive){
var e = allenemys[i];
if(e.x+enemywidth&planex&&e.x&planex+planewidth&&e.y&planey||e.y&boxheight){
e.islive=false;
function drawscore(){
document.getElementById('score').innerHTML=
function run(){
drawplane();
drawbullet();
drawscore();
drawenemy();
checkbullet();
checkplane();
var fps=55;
var score=0;
var boxx=0;
var boxy=0;
var boxwidth=500;
var boxheight=500;
var planeI
var planewidth=60;
var planeheight=60;
var bulletI
var allbullets = new Array();
var bulletwidth=10;
var bulletheight=10;
var enemyI
var allenemys = new Array();
var enemywidth=30;
var enemyheight=30;
bulletImage = new Image();
bulletImage.src="images/newbullet.PNG";
enemyImage = new Image()
enemyImage.src="images/enemy.jpg";
function beginplane(){
planex = boxwidth / 2 - planewidth /2 ;
planey = boxheight -
planeImage = new Image();
planeImage.src="images/hero.jpg";
function init(){
canvas = document.getElementById('canvas');
cxt = canvas.getContext('2d');
cxt.lineWidth=3;
beginplane();
var body = document.getElementsByTagName('body')[0];
btimmer = setInterval(producebullet,500);
etimmer = setInterval(produceenemy,800)
body.addEventListener('keydown',function (event){
switch(event.keyCode){
case 37 : if(planex&boxx){sp=8}else{sp=0}planex-=break;
case 38 : if(planey&boxy){sp=8}else{sp=0}planey-=break;
case 39 : if((planex+planewidth)&boxwidth){sp=8}else{sp=0}planex+=break;
case 40 : if((planey+planeheight)&boxheight){sp=8}else{sp=0}planey+=break;
default:break;
gameTimmer = setInterval(run,1000/fps);
function drawenemy(){
for (var i=0;i&allenemys.i++){
if(allenemys[i].islive){
cxt.drawImage(enemyImage,allenemys[i].x,allenemys[i].y,enemywidth,enemyheight);
function drawplane(){
cxt.clearRect(boxx,boxy,boxwidth,boxheight);
cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);
function drawbullet(){
for(var i=0;i&allbullets.i++){
if(allbullets[i].islive){
cxt.drawImage(bulletImage,allbullets[i].x,allbullets[i].y,bulletwidth,bulletheight);
function produceenemy(){
var x = Math.ceil(Math.random()*(boxwidth-planeheight));
heroenemy = new enemy(x,33);
allenemys.push(heroenemy);
var timmer = setInterval("allenemys["+ (allenemys.length-1) + "].run()",50);
allenemys[allenemys.length-1].timmer=
function producebullet(){
herobullet = new bullet(planex+planewidth/2,planey+10);
allbullets.push(herobullet);
var timmer = setInterval("allbullets[" + (allbullets.length-1) + "].run()",50);
allbullets[(allbullets.length-1)].timmer=
function checkbullet(){
for(var i=0;i&allenemys.i++){
if(allenemys[i].islive){
var e =allenemys[i];
for(var j=0;j&allbullets.j++){
if(allbullets[j].islive){
var b = allbullets[j];
if(b.x&e.x-bulletwidth&&b.x+bulletwidth&e.x+enemywidth+10&&b.y&e.y){
e.islive=false;
b.islive=false;
score+=100;
function checkplane(){
for(var i=0;i&allenemys.i++){
if(allenemys[i].islive){
var e = allenemys[i];
if(e.x+enemywidth&planex&&e.x&planex+planewidth&&e.y&planey||e.y&boxheight){
e.islive=false;
function drawscore(){
document.getElementById('score').innerHTML=
function run(){
drawplane();
drawbullet();
drawscore();
drawenemy();
checkbullet();
checkplane();
&还有文件名:myplane.html 记得这个是要放在js文件外面的 然后编辑他输入下面代码
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&&/title&
&body style="background-color: darkcyan"&
&canvas id="canvas" width="500" height="500" style="background-image: url(images/bak.PNG);"&&/canvas&
&img src="images/pause.PNG" style="position:top: 20left: 30" onclick="stop()"/&
&div style="position:top: 90left: 30font-weight:font-size: 40color:cornflowerblue"&&span id="score"&0&/span&&/div&
&input style="position:top:350left: 230" type="button" value="start" id="start" onclick="init();startHide()" /&
&div style="position:top: 200left: 180"&&span id="rules"&击中敌机得分&br&飞机撞机或敌机落地游戏结束&/span&&/div&
&script type="text/script" src="js/elements.js"&&/script&
&script type="text/" src="js/myplane.js" &&/script&
var rules = document.getElementById('rules');
var showScore = document.getElementById('showScore');
var start = document.getElementById('start');
function startHide(){
rules.style.display="none";
start.style.display="none";
function stop(){
clearInterval(gameTimmer);
clearInterval(btimmer);
clearInterval(etimmer);
cxt.clearRect(boxx,boxy,boxwidth,boxheight);
allenemys.length=<span style="background-color: #f5f5f5; color: #;
allbullets.length=<span style="background-color: #f5f5f5; color: #;
rules.style.display="";
start.style.display="";
然后就可以玩了
如果有疑问可以提出
&如果你想有收获 &那么就耐心往下看把
下面和大家分享下飞机游戏的制作 过程虽然有点痛苦 但这真的很好玩 比如把飞机该无敌 超级子弹 并发子弹 等等
另外 建议大家先看完再去做 边看边做也可以 &但心里应该有一个整体的思路
要把整个代码吃下确实不容易，但吃下后受益匪浅
如果你能够沉下心来 一样也可以做出 因此稍安勿躁
废话不多说 下面说思路
不过在此先先说好& 下面的代码 只是临时打出来的 并没有去真实的去测试过 可能会存在语法错误 逻辑错误等等
希望各位能够指出不足的地方 或者谅解错误& 毕竟我想分享的思路而不是代码 代码上面有
做游戏的第一件最简单的事情，就是准备素材----当然也可以放到最后来做，这样的话你需要找简单替代物先代替之
有：背景（可不要） 敌机& 我机（下面就叫飞机）& 子弹& 还有暂停图标
素材的大小是游戏的关键 可以利用javascript的画布中drawImage()来改变其大小
那么现在来开始做游戏
首先搞个画布出来
&canvas id="canvas" width=500 height=500 style="border:1px solid #c3c3c3"&&/canvas&
有了画布就可以先把我们的主角 飞机画上去:
//获取画布
canvas = document.getElementById('canvas')
cxt = canvas.getContext('2d');
//设置画布属性：横坐标 纵坐标& 宽高
var boxx=0
var boxy=0
var boxwidth=500
var boxheight=500
//设置飞机属性 ：横坐标 纵坐标& 宽高
var planewidth=60;
var planeheight=60;
var planeImage = new Image();
planeImage.src="images/hero.jpg";
主角飞机的开始位置按常规套路出牌的话& 横坐标就是画布中间& 纵坐标就是画布底端
planex = (boxwidth - planewidth) / 2
planey = boxheight - planeheight
注意 飞机的坐标(x,y)指的是飞机图片的最左上角的那个坐标，因此在上面还需要算上飞机的长度
//有了四大神器:横 纵 宽 高&&& 就可以把飞机画出来了
cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);
飞机画出来了但是飞机不会动& 那么怎么能让飞机动呢？& 改变其坐标！ 那么什么时候动呢？ 按下上的 ↑ ↓ ← → 键的时候
我们知道键盘有个事件驱动 onkeydown&& 而这个事件驱动有个属性keycode& 用这个属性可以绑定上下左右键对应的函数
而且游戏开始 我们当然期望我们所按下的按键能 够实时的得到响应 而javascript提供了个很好的可以实时的响应事件:
addEventListener()函数
element.addEventListener(event, function, useCapture)
这个函数可以用来实时监听事件 使得我们的按下按键可以得到响应
那么可以飞机能动就不是啥问题了！
首先声明个飞机运动跨度的变量
然后监听body元素 以及临界判断 否则你飞机要飞出界！
body.addEventListener('keydown',function (event){
switch(event.keyCode){
case 37 : if(planex&boxx){sp=8}else{sp=0}planex-=break;
case 38 : if(planey&boxy){sp=8}else{sp=0}planey-=break;
case 39 : if((planex+planewidth)&boxwidth){sp=8}else{sp=0}planex+=break;
case 40 : if((planey+planeheight)&boxheight){sp=8}else{sp=0}planey+=break;
default:break;
到这里你的飞机已经可以动了& 但是你激动的去测试一下&& 发现飞机没动！！
原因是这里只是飞机的坐标改变了& 但是飞机的图片还在原地啊 ，因此需要一个计时器
每隔一段时间重新把飞机重画一次& 这样飞机真的可以动了
function drawplane(){
cxt.clearRect(boxx,boxy,boxwidth,boxheight);
cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);
　　　　　　　　　　　　　　　　　　　　　　　　//用来调画面流畅感 玩过LOL的不可能不知道fps是啥吧
var gameTimmer = setInterval (run,1000/fps);　　　　
//gameTimer游戏的总驱动的计时器
function run(){　　　　　　　　　　　　　　　　　　　　//游戏及驱动
drawplane();　　　　　　　　　　　　　　　　　　 　　　
光有飞机还不够 还需要子弹 那么现在开始画子弹
老规矩先来设置子弹的属性
var bulletwidth=10;
var bulletheight=10;
var bulletImage=new Image();
bulletImage.src="images/bullet.png"
另外我们需要一个数组用来存放所有的子弹
再用一个变量来表示每一个子弹
var allbullets = new Array();
然后对子弹的特点分析下：首先每颗子弹的起始位置应该是飞机的中间偏下
bulletx=planex+planewidth/2
bullety=planey+bulletheight
然后每颗子弹都应该会动，除非他出界或者击中了敌机，因此可以写个子弹的构造函数
function bullet(x,y){
this.islive=true;　　
//用于判断子弹是否存活
this.timmer=null;　　//子弹计时器
this.run = function run(){
if(this.islive==false||this.y&-10){
clearInterval(this.timmer);
this.islive=false;
this.y-=20
//让子弹往上飞
&有了做子弹的秘方 那么就可以开始制造子弹了
function producebullet(){
herobullet = new bullet(bulletx,bullety);
allbullets.push(herobullet);
var timmer = setInterval("allbullets[" + （allbullets.length-1） +"].run()" , 50);
allbullets[allbullets.length-1].timmer=
& 同样上面改变的仅仅是子弹的坐标 &还需要改变下子弹的图片
drawbullet(){
for (var i=0;i&allbullets.i++){
if(allbullets[i].islive){
cxt.drawImage(bulletImage,allbullets.x,allbullets.y,bulletwidth,bulletheight);
然后把drawbullet函数 放到之前定义的run函数里 不是子弹的方法
function run(){
drawplane();
drawbullet();
这样子弹就可以被实时的画出来了
然后给生产子弹以和改变子弹坐标的函数 producebullet 加个计时器
btimmer = setInterval(producebullet,500)
这样子弹就可以自动生产 以及自动改变自己的坐标了
这时候可以测试下是否能够自动产生子弹
按照上面的方法 &画出敌机也是一个方法
设置属性 -& &确定坐标 -& 构造函数 -& &画出敌机 -& 计时器
但是这里有个不同的点 那就是敌机初始的横坐标应该是随机的 &而纵坐标都是0 （顶部位置）
说到随机 就能想到：　Math.random()函数 & 但这个只能产生0~1的随机数
因此 Math.random*500 & 范围就是0~500范围
最后四拾伍入 & Math.ceil(Math.random*500);
&画敌机的方法和画子弹的方法是一样的 因此这里简单的带过
//构造函数
function enemy(x,y){
this.islive=true;
this.timmer=null;
this.run = function run(){
if (this.islive==false||this.y&boxheight){
clearInterval(this.timmer);
this.islive=false;
this.y+=2.5;
//生产敌机
function produceenemy(){
enemyx=Math.ceil(Math.random()*500);
enemyy=33;
heroenemy = new enemy(enemyx,enemyy);
allenemys.push(heroenemy);
var timmer = setInterval("allenemys[" + (allenemys.length-1) + "].run()");
allenemys[allenemys.length-1].timmer=
//画出敌机
function drawenemy(){
for (var i=0;i&allenemys.i++){
if(allenemys[i].islive){
cxt.drawImage(enemyImage,allenemys[i].x,allenemys[i].y,enemywidth,enemyheight)
最后把 drawenemy 加入run函数里 &给produeenemy 加个计时器
function run(){
drawplane();
drawbullet();
drawenemy();
etimmer = setInterval(produceenemy,800);
飞机 敌机& 子弹 都画好了 而且都可以动起来了 ， 现在来写子弹碰到敌机时敌机消失的规则
上图可以清晰的看出子弹击中敌机的范围
击中条件：
bulletx + bulletwidth & enemyx
bulletx & enemyx + enemywidth
bullety & enemyy + enemyheight
function checkbullet{
　　for(var i=0;i&allenemys.i++){
　　　　if (allenemys[i].islive){
　　　　var e = allenemys[i];
　　　　for(var j=0;j&allbullets.j++){
　　　　　　if(allbullets[j].islive){
　　　　　　　　var b = allbullets[j];
　　　　　　　　if(b.x+b.width&e.x&&b.x&e.x+e.width&&b.y&e.y+e.height){
　　　　　　　　　　b.islive=false;
　　　　　　　　　　e.islive=false;
　　　　　　　　　　score+=100;
//加分规则 等等说
　　　　　　　　}
　　　　　　}
我机的死亡的规则：
击中条件：
enemyx+enemywidth & planex
enemyx & planex + planewidth
enemyy + enemyheight & planey
function checkenemy(){
　　for(var i=0;i&allenemys[i].i++){
　　if(allenemys[i].islive){
　　　　　　var e = allenemys[i];
　　　　　　if(e.x+e.width & planex && e.x & planex + planewidth && e.y + e.height & planey){
　　　　　　　　e.islive=false;
　　　　　　　　stop();
　　　　　　}
然后随便把stop函数写出来
function stop(){
clearInterval(btimmer);　　　　//停止生产子弹
clearInterval(etimmer);　　　　//停止生产敌机
clearInterval(gameTimmer);
//停止游戏
allenemys.length=0;　　　　 　//初始化
allbullets.length=0;　　　　　　//初始化
show.innerHTML=　　　 //统计总分 等等说
然后把checkbullet函数 和checkenemy函数 放到游戏驱动run 里头
function run(){
drawplane();
drawenemy();
drawbullet();
checkbullet();
checkenemy();
drawscore();　　　　//实时加分 现在说
基本上游戏就大功告成了& 不过为了更完美些 来个加分规则
首先创建个放分数位置的标签
&div style="position:top: 90left: 30font-weight:font-size: 40color:cornflowerblue"&
&span id="show"&0&/span&&/div&
show = document.getElementById('show');
function drawscore(){
show.innerHTML=
当然还可以加一些小细节，比如暂停按钮 弹出窗口统计得分
还可以玩好玩的，比如飞机无敌 无限子弹 超级子弹 无敌并排子弹 总之你自己想怎么改都行
当你做到这里说明 你的意志力还是挺强的。。
就像海洋，只有意志力坚强的人才能到达彼岸。。。
最后祝各位元旦节快乐 。。比坐飞机还快 玩《战火》要瞬间转移
比坐飞机还快 玩《战火》要瞬间转移
《战火：红色警戒》铁血终测9月5日全面开启，体验颠覆所有传统网游的终极乐趣，融合过关、竞速、解迷、对抗等经典游戏模式，给你全方位的游戏享受。摆脱打怪、升级、作任务的怪圈，回归最纯的娱乐追求！
坐公交太慢，咱们打车走；堵车了，看着计价表就心慌，真想打个飞机飞过去；坐飞机还是嫌慢，那就只剩下超级赛亚人孙悟空的绝招了——瞬间移动啊！
《战火：红色警戒》38张巨幅地图虽然让我们玩得很爽，但经常徒步往返于任务NPC和打怪地点是否有些累的感觉呢？虽然每次行动时，自动寻路系统让你能自动准确的飞驰前去，省时、省心。但完成任务时，还得长途跋涉赶回交任务，不但繁琐而且浪费时间。现在，《战火：红色警戒》自动交任务系统，将解放进行到底，让你可以更省时、省力，不用为交任务而跑断腿。
自动交任务系统，是《战火：红色警戒》继自动打怪、自动寻路之后，在终测前推出的又一人性化操作。每当你完成任务时，只要在任务列表中点击“交任务”，新系统将自动把你传送到任务NPC身边，交任务，得经验。省去完成任务返回路途中所浪费的时间，让你能更快享受游戏中更精彩的内容。
在2000多个任务下，正义与邪恶白热化对抗中，300多种奇形异兽，随时都可能让你丧命，三大主角不畏生死，往返于38张地图中，与之周旋。在这场没有回头路的战斗中，人类、电灵、林兽谁将获得最终的胜利呢？ 9月5日，《战火：红色警戒》引爆颠峰对决！
支持键盘 ← 和 → 分页
类型：大型RPG
特征：射击
特征：射击
类型：动作RPG
特征：虚幻引擎
你不知道点进去会是什么
Wan网页游戏免费玩正经人的喜欢 | LOFTER（乐乎） - 记录生活，发现同好
LOFTER for ipad —— 记录生活，发现同好
正经人 的喜欢
&nbsp&nbsp被喜欢
&nbsp&nbsp被喜欢
{list posts as post}
{if post.type==1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type==2}
{if post.type == 3}
{if !!post.image}
{if post.type == 4}
{if !!post.image}
{if !!photo.labels && photo.labels.length>0}
{var wrapwidth = photo.ow < 500?photo.ow:500}
{list photo.labels as labs}
{var lbtxtwidth = Math.floor(wrapwidth*(labs.ort==1?labs.x:(100-labs.x))/100)-62}
{if lbtxtwidth>12}
{if !!labs.icon}
{list photos as photo}
{if photo_index==0}{break}{/if}
品牌${make||'-'}
型号${model||'-'}
焦距${focalLength||'-'}
光圈${apertureValue||'-'}
快门速度${exposureTime||'-'}
ISO${isoSpeedRatings||'-'}
曝光补偿${exposureBiasValue||'-'}
镜头${lens||'-'}
{if data.msgRank == 1}{/if}
{if data.askSetting == 1}{/if}
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post_index < 3}
{if post.type == 1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if post.type == 6}
{if drlist.length>0}
更多相似达人：
{list drlist as dr}{if drlist.length === 3 && dr_index === 0}、{/if}{if drlist.length === 3 && dr_index === 1}、{/if}{if drlist.length === 2 && dr_index === 0}、{/if}{/list}
暂无相似达人，
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if post.type == 6}
this.p={ dwrMethod:'queryLikePosts',fpost:'',userId:,blogListLength:30};后使用我的收藏没有帐号？
所属分类： &
查看: 232|回复: 0
请问有没有一款有戏，你可以自己做飞机，做车子，做大
请问有没有一款有戏，你可以自己做飞机，做车子，做大炮等等的自己DIY的这类游戏
祝“与粽不同”的你“端午六一节”快乐！
吼鱼块呀快来和妖霸山一起嗨起来吧}