JavaScript之打飞机小游戏 js css

先引入    jquery-1.12.4.min.js 和    lodash.min.js

css

.container{

width: 320px;

height: 568px;

margin: 0 auto;

text-align: center;

position: relative;

overflow: hidden;

}

.start-page{

width: 320px;

height: 568px;

background: url(‘../images/start_bg.png‘);

/* display: none; */

}

.start-btn{

width: 100px;

height: 40px;

outline: none;

border-radius: 10px;

position: absolute;

top: 450px;

left: calc(50% - 50px);

}

.playing-page{

display: none;

width: 320px;

height: 568px;

background: url(‘../images/playing_bg.png‘);

}

.mark-column{

float: left;

}

.game-over{

display: none;

position: absolute;

background-color: #a8aaab;

top: calc(50% - 70px);

left: calc(50% - 70px);

text-align: center;

padding: 20px;

z-index: 2;

}

.player{

width: 66px;

height: 80px;

background: url(‘../images/player.gif‘);

position: absolute;

top: calc(50% + 150px);

left: calc(50% - 33px);

}

/* 子弹 */

.bullet{

width: 6px;

height: 14px;

background: url(‘../images/bullet.png‘);

position: absolute;

}

/* 小飞机 */

.enemy-s{

width: 34px;

height: 24px;

background: url(‘../images/enemy1.png‘);

position: absolute;

}

/* 中飞机 */

.enemy-m{

width: 46px;

height: 60px;

background: url(‘../images/enemy2.png‘);

position: absolute;

}

/* 打飞机 */

.enemy-l{

width: 110px;

height: 164px;

background: url(‘../images/enemy3.png‘);

position: absolute;

}

js

