Web开发基础:JavaScript飞机大战

2024-09-04 20:32

本文主要是介绍Web开发基础:JavaScript飞机大战,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

超详细的Java知识点路线图


飞机大战

图片链接:https://pan.baidu.com/s/1elfvlHClwwDnc8buUnySPw
提取码:mi5y
在这里插入图片描述

功能点:

1、飞机跟着鼠标移动
在onmousemove事件中获得鼠标的坐标,设置给飞机图片
2、发射子弹
子弹需要动态添加到网页中
动态创建标签对象
document.createElement(“标签名”);
动态添加到层中
层对象.appendChild(标签对象);
设置样式
3、敌机移动
4、击中敌机

代码

<!DOCTYPE html>
<html>
<head><title>飞机大战</title><style type="text/css">#bg{width: 300px;height: 500px;background: url(images/background_1.png);/*margin: 0px auto;*/}#plane{width: 40px;height: 50px;position: absolute;}</style>
</head>
<body><div id="bg" onmousemove="movePlane()"><img id="plane" src="images/plane.gif"></div><script type="text/javascript">//获得背景对象var bg = document.getElementById("bg");//获得飞机对象var plane = document.getElementById("plane");//鼠标的位置var x,y;//移动飞机function movePlane(){//获得鼠标的x和y坐标x = window.event.clientX;y = window.event.clientY;if(x >=0 && x <= bg.offsetWidth && y >= 0 && y <= bg.offsetHeight){//修改飞机图片的位置plane.style.left = (x - plane.offsetWidth / 2) + "px";plane.style.top = (y - plane.offsetHeight / 2) + "px";}}//子弹的数组var bullets = new Array();//敌人的数组var enemys = new Array();//子弹类,x,y代表子弹出现的初始位置function Bullet(x,y){var img = document.createElement("img");//创建img标签对象bg.appendChild(img);					//添加图片对象到游戏背景上img.src = "images/bullet1.png";			//设置子弹图片img.style.position = "absolute";		//绝对定位img.style.width = "6px";img.style.height = "14px";img.style.left = x + "px";				//设置子弹图片初始坐标img.style.top = y + "px";this.width = 6;							//子弹的尺寸this.height = 14;this.x = x;								//子弹的坐标this.y = y;this.move = function(){					//子弹的移动this.y -= 10;						//向上移动img.style.top = this.y + "px";		//修改子弹图片的位置}this.remove = function(){				//删除子弹bg.removeChild(img);				//从背景中删除图片}}//敌人类,x,y代表子弹出现的初始位置function Enemy(x,y){var img = document.createElement("img");//创建img标签对象bg.appendChild(img);					//添加图片对象到游戏背景上img.src = "images/enemy1_fly_1.png";	//设置子弹图片img.style.position = "absolute";		//绝对定位img.style.width = "34px";img.style.height = "24px";img.style.left = x + "px";				//设置子弹图片初始坐标img.style.top = y + "px";this.width = 34;							//子弹的尺寸this.height = 24;this.x = x;								//子弹的坐标this.y = y;this.isDead = false;this.move = function(){					//子弹的移动this.y += 10;						//向上移动img.style.top = this.y + "px";		//修改子弹图片的位置}this.remove = function(){				//删除子弹bg.removeChild(img);				//从背景中删除图片}this.dead = function(){					//显示爆炸图片img.src = "images/boom.png";this.isDead = true;}}//创建子弹对象function createBullet(){bullets.push(new Bullet(x,y - plane.offsetHeight / 2));}//创建敌人对象function createEnemy(){enemys.push(new Enemy(bg.offsetWidth * Math.random(),0));}//移动所有的子弹function moveBullets(){for(var i = 0;i < bullets.length;i++){bullets[i].move(); 			//移动子弹checkHit(bullets[i]); 		//判断子弹是否打中敌人if(bullets[i].y <= 0){		//子弹到顶部后,删除子弹bullets[i].remove();bullets.splice(i,1);}}}//移动所有的敌人function moveEnemys(){for(var i = 0;i < enemys.length;i++){enemys[i].move(); //移动子弹if(enemys[i].y >= bg.offsetHeight || enemys[i].isDead){		//敌人到底部或被子弹打中,就删除敌人enemys[i].remove();enemys.splice(i,1);}}}//判断子弹是否打中敌人function checkHit(bullet){//遍历所有敌人for(var i = 0;i < enemys.length;i++){//碰撞检查if(bullet.x > enemys[i].x && bullet.x + bullet.width < enemys[i].x + enemys[i].width &&bullet.y > enemys[i].y && bullet.y + bullet.height < enemys[i].y + enemys[i].height){enemys[i].dead();}}}//启动周期任务执行创建子弹setInterval("createBullet()",200);//移动子弹setInterval("moveBullets()",50);//创建敌人setInterval("createEnemy()",2000);//移动敌人setInterval("moveEnemys()",100);</script>
</body>
</html>

这篇关于Web开发基础:JavaScript飞机大战的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1136952

相关文章

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-

Java中的@SneakyThrows注解用法详解

《Java中的@SneakyThrows注解用法详解》:本文主要介绍Java中的@SneakyThrows注解用法的相关资料,Lombok的@SneakyThrows注解简化了Java方法中的异常... 目录前言一、@SneakyThrows 简介1.1 什么是 Lombok?二、@SneakyThrows

Java中字符串转时间与时间转字符串的操作详解

《Java中字符串转时间与时间转字符串的操作详解》Java的java.time包提供了强大的日期和时间处理功能,通过DateTimeFormatter可以轻松地在日期时间对象和字符串之间进行转换,下面... 目录一、字符串转时间(一)使用预定义格式(二)自定义格式二、时间转字符串(一)使用预定义格式(二)自

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

JAVA保证HashMap线程安全的几种方式

《JAVA保证HashMap线程安全的几种方式》HashMap是线程不安全的,这意味着如果多个线程并发地访问和修改同一个HashMap实例,可能会导致数据不一致和其他线程安全问题,本文主要介绍了JAV... 目录1. 使用 Collections.synchronizedMap2. 使用 Concurren

Java Response返回值的最佳处理方案

《JavaResponse返回值的最佳处理方案》在开发Web应用程序时,我们经常需要通过HTTP请求从服务器获取响应数据,这些数据可以是JSON、XML、甚至是文件,本篇文章将详细解析Java中处理... 目录摘要概述核心问题:关键技术点:源码解析示例 1:使用HttpURLConnection获取Resp

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,:本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1:合并相同代码的多个case示例2:通过字符串合并多个case进阶用法使用