基于原生js雷霆战机

本篇文章是基于原生js使用函数制作

游戏预览

html部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>0517-飞机大战</title><link rel="stylesheet" href="css/index.css">
</head><body><div id="main"><!-- 游戏背景 --><div id="main_bg"><img src="data:image/bg_1.jpg" alt=""><img src="data:image/bg_1.jpg" alt=""><img src="data:image/bg_1.jpg" alt=""></div><!-- 开始游戏 --><div id="main_start"><div class="btn">开始</div></div><!-- 分数 --><div id="main_score"><div class="game_score">分数：<span id="score">0</span></div><div class="game_date">飞行时间：<span id="date">0</span>s</div></div><!-- 结束 --><div class="main_end"><h1 style="color: #fed300;">飞行时间</h1><span id="end_date" style="color: #54da03; font-size: 70px; font-weight: bold;">0</span><span id="segment" style="color: #984bb4; font-size: 20px; font-weight: bold;">倔强青铜</span><div class="btn" id="start_over">重新开始</div></div></div><audio src="music_bg.mp3" id="audio_bg"></audio><!-- 游戏介绍 --><img src="data:image/give.png" alt="" id="img"><!-- 进入文件 --><script src="js/Game-bg.js"></script><script src="js/Player.js"></script><script src="js/Enemy.js"></script><script src="js/Button.js"></script><script src="js/Game.js"></script>
</body></html>

css部分

* {padding: 0;margin: 0;
}body {display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;
}#main {position: relative;width: 500px;height: 768px;overflow: hidden;border: 1px solid;
}#img {height: 768px;
}#main_bg {position: absolute;top: 0;left: 0;display: flex;flex-direction: column;width: 100%;height: 100%;
}#main_bg img {width: 100%;height: 100%;
}#main_start {display: flex;justify-content: center;align-items: center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 99;transition: .5s;background-color: rgba(0, 0, 0, .6);
}.btn {width: 110px;height: 45px;display: flex;justify-content: center;align-items: center;border-radius: 10px;cursor: pointer;transition: .5s;background: url(../image/play.png) 0 0 /cover no-repeat;color: #fff;
}#main_score {position: absolute;top: 0;left: 0;display: flex;justify-content: space-between;width: 95%;margin-left: 2.5%;margin-top: 20px;z-index: 1;
}.game_score {color: rgb(238, 211, 0);font-weight: bold;
}.game_score span {color: rgb(238, 211, 0);font-weight: bold;font-size: 20px;
}.game_date {font-weight: bold;color: #fff;
}.game_date span {font-weight: bold;color: #fff;
}.main_end {display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(90deg) scale(0);width: 300px;height: 300px;background-color: rgba(255, 255, 255, .6);border-radius: 30px;z-index: -1;transition: .5s;
}

game.js