class Bullet {

constructor() {

this.node = null;

}

init(player) {

this.node = $(‘<span>‘).addClass(‘bullet‘).appendTo(‘#playingPage‘);

this.node.css({

left: player.position().left + player.outerWidth() / 2 - this.node.innerWidth() / 2,

top: player.position().top

});

}

move() {

this.node.css(‘top‘, this.node.position().top - 20);        // 相对于子弹自己的位置减相应的距离

}

}

class Enemy {

constructor(className, speed, hp, boomBg, score) {

this.node = null;   // 保存敌机节点

this.isDie = false;

this.className = className;

this.speed = speed;

this.hp = hp;

this.boomBg = boomBg;

this.dieTime = 5;

this.score = score;

}

init() {

this.node = $(‘<div>‘).addClass(this.className).appendTo(‘#playingPage‘);

this.node.css({

left: Math.random() * ($(‘#playingPage‘).innerWidth() - this.node.outerWidth()),    // 敌机上方随机范围内出现

top: -this.node.outerHeight()

})

}

move(totalScore) {      // 不同分数传参不同

if (totalScore <= 10000) {

this.node.css(‘top‘, this.node.position().top + this.speed);

} else if (totalScore < 20000) {

this.node.css(‘top‘, this.node.position().top + this.speed + 3);

} else if (totalScore < 30000) {

this.node.css(‘top‘, this.node.position().top + this.speed + 5);

} else {

this.node.css(‘top‘, this.node.position().top + this.speed + 10);

}

}

}

class Game {

constructor() {

this.player = null;     // 保存玩家节点

this.bulletsAry = [];   // 子弹数组

this.enemysAry = [];    // 敌机数组

this.totalScore = 0;    // 总分

this.playingTime = null;    // 时间函数

}

gameStart() {

$(‘#startBtn‘).click(() => {

$(‘#startPage‘).hide();     // 隐藏

$(‘#playingPage‘).show();   // 显示

this.initPage();

this.createPlayer();

})

}

// 游戏页面初始化

initPage() {

let count = 0;

this.playingTime = setInterval(() => {

count++;

this.createBullet(count);

this.moveBg();

this.moveBullet();

this.removeBullet();

this.createEnemy(count);

this.moveEnemy();

this.removeEnemy();

this.boom();

}, 20)

}

moveBg() {

let y = parseInt($(‘#playingPage‘).css("background-position-y"));

y++;

if (y >= $(‘#playingPage‘).innerHeight()) {

y = 0;

}

$(‘#playingPage‘).css("background-position-y", y);

}

// 创建玩家

createPlayer() {

this.player = new Player();

this.player.init();

this.player.move();

}

// 创建子弹

createBullet(count) {

if (count % 5 == 0) {

let bullet = new Bullet();

bullet.init(this.player.node);

this.bulletsAry.push(bullet);

}

}

// 子弹移动

moveBullet() {

for (let bullet of this.bulletsAry) {

bullet.move();

}

}

// 删除子弹

removeBullet() {

for (let i = 0; i < this.bulletsAry.length; i++) {

if (this.bulletsAry[i].node.position().top <= 0) {

this.bulletsAry[i].node.remove();       // 删除子弹节点

this.bulletsAry.splice(i, 1);           // 删除数组里面的子弹数据

}

}

}

// 创建敌机

createEnemy(count) {

if (count % 20 == 0) {

let enemy = new Enemy(‘enemy-s‘, 5, 1, ‘enemy1_boom.gif‘, 1000);    // 实参:背景图、速度、血量、死亡背景图、分数

enemy.init();

this.enemysAry.push(enemy);     // 将每一个实例化对象push到数组里面

}

if (count % 80 == 0) {

let enemy = new Enemy(‘enemy-m‘, 3, 3, ‘enemy2_boom.gif‘, 2000);

enemy.init();

this.enemysAry.push(enemy);

}

if (count % 300 == 0) {

let enemy = new Enemy(‘enemy-l‘, 1, 7, ‘enemy3_boom.gif‘, 3000);

enemy.init();

this.enemysAry.push(enemy);

}

}

// 移动敌机

moveEnemy() {

for (let enemy of this.enemysAry) {     // 遍历数组,取到每一个实例化对象enemy

if (!enemy.isDie) {                 // 判断敌机是否死亡,死亡后不调用移动方法

enemy.move(this.totalScore);

}

}

}

// 删除敌机

removeEnemy() {

for (let i = 0; i < this.enemysAry.length; i++) {

if (this.enemysAry[i].node.position().top >= $(‘#playingPage‘).innerHeight()) {     // 敌机超出范围删除

this.enemysAry[i].node.remove();

this.enemysAry.splice(i, 1);

} else if (this.enemysAry[i].isDie) {       // 判断敌机是否死亡

this.enemysAry[i].dieTime--;            // 敌机死亡时间减为0删除敌机

if (this.enemysAry[i].dieTime <= 0) {

this.enemysAry[i].node.remove();

this.enemysAry.splice(i, 1);

}

}

}

}

// 判断碰撞

boom() {

for (let i = 0; i < this.enemysAry.length; i++) {       // 获取敌机的每一个边的距离

let enemyTop = this.enemysAry[i].node.position().top;

let enemyBottom = this.enemysAry[i].node.position().top + this.enemysAry[i].node.outerHeight();

let enemyLeft = this.enemysAry[i].node.position().left;

let enemyRight = this.enemysAry[i].node.position().left + this.enemysAry[i].node.outerWidth();

for (let j = 0; j < this.bulletsAry.length; j++) {      // 获取子弹每一个边的距离

let bulletsTop = this.bulletsAry[j].node.position().top;

let bulletsBottom = this.bulletsAry[j].node.position().top + this.bulletsAry[j].node.outerHeight();

let bulletsLeft = this.bulletsAry[j].node.position().left;

let bulletsRight = this.bulletsAry[j].node.position().left + this.bulletsAry[j].node.outerWidth();

// 判断子弹是否和飞机碰撞,四个临界点

if (enemyBottom >= bulletsTop && enemyLeft <= bulletsRight && enemyRight >= bulletsLeft && enemyTop <= bulletsBottom) {

this.bulletsAry[j].node.remove();

this.bulletsAry.splice(j, 1);

this.enemysAry[i].hp--;

if (this.enemysAry[i].hp == 0) {

this.enemysAry[i].node.css(‘background‘, `url(./images/${this.enemysAry[i].boomBg})`);      //敌机死亡换图片

this.enemysAry[i].isDie = true;                 // 敌机死亡状态变为true

this.totalScore += this.enemysAry[i].score;     // 分数

$(‘#mark‘).text(this.totalScore);

}

}

}

// 判断飞机是否和敌机相撞

let playerTop = this.player.node.position().top;

let playerBottom = this.player.node.position().top + this.player.node.outerHeight();

let playerLeft = this.player.node.position().left;

let playerRight = this.player.node.position().left + this.player.node.outerWidth();

if (enemyBottom >= playerTop + 40 && enemyLeft <= playerRight && enemyRight >= playerLeft && enemyTop <= playerBottom - 20) {

this.player.node.css(‘background‘, ‘url(./images/player_boom.gif)‘);

this.gameOver();

}

}

}

gameOver() {

clearInterval(this.playingTime);

$(‘#playingPage‘).off(‘mousemove‘); // JQuery删除事件

$(‘.game-over‘).show();

$(‘#markEnd‘).text(this.totalScore);    // 文本显示内容

$(‘#continueBtn‘).click(function () {

location.reload();  // 重新加载页面

// history.go(0);   // 返回历史上一个页面

})

}

}

new Game().gameStart();

class Player {

constructor() {

this.node = null;

}

init() {

this.node = $(‘<div>‘).addClass(‘player‘).appendTo(‘#playingPage‘);

}

move() {

$(‘#playingPage‘).mousemove((e) => {

let { pageX, pageY } = e;

let moveX = pageX - $(‘#playingPage‘).offset().left;

let moveY = pageY - $(‘#playingPage‘).offset().top;

this.node.css({

left: moveX - this.node.outerWidth() / 2,

top: moveY - this.node.outerHeight() / 2

})

})

}

}

原文地址:https://www.cnblogs.com/fatingGoodboy/p/11569033.html

时间: 2024-11-05 17:27:21

JavaScript之打飞机小游戏 js css的相关文章

JavaScript之打飞机小游戏 html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

原生js打飞机小游戏

最近为了巩固一下原生的知识,然后拿了一个js小游戏来入手.主要也是为了学习和练手. js代码如下: 1 window.onload = function(){ 2 var oBtn = document.getElementById('gameBtn'); 3 oBtn.onclick = function(){ 4 this.style.display = 'none'; 5 Game.init('div1');//把父级传进去 6 }; 7 }; 8 //创建Game单体 9 10 var

2048小游戏-JS实现(BUG调试中)

刚刚学习JS的菜鸟,游戏没有实现滑动效果.希望有前辈能指点一下······ 定义的主要方法: 1.fuzhi()生成一对随机数,然后根据这对随机数取得一个随机单元格,先判断其是否为空,不为空,对其进行赋值为2的操作:为空,则再次调用fuzhi(). 2.secai()遍历表格,根据单元格的数值改变单元格的背景颜色. 3.score()遍历单元格,计算实时总得分. 4.keyDown()主要方法,根据用户按上下左右键来进行不同的数值相加.消除动作.这一段代码写得很冗余····· 1 <!DOCTY

用javascript实现2048的小游戏

前段时间,看了一个视频,用javascript实现的2048小游戏,发现不难,都是一些基出的语法和简单逻辑. 整个2048游戏没有很多的数据,所有,实现起来还是很有成就感的. 先上图,简直就和原版游戏一样一样的. 下面分享一下整个2048游戏的代码逻辑: 首先,搭建游戏框架 其次,开始我们的代码编写 index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"

unity3d 制作打飞机小游戏

作为刚入门小游戏,在制作过程中遇到一些问题,挑重点记录下. 第一:摇杆的制作 使用了官方的joystick类,但是官方没有提供c#版的joystick,这就导致了我不会将js脚本和c#脚本进行通信.最后解决办法是找到网络大牛翻译回来的joystick  c#版本,顺利实现摇杆.附上c#版joystick using UnityEngine; /** * File: MPJoystick.cs * Author: Chris Danielson of (monkeyprism.com) * //

C语言射击类打飞机小游戏

使用c语言编写一个打飞机小游戏,使用键盘按键来进行游戏,击中敌机可获得积分,被敌机撞中死亡一次,每次游戏有3次机会. 在网上查询资料并且和同学讨论之后,对原来的代码有了一些改进, 改进:增加了颜色函数,在你所需要改变窗口颜色的位置调用函数 system("color xx") xx分别指的是背景颜色和文字(前景)颜色.x为一位16进制数,即1-f都可以使用.可以随意组合.增加了终止函数,使游戏在死亡三次后自动结束游戏,并且可以选择是否重新开始游戏:另外增添了设置函数,使得可以对游戏进行

Python编写微信打飞机小游戏(十一)

在这篇博文中,我们准备为打飞机小游戏添加一个暂停的功能,即用户在游戏过程中随时可以通过单击屏幕右上方的一个暂停按钮来暂停和恢复游戏.这个功能看似比较简单,但其中涉及了鼠标操作.图片切换.代码结构的重置等等,接下来我们一一进行介绍. 1.加载暂停按钮图标 在image文件夹下一共有四张暂停按钮的图片,分别为深色和浅色两组,首先在main()函数中加载相关图片资源并初始化暂停/开始标志位: paused = False # 标志是否暂停游戏 pause_nor_image = pygame.imag

一款JavaScript开发的扫雷小游戏

<style><!-- #FLM_main { margin:50px auto; padding:20px; background:#EEE; zoom:1; width:650px; } #FLM_main table { border-collapse:collapse; background:#EEE; float:left; } #FLM_main table td { border:1px solid #CCC; font-size:20px; width:38px; hei

使用JavaScript实现剪刀石头布的小游戏(由浅到深)

使用JavaScript实现剪刀石头布的小游戏 简单的解析: 剪刀石头布的原理类似于一个数组中数字大小的比较,当然我们也可以将其分别使用对应的数字来代表剪刀石头布,在这里我们将 0 - 剪刀, 1 – 石头 , 2 – 布 我们要得到自己胜利的方式有一下几种可能 ① 我们胜利 ② 和电脑平局 ③ 电脑胜利 思路一: 将剪刀石头布分别使用数字代替,将数字作为实参,传入一个进行比较的方法,由于数字的不同,也使得出现的组合就不同.(这里我能使用随机数来让电脑随机生成0,1,2三个数的任意一个) 假设我