JavaScript仿微信打飞机游戏

2024-11-30 15:53:49

首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。

1、生成自己，且可以通过左右键来进行左右移动。

//生成自己，且可以左右移动
//控制飞机向右移动的函数
 function moveRight(event){

 context.clearRect(aligh,100,47,47);

 //防止飞机移除背景外
 if(aligh < 260){
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
  context.drawImage(img, aligh,100);
  }
 aligh += 10 ;
 }

//当飞机即将移出背景外时，让它停在最右端
 if (aligh == 260){
  var img = new Image();
  img.src = "../images/self.png";
  img.onload = function(){
 context.drawImage(img, 260,100);
  }
  }
 }

 //控制飞机向左移动的函数
 function moveLeft(event){
 context.clearRect(aligh,100,47,47);

//防止飞机移出最左边的边界
 if(aligh > 0){
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img, aligh,100);
  }
 aligh -= 10 ;
 }

//使其控制在最左侧
 if (aligh == 0){
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img, 0,100);
  }
 }

}
//判断按下的是哪个键，然后控制飞机左右移动
 document.onkeydown = function(event){
 if(event.keyCode == 37){
  moveLeft();
  }
 if(event.keyCode == 39){
  moveRight();
  }
 }

2、生成敌机。敌机就是在背景上随机生成图片。每隔一秒使其从上面下落。

var createId = setInterval(function(){
 var top = 0+'px';
 var enemy = document.createElement("img");
 enemy.src = "../images/enemy.png";

 //生成随机的位置
 var randomleft = Math.floor(Math.random() * 300) ;
 //如果生成的位置出现在背景外，则就取260
left = randomleft > 260 ? 260 + 'px': randomleft + 'px';

 leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算
 arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除

 main.appendChild(enemy);
 enemy.style.paddingLeft = left ;
 enemy.style.paddingTop = top;
 var spandom = $("#main>img:last-child");//这儿利用jquery找到最后一个img

//让最后一个img动起来。则就相当于为每一个img都绑定了动画
spandom.animate({"paddingTop":420},6000,function(){
 //当下落到底部时移除元素
 this.remove();
 arrPic.splice(0,1); //从数组中移除图片
 leftArr.splice(0,1); //从数组中移除距离
 fallCount ++; //检测下落了多少个飞机，超过十个没被打中，游戏就结束
 });

 //如果落下的飞机数超过十个没有被打中，则游戏结束
 if(fallCount > 10){
  clearInterval(createId);
  clearInterval(crashId);
  alert("当前得分 ："+count+" , 很遗憾，游戏结束!")
  }
 },1000);

3、现在主要是碰撞检测。每隔2.2秒进行一次检测，因为检测台频繁的话，直接长按向左向右键，都可以直接消除。就没有意义了

function checkCrash(){

 crashId = setInterval(function(){

 //由于每次自由落下的飞机在上面函数中都被移除了。所以leftArr数组中保存的就是当前页面存在的飞机的左距离数组。
 for(var i = 0; i < leftArr.length; i++)
 {

 //首先将两种都转换成int型进行比较
 var tempL = parseInt(leftArr[i]);
 var tempA = parseInt(aligh); //表示自己距左侧的位置

 //当自己的中心距离处于敌机的左右两侧范围内，则表示被击中
 if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){
 arrPic[i].remove(); //碰撞检测，移除敌机的图片
 arrPic.splice(i,1); //从图片数组中移除图片
 leftArr.splice(i,1); //从记录敌机左侧距离数组中移除该敌机的距离
 count++;
 score.innerHTML = "当前得分 "+count;
 break; //检测到之后直接跳出循环，进行下一个2.2秒的碰撞检测
 }
 }
 },2200);

 }
 checkCrash();

这个游戏还不太完整，没有生成子弹。大部分功能都已经实现了。

4、效果图如下：

最后附上源代码：

html&css

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/ >
 <title></title>
 <script type="text/javascript" src = "./fightFlight.js"></script>
 <script src = "../jQuery/jquery-3.2.0.min.js"></script>
 <style type="text/css">
 *{
 margin: 0px;
 padding: 0px;
 }
 #main{
 width: 300px;
 height: 500px;
 border:1px solid red;
 margin: 0 auto;
 }
 #my{

 position: absolute;
 z-index: 2;
 top:350px;
 }
 #background{
 position: absolute;
 z-index: 1;
 width: 300px;
 height:500px;
 border: 1px solid green;
 background-image: url(../images/background.jpg);
 }
 img{
 position: absolute;
 z-index: 2;
 }
 #enmey{
 width: 50px;
 height: 50px;
 }

 #score{
 position: absolute;
 margin-left: 50%;
 left: 150px;
 top:100px;
 width: 160px;
 font-size: 20px;
 font-family: "微软雅黑";
 font-weight: bold;
 line-height: 70px;
 text-align: center;
 }
 </style>
</head>

<body>
<div id = "main">
<canvas id = "background"></canvas>
<canvas id = "my"></canvas>
<div id = "score">当前得分：0</div>
</div>

</body>
</html>