var main = document.querySelector('#main') //主体
var main_start = document.querySelector('#main_start') //开始游戏
var re; //定时器
var main_end = document.querySelector('.main_end')
var end_date = document.querySelector('#end_date') //结束分数
var segment = document.querySelector('#segment') //段位
var start_over = document.querySelector('#start_over')
var date = document.querySelector('#date') //时间
var score = document.querySelector('#score') //分数
var dateTimer;// 开始游戏
main_start.addEventListener('click', () => {main_start.style.transform = 'translateY(-100%) scale(0)'main_start.style.zIndex = -9end()// 定时器re = setInterval(function () {getMain_bg() //背景移动myPlayerMove() //玩家移动moveEnemy() //敌机移动moveBullet() //子弹移动crashCheck() //碰撞函数}, 10)// 创建地方小飞机enemyTimer = setInterval(createEnemy, 800)dateTimer = setInterval(getDate, 1000)
})// 重新开始游戏
start_over.addEventListener('click', () => {main_end.style.transform = 'translate(-50%, -50%) rotate(90deg) scale(0)'main_end.style.zIndex = -9main.removeChild(myPlayer.imgNode)myPlayer = nullenemyList.forEach((item) => {main.removeChild(item.imgNode)});enemyList.splice(0, enemyList.length)enemyList2.forEach((item) => {main.removeChild(item.imgNode)});enemyList2.splice(0, enemyList2.length)enemyList3.forEach((item) => {main.removeChild(item.imgNode)});enemyList3.splice(0, enemyList3.length)bulletList.forEach((item) => {main.removeChild(item.imgNode)});bulletList.splice(0, bulletList.length)date.innerHTML = 0score.innerHTML = 0main_bgNum = 0// 调用动画帧re = setInterval(function () {getMain_bg() //背景移动myPlayerMove() //玩家移动moveEnemy() //敌机移动moveBullet() //子弹移动crashCheck() //碰撞函数}, 10)// 创建敌方小飞机enemyTimer = setInterval(createEnemy, 800)dateTimer = setInterval(getDate, 1000)myPlayer = new Player('image/me.png', 200, 650, 3)
})// 分数大于500清0
function maxScore() {if (parseInt(score.innerHTML) >= 500) {score.innerHTML = 0}
}// 游戏结束
function endScore() {if (score.innerHTML < 0) {end()main_end.style.transform = 'translate(-50%, -50%) rotate(0) scale(1)'main_end.style.zIndex = 9end_date.innerHTML = date.innerHTMLscore.innerHTML = 0getSegment()}
}function end() {clearInterval(enemyTimer)clearInterval(dateTimer)clearInterval(re)audio_bg.pause()
}function getSegment() {if (parseInt(date.innerHTML) <= 3) {segment.innerHTML = '倔强青铜'}if (parseInt(date.innerHTML) > 3 && parseInt(date.innerHTML) <= 6) {segment.innerHTML = '秩序白银'}if (parseInt(date.innerHTML) > 6 && parseInt(date.innerHTML) <= 12) {segment.innerHTML = '荣耀黄金'}if (parseInt(date.innerHTML) > 12 && parseInt(date.innerHTML) <= 24) {segment.innerHTML = '尊贵铂金'}if (parseInt(date.innerHTML) > 24 && parseInt(date.innerHTML) <= 48) {segment.innerHTML = '永恒砖石'}if (parseInt(date.innerHTML) > 48) {segment.innerHTML = '最强王者'}
}// 飞行时间
function getDate() {date.innerHTML++
}function crashCheck() {for (var i = 0; i < enemyList.length; i++) {for (var j = 0; j < bulletList.length; j++) {// 子弹左边var btLeft = parseInt(bulletList[j].imgNode.style.left);// 子弹顶部var btTop = parseInt(bulletList[j].imgNode.style.top);// 小飞机顶部var plTop = parseInt(enemyList[i].imgNode.style.top);// 小飞机左边var plLeft = parseInt(enemyList[i].imgNode.style.left);// if(如果敌方小飞机活着){if (enemyList[i].isDead == true) {if (btLeft >= plLeft && btLeft <= plLeft + 98 && btTop >= plTop && btTop < plTop + 36) {//移除子弹main.removeChild(bulletList[j].imgNode);bulletList.splice(j, 1);//飞机死亡enemyList[i].imgNode.src = 'image/boom.gif'maxScore()enemyList[i].isDead = falsescore.innerHTML = parseInt(score.innerHTML) + 10}}}}for (var i = 0; i < enemyList2.length; i++) {for (var j = 0; j < bulletList.length; j++) {// 子弹左边var btLeft = parseInt(bulletList[j].imgNode.style.left);// 子弹顶部var btTop = parseInt(bulletList[j].imgNode.style.top);// 小飞机顶部var plTop = parseInt(enemyList2[i].imgNode.style.top);// 小飞机左边var plLeft = parseInt(enemyList2[i].imgNode.style.left);// if(如果敌方小飞机活着){if (enemyList2[i].isDead == true) {if (btLeft >= plLeft && btLeft <= plLeft + 98 && btTop >= plTop && btTop < plTop + 36) {//移除子弹main.removeChild(bulletList[j].imgNode);bulletList.splice(j, 1);//飞机死亡enemyList2[i].imgNode.src = 'image/boom.gif'enemyList2[i].isDead = falsemaxScore()score.innerHTML = parseInt(score.innerHTML) + 20}}}}for (var i = 0; i < enemyList3.length; i++) {for (var j = 0; j < bulletList.length; j++) {// 子弹左边var btLeft = parseInt(bulletList[j].imgNode.style.left);// 子弹顶部var btTop = parseInt(bulletList[j].imgNode.style.top);// 小飞机顶部var plTop = parseInt(enemyList3[i].imgNode.style.top);// 小飞机左边var plLeft = parseInt(enemyList3[i].imgNode.style.left);// if(如果敌方小飞机活着){if (enemyList3[i].isDead == true) {if (btLeft >= plLeft && btLeft <= plLeft + 98 && btTop >= plTop && btTop < plTop + 36) {//移除子弹main.removeChild(bulletList[j].imgNode);bulletList.splice(j, 1);//飞机死亡enemyList3[i].imgNode.src = 'image/boom.gif'enemyList3[i].isDead = falsemaxScore()score.innerHTML = parseInt(score.innerHTML) + 30}}}}
}

游戏背景

var main_bg = document.querySelector('#main_bg')
var main_bgNum = 0
var audio_bg = document.querySelector('#audio_bg') //背景音乐function getMain_bg() {main_bgNum -= 1main_bg.style.top = main_bgNum + 'px'if (main_bgNum <= -768) {main_bgNum = 0}audio_bg.play()
}

玩家飞机

var btnTop = false
var btnBottom = false
var btnLeft = false
var btnRight = false
// 创建玩家
function Player(imgSrc, x, y, speed) {this.imgNode = document.createElement('img')this.imgSrc = imgSrcthis.x = xthis.y = ythis.speed = speedthis.init = function () {this.imgNode.src = this.imgSrcthis.imgNode.style.position = "absolute"this.imgNode.style.left = this.x + "px"this.imgNode.style.top = this.y + "px"main.appendChild(this.imgNode)}this.init()this.PlayerTop = function () {if (parseInt(this.imgNode.style.top) <= 0) {this.imgNode.style.top = 0} else {this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + 'px'}}this.PlayerButton = function () {if (parseInt(this.imgNode.style.top) >= 700) {this.imgNode.style.top = 700} else {this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + 'px'}}this.PlayerLeft = function () {if (parseInt(this.imgNode.style.left) <= 0) {this.imgNode.style.left = 0} else {this.imgNode.style.left = parseInt(this.imgNode.style.left) - this.speed + 'px'}}this.PlayerRight = function () {if (parseInt(this.imgNode.style.left) >= 434) {this.imgNode.style.left = 434} else {this.imgNode.style.left = parseInt(this.imgNode.style.left) + this.speed + 'px'}}this.shoot = function () {var createShoot = new Bullet('image/b.png', parseInt(this.imgNode.style.left) + 50, parseInt(this.imgNode.style.top) - 10, 4)bulletList.push(createShoot)}
}
var myPlayer = new Player('image/me.png', 200, 650, 3)// 键盘按下
window.addEventListener('keydown', (e) => {var e = e || window.e// console.log(e.code);if (e.code == 'ArrowUp' || e.code == 'KeyW') {btnTop = true}if (e.code == 'ArrowDown' || e.code == 'KeyS') {btnBottom = true}if (e.code == 'ArrowLeft' || e.code == 'KeyA') {btnLeft = true}if (e.code == 'ArrowRight' || e.code == 'KeyD') {btnRight = true}if (e.code == 'Space') {myPlayer.shoot()}
})// 键盘松开
window.addEventListener('keyup', (e) => {var e = e || window.eif (e.code == 'ArrowUp' || e.code == 'KeyW') {btnTop = false}if (e.code == 'ArrowDown' || e.code == 'KeyS') {btnBottom = false}if (e.code == 'ArrowLeft' || e.code == 'KeyA') {btnLeft = false}if (e.code == 'ArrowRight' || e.code == 'KeyD') {btnRight = false}
})function myPlayerMove() {if (btnTop == true) {myPlayer.PlayerTop()}if (btnBottom == true) {myPlayer.PlayerButton()}if (btnLeft == true) {myPlayer.PlayerLeft()}if (btnRight == true) {myPlayer.PlayerRight()}
}

源码链接：https://download.csdn.net/download/m0_58654431/87799145

基于原生js雷霆战机相关推荐

基于原生js的图片延迟加载
当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...
基于原生JS项目使用Vue3 + Surely Vue Table组件
Js & Surely Vue Table 本文主要说明,基于原生JS项目如何使用Surely Vue Table组件. Surely Vue Surely Vue Table 是 Ant D ...
原生html中modal,基于原生JS封装的Modal对话框插件
基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...
基于原生js实现主流弹幕的所有功能
原生js实现弹幕效果原理二距离写实现原理一有很长一段时间了,因为好像没什么人看,所以我就不太想写原理二,为了不食言,我还是坚持做完这个系列吧下面介绍的就是目前主流直播弹幕网站的弹幕实现方式,包括 ...
基于原生JS写的异形轮播图--效果如网易云、QQ音乐播放器中轮播图
css部分 <style>#box{height:500px;width:1000px;position: relative;margin:100px auto;overflow: hid ...
js：基于原生js的上啦下啦刷新功能
链接:https://www.jianshu.com/p/a8392115e6f0演示地址:http://wonghan.cn/iscroll-demo/html:<body><di ...
基于原生js和css3实现barrage弹幕效果
实现原理实现方式一(简单) 运行图使用cancas画板实现.循环刷新和绘制画板像素,每一次循环更改绘制元素的x坐标核心函数: clearRect(x,y,width,height) 在给定的矩形 ...
黄聪：原生js的音频播放器，兼容pc端和移动端（原创）
更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...
Mars3D功能示例原生JS版下载运行
首先建议您学习浏览一遍我们功能示例的源码(源码中会有大量注释),阅读源码时可以结合查阅API文档来理解类及方法的作用和参数说明等. #项目介绍这是一个基于原生JS 开发的 mars3d 示例项目. ...

基于原生js雷霆战机

本篇文章是基于原生js使用函数制作

基于原生js雷霆战机相关推荐

最新文章

热门文章