JavaScript

 var main = document.getElementById('main');
 var my = document.getElementById('my');
 var score = document.getElementById("score");
 var context = my.getContext('2d');
 var crashId;
 var fallCount = 0; //记录没被打中的飞机数，如果超过10，游戏结束
 var aligh = 0 ;
 var count = 0; //记录打中的飞机数，即当前得分
 var leftArr = [];
 var arrPic = [];
 var left;
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img,aligh,100);
 }

 //生成自己，且可以左右移动
  function move(event){

  event = EventUtil.getEvent(event);
  context.clearRect(aligh,100,47,47);

  if(event.keyCode == 39 && aligh < 260 ){

  var img = new Image();
  img.src = "../images/self.png";
  img.onload = function(){
   context.drawImage(img, aligh,100);
   }
   aligh += 10 ;
  }

 if (aligh == 260){
   var img = new Image();
   img.src = "../images/self.png";
   img.onload = function(){
   context.drawImage(img, 260,100);
   }
  }

  }
 document.onkeypress = move;

 //随机生成敌机

 (function(){
  var createId = setInterval(function(){
  var top = 0+'px';
  var enemy = document.createElement("img");
  enemy.src = "../images/enemy.png";
  var randomleft = Math.floor(Math.random() * 300) ;
  left = randomleft > 260 ? 260 + 'px': randomleft + 'px';

  leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算
  arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除

  main.appendChild(enemy);
  enemy.style.paddingLeft = left ;
  enemy.style.paddingTop = top;
  var spandom = $("#main>img:last-child");//找到最后一个span
  spandom.animate({"paddingTop":420},6000,function(){
  //移除元素
  this.remove();
  arrPic.splice(0,1); //移除图片
  leftArr.splice(0,1); //从数组中移除距离
  fallCount ++;
  });

  //如果落下的飞机数超过十个没有被打中，则游戏结束
  if(fallCount >= 10){
  clearInterval(createId);
  clearInterval(crashId);
  alert("当前得分 ："+count+" , 很遗憾，游戏结束!")
  }

  },1000);
 })();

 //碰撞检测
 function checkCrash(){

 crashId = setInterval(function(){

  for(var i = 0; i < leftArr.length; i++)
  {
  var tempL = parseInt(leftArr[i]);
  var tempA = parseInt(aligh);
  if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){

   arrPic[i].remove(); //碰撞检测，移除敌机的图片
   count++;
   score.innerHTML = "当前得分 "+count;
   continue;
  }

  }
  console.log(count);

 },2200);

 }
 checkCrash();

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript用200行代码制作打飞机小游戏实例

我去,我的图片分数被这个录屏软件的水印盖上了,扎心. 这个程序的文件以及代码全部上传到了github 程序下载链接传送门这是自己第一次通过js写的小游戏,那个时候对象的原理跟结构体的概念不是特别的清晰,所以没用对象来写,所以直接导致后期我对这个程序进行修改的时候出现问题,太过于复杂了,我终于了解什么叫做牵一发动全身了.所以这个程序教会我一定一定要用对象的思想处理以后的问题,尤其是这种带属性明显的东西. 当然你要问我图片怎么来的我只能说都是我自己画的所以这可是原创的原创. 代码部分我是通过一个大
JavaScript 小型打飞机游戏实现原理说明

玩法说明:上下左右控制移动,空格发弹. 每打中一个敌机就加100分,每提升5000分,玩家的飞机的一次发弹数就加一,最多四,被敌机撞到或者让敌机飞到底部就算输.... 演示代码:http://demo.jb51.net/js/FlyBeat/index.html 游戏目前的功能还是比较简单的....貌似就贴个源码不太好,所以这次还是写写思路... 游戏主要分为4个js文件,4个js文件分别包含4个类. 1:飞机类---Flyer 复制代码代码如下: //飞机对应的dom元素 this.dom
纯javascript模仿微信打飞机小游戏

七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示源码下载纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov
JavaScript仿微信打飞机游戏

首先实现微信打飞机游戏,首先会有自己和敌机,采用canvas绘图来生成自己和敌人. 1.生成自己,且可以通过左右键来进行左右移动. //生成自己,且可以左右移动 //控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外 if(aligh < 260){ var img = new Image(); img.src = "../images/self.png";
python实现微信打飞机游戏

本文实例为大家分享了python实现微信打飞机游戏的具体代码,供大家参考,具体内容如下 import pygame import random import sys #初始化 pygame.init() pygame.display.set_caption('飞机火拼')#设置窗口标题 screen= pygame.display.set_mode((320, 570), 0, 32) pygame.mouse.set_visible(False)#隐藏光标 #加载图片 boom1=pygame
JavaScript仿微信（电话）联系人列表滑动字母索引实例讲解（推荐）

今天做到了一个联系人列表的需求, 要求和微信的一样! 写出来分享给大家, 使用了jq和doT模版引擎首先对数据源进行数据排序 // 数据排序 function sortData(data) { var letterArr = []; for (var i = 0; i < data.length; i++) { for (var j = 0; j < data.length; j++) { if (data[i].flag < data[j].flag) { var temp = da
微信游戏打飞机游戏制作(java模拟微信打飞机游戏)

复制代码代码如下: package com.beancore.ui; import java.awt.BorderLayout;import java.awt.Container;import java.awt.Dimension;import java.awt.Toolkit;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.io.IOException;import java
JavaScript制作简易的微信打飞机

简单的用JavaScript模拟微信打飞机,部分功能还不完善,刚开始写,还有很多不足,还望大家多多指出. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv
JavaScript实现微信飞机大战游戏

本文实例为大家分享了JavaScript实现微信飞机大战游戏的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE> <html> <head> <title>微信经典飞机大战 </title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <li
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点

前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 本文讲描述, 如何在网页端实现一个仿微信的聊天窗口界面, 以及其中涉及到的一些技术点. 作者前端是初学者, 请大拿们轻拍. 效果展示: 这种聊天对话的布局模式, 比PC端QQ的那种聊天方式更贴近移动端, 我个人感觉. 需求设定: 让我们先过一遍, 实现该聊天窗口需要支持的一些功能点. • 聊天消息结构和布局聊天消息包括: 人物(头像)和
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam
js仿微信抢红包功能

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿微信抢红包</title> <style> html,body,div{margin:0;padding:0;} body{background:#EAEAEA;font:16px/1.8 &quo

JavaScript仿微信打飞机游戏

相关推荐

随机推荐