菜单 搜索
首页 前端知识 NewMoonDog 影子狗 基于JavaScript的跑酷游戏，复制就能玩

NewMoonDog 影子狗 基于JavaScript的跑酷游戏，复制就能玩

2024-09-10 23:09:42 前端知识 前端哥 240 384 我要收藏

这是一款横版跑酷类游戏，应为是JavaScript的所以不需要其他复杂的配置和环境，点击就能运行

线上试玩：http://longsong.games/newmoon

文末有代码地址

操作介绍：

↑ 跳跃 ↓ 坐下 跳砍 ← 往后跑 → 向前跑 enter 无敌翻滚 d 显示外形 q 重新开始游戏 energy 能量

 

 下面是项目的目录：

其中主要的几个：

main.js:

import { Player } from './player.js';
import { InputHandle } from './input.js';
import { Background} from './background.js';
import { FlyingEnemy, ClimbEnemy, GroundEnemy} from './enemies.js';
import { UI } from './UI.js';
 
window.addEventListener('load', function(){
    const canvas = document.getElementById('canvas1');
    const ctx = canvas.getContext('2d');
    canvas.width = 900;
    canvas.height = 500;
    let enemies = [];
    let score = 0;
    class Game{
        constructor(width, height){
            this.width = width;
            this.height = height;
            this.groundMargin = 40;
            this.speed = 0;
            this.maxSpeed = 5;
            this.background = new Background(this);
            this.player = new Player(this);
            this.input = new InputHandle(this);
            this.UI = new UI(this);
            this.enemies = [];
            this.particles = [];
            this.collisions = [];
            this.floatingMessages = [];
            this.maxParticles = 200;
            this.enemyTimer = 0;
            this.enemyInterval = 1000;
            this.debug = true;
            this.score = 0;
            this.energy = 0;
            this.time = 0;
            this.winningScore = 40;
            this.maxTime = 300000;
            this.fontColor = 'black';
            this.player.currentState = this.player.state[0];
            this.player.currentState.enter();
            this.lives = 5;
            this.game = false;
            this.pan = 1;
        }
        update(deltaTime){
            this.time += deltaTime;
            if (this.time > this.maxTime) this.gameOver = true;
            if (this.energy >= 0 ) this.energy += 1;
            if (this.energy < 0 && this.pan == 1 )this.energy += 1;
            this.background.update();
            this.player.update(this.input.keys, deltaTime);
            if(this.enemyTimer > this.enemyInterval){
                this.addEnemy();
                this.enemyTimer =0;
                
            }
            else {
                this.enemyTimer += deltaTime;
            }
            //handleEnemies
            this.enemies.forEach(enemy =>{
                enemy.update(deltaTime);
            })
            //handle message
            this.floatingMessages.forEach(message =>{
                message.update(deltaTime);
            })
            //handle partyicles
            this.particles.forEach((particle, index) =>{
                particle.update();
            });
            if (this.particles.length > this.maxParticles) {
                this.particles.length = this.maxParticles;
            }
            this.collisions.forEach((collision, index) => {
                collision.update(deltaTime);
 
            });
            this.collisions = this.collisions.filter(collision => !collision.markedForDeletion);
            this.particles = this.particles.filter(particle => !particle.markedForDeletion);
            this.enemies = this.enemies.filter(enemy => !enemy.markedForDeletion);
            this.floatingMessages = this.floatingMessages.filter(message => !message.markedForDeletion);
        }
        
        draw(context){
 
            this.background.draw(context);
            this.player.draw(context);
            this.enemies.forEach(enemy =>{
                enemy.draw(context);
            });
            this.particles.forEach(particle => {
                particle.draw(context);
            });
            this.collisions.forEach(collision => {
                collision.draw(context);
            this.floatingMessages.forEach(message =>{
                 message.draw(context);
            })
            });
            this.UI.draw(context);
        }
        addEnemy(){
            if (this.speed > 0 && Math.random() < 0.5) this.enemies.push(new GroundEnemy(this));
            else if (this.speed > 0 ) this.enemies.push(new ClimbEnemy(this));
            this.enemies.push(new FlyingEnemy(this));
            console.log(this.enemies);
        }
        restartGame(){
            this.player.restart();
            this.background.restart();
            this.enemies = [];
            this.gameOver = false;
            this.score = 0;
            this.energy = 0;
            this.lives = 5;
            this.time = 0;
            animate(0);
        }
    }
 
    const game = new Game(canvas.width, canvas.height);
    let lastTime = 0;
    
 
    function animate(timeStamp){
        const deltaTime = timeStamp - lastTime;
        lastTime = timeStamp;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        game.update(deltaTime);
        game.draw(ctx);
        if (!game.gameOver) requestAnimationFrame(animate);
    }
    animate(0);
})
 
复制

 

player.js

import { Sitting, Runing, Jumping, Falling, Rolling, Diving, Hit} from './playerStates.js';
import { CollisionAnimation } from './CollisionAnimation.js'
import { FloatingMessage } from './floatingMessages.js'
 
export class Player{
    constructor(game){
        this.game = game;
        this.width = 100;
        this.height = 91.3;
        this.x = 0;
        this.y = this.game.height - this.height - this.game.groundMargin;
        this.vy = 0;
        this.weight = 1;
        this.image = document.getElementById('player');
        this.frameX = 0;  //第几行图片
        this.frameY = 0;   //第几个状态
        this.maxFrame;
        this.fps = 20;        //帧数
        this.frameInterval = 500/this.fps;
        this.f = 0;
        this.speed = 0;
        this.maxSpeed = 10;
        this.state = [new Sitting(this.game), new Runing(this.game), new Jumping(this.game), new Falling(this.game), new Rolling(this.game), new Diving(this.game), new Hit(this.game)];
        this.currentState = null;
        
    }
    update(input, deltaTime){
        //this.x++;
        //horizon movement
        this.checkCollision();
        this.currentState.handleInput(input);
        this.x += this.speed;
        if (input.includes('ArrowRight') && this.currentState !== this.state[6]) this.speed = this.maxSpeed;
        else if (input.includes('ArrowLeft') && this.currentState !== this.state[6]) this.speed = -this.maxSpeed;
        else this.speed = 0;
        if (this.currentState === this.state[4]) this.game.energy -= 4;
        if (this.x <0) this.x = 0;
        if (this.x > this.game.width - this.width) this.x = this.game.width - this.width;
        //vertical movement
        this.y += this.vy;
        if (!this.onGround()) this.vy += this.weight;
        else this.vy = 0;
        //console.log(this.game.height - this.height);
        // sprite animation
        if (this.y > this.game.height - this.height - this.game.groundMargin) this.y = this.game.height - this.height - this.game.groundMargin;
        if (this.f > this.frameInterval){
            this.f = 0;
            if (this.frameX < this.maxFrame) this.frameX++;
            else this.frameX = 0;
        }
        else {
            this.f =this.f +  deltaTime;
            
        }
        
        //if (this.frameX < this.maxFrame) this.frameX++;
        //else this.frameX = 0;
    }
    restart(){
        this.x = 0;
        this.y = this.game.height - this.height - this.game.groundMargin;
        
    }
    draw(context){
        if (this.game.debug) context.strokeRect(this.x, this.y ,this.width, this.height);
        context.drawImage(this.image, this.frameX * this.width, this.frameY * this.height, this.width, this.height,this.x,this.y, this.width, this.height);
    }
    onGround(){
        return this.y >= this.game.height - this.height - this.game.groundMargin;
    }
    setState(state, speed){
        this.currentState = this.state[state];
        this.game.speed = this.game.maxSpeed * speed;
        this.currentState.enter();
    }
    checkCollision(){
 
        this.game.enemies.forEach(enemy => {
 
            if (enemy.x < this.x + this.width && 
                enemy.x + enemy.width > this.x &&
                enemy.y < this.y + this.height &&
                enemy.y + enemy.height > this.y
            ){
                enemy.markedForDeletion = true;
                this.game.collisions.push(new CollisionAnimation(this.game, enemy.x + enemy.width * 0.5,enemy.y + enemy.height * 0.5 ));
                if (this.currentState === this.state[4] || this.currentState ===this.state[5]){
                    this.game.score++;
                    this.game.energy += 100;
                    this.game.floatingMessages.push(new FloatingMessage('+1', enemy.x, enemy.y,150, 50));
                }
                else {
                    this.setState(6, 0);
                    this.game.score -=5 ;
                    this.game.lives --;
                    if (this.game.lives <= 0) this.game.gameOver = true;
                }
                //collosion detected
            } else {
                //no collision
            }
        });
    }
}
复制

 

playerState.js

import { Dust,Fire,Splash } from './particles.js'
 
const state = { //状态
    SITTING: 0,
    RUNNING: 1,
    JUMPING: 2,
    FALLING: 3,
    ROLLING: 4,
    DIVING: 5,
    HIT: 6
}
 
class State {
    constructor(state, game){
        this.state = state;
        this.game = game;
 
    }
}
 
export class Sitting extends State {
    constructor(game){
        super('SITTING', game);
 
    }
    enter(){
        this.game.player.frameX = 0;
        this.game.player.frameY = 5;
        this.game.player.maxFrame = 4;
    }
    handleInput(input){
//对初始状态的输入
        if (input.includes('ArrowLeft') || input.includes('ArrowRight')){
            this.game.player.setState(state.RUNNING, 1);
        }
        else if (input.includes('ArrowUp')){
            this.game.player.setState(state.JUMPING, 1);
        }
        else if (input.includes('Enter') && this.game.energy >= 0){
            this.game.player.setState(state.ROLLING, 2);
        }
 
    }
}
export class Runing extends State { //奔跑
    constructor(game){
        super('RUNNING', game);
 
    }
    enter(){
        this.game.player.frameX = 0;
        this.game.player.frameY = 3;
        this.game.player.maxFrame = 8;
    }
    handleInput(input){
        if (input.includes('Enter')) {
            this.game.pan = 0;
        }
        else this.game.pan = 1;
        this.game.particles.unshift(new Dust(this.game, this.game.player.x + this.game.player.width * 0.7, this.game.player.y + this.game.player.height));
        if (input.includes('ArrowDown')){
            this.game.player.setState(state.SITTING, 0);
        }
        else if (input.includes('ArrowUp')){
            this.game.player.setState(state.JUMPING, 1);
        }else if (input.includes('Enter')&& this.game.energy >= 0){
            this.game.player.setState(state.ROLLING, 2);
        }
    }
}
export class Jumping extends State { //跳远
 
    constructor(game){
        super('JUMPING',game);
    }
    enter(){
        if (this.game.player.onGround()) this.game.player.vy -= 27;
        this.game.player.frameX = 0;
        this.game.player.frameY = 1;
        this.game.player.maxFrame = 6;
    }
    handleInput(input){
        if (input.includes('Enter')) {
            this.game.pan = 0;
        }
        else this.game.pan = 1;
        if (this.game.player.vy > this.game.player.weight){
            this.game.player.setState(state.FALLING, 1);
        }else if (input.includes('Enter') && this.game.energy >= 0){
            this.game.player.setState(state.ROLLING, 2);
        }else if (input.includes('ArrowDown')){
            this.game.player.setState(state.DIVING, 0);
        }
    }
}
 
export class Falling extends State { //掉落
    constructor(game){
        super('FALLING', game);
    }
    enter(){
        this.game.player.frameX = 0;
        this.game.player.frameY = 2;
        this.game.player.maxFrame = 6;
    }
    handleInput(input){
        if (input.includes('Enter')) {
            this.game.pan = 0;
        }
        else this.game.pan = 1;
        if (this.game.player.onGround()){
            this.game.player.setState(state.RUNNING, 1);
        }else if (input.includes('ArrowDown')){
            this.game.player.setState(state.DIVING, 0);
        }else if (input.includes('Enter') && this.game.energy >= 0){
            this.game.player.setState(state.ROLLING, 2);
        }
    }
}
 
export class Rolling extends State { //冲刺
    constructor(game){
        super('ROLLING', game);
 
    }
    enter(){
        this.game.player.frameX = 0;
        this.game.player.frameY = 6;
        this.game.player.maxFrame = 6;
    }
    handleInput(input){
        this.game.particles.unshift(new Fire(this.game, this.game.player.x + this.game.player.width * 0.5, this.game.player.y + this.game.player.height * 0.5));
        if (this.game.energy < 0){
            if (this.game.player.onGround()){
 
            this.game.player.setState(state.RUNNING, 1);
 
        } else if (!this.game.player.onGround()){
            this.game.player.setState(state.FALLING, 1);
 
        } else if ( input.includes('ArrowUp') && this.game.player.onGround()){
            this.game.player.vy -= 27;
 
        } else if (input.includes('ArrowDown') && !this.game.player.onGround()) {
            this.game.player.vy -= 27;
 
        }
        }else{
            if (!input.includes('Enter') && this.game.player.onGround()){
 
            this.game.player.setState(state.RUNNING, 1);
 
        } else if (!input.includes('Enter') && !this.game.player.onGround()){
            this.game.player.setState(state.FALLING, 1);
 
        } else if (input.includes('Enter') && input.includes('ArrowUp') && this.game.player.onGround()){
            this.game.player.vy -= 27;
 
        } else if (input.includes('ArrowDown') && !this.game.player.onGround()) {
            this.game.player.vy -= 27;
 
        }
        }
 
    }
}
 
export class Diving extends State { //急速下坠
    constructor(game){
        super('DIVING', game);
 
    }
    enter(){
        this.game.player.frameX = 0;
        this.game.player.frameY = 6;
        this.game.player.maxFrame = 6;
        this.game.player.vy = 15;
    }
    handleInput(input){
        if (input.includes('Enter')) {
            this.game.pan = 0;
        }
        else this.game.pan = 1;
        this.game.particles.unshift(new Fire(this.game, this.game.player.x + this.game.player.width * 0.5, this.game.player.y + this.game.player.height * 0.5));
        if (this.game.player.onGround()){
            this.game.player.setState(state.RUNNING, 1);
            for(let i = 0; i < 30;i++){
                this.game.particles.unshift(new Splash(this.game, this.game.player.x + this.game.player.width * 0.5, this.game.player.y + this.game.player.height * 0.5));
            }
            
        } else if (input.includes('Enter') && !this.game.player.onGround()){
            this.game.player.setState(state.ROLLING, 2);
        }
    }
}
 
export class Hit extends State { //眩晕
    constructor(game){
        super('HIT', game);
    }
    enter(){
        this.game.player.frameX = 0;
        this.game.player.frameY = 4;
        this.game.player.maxFrame = 10;
    }
    handleInput(input){
        if (this.game.player.frameX >= 10 && this.game.player.onGround() ){
            this.game.player.setState(state.RUNNING, 1);
        } else if (this.game.player.frameX >= 10 && !this.game.player.onGround()){
            this.game.player.setState(state.FALLING, 1);
        }
    }
}
复制

 代码库：

https://github.com/longsongline/NewMoonDog/icon-default.png?t=N2N8https://github.com/longsongline/NewMoonDog/

哪里看不懂的可以在下面留言，或者私信问我

图片我都上传到自己的服务器上上了，所以代码库里没有图片

参考：十个小时教程 ，喜欢的可以自己跟着教程做出一个差不多样子的

https://www.youtube.com/watch?v=GFO_txvwK_c&list=WL&index=12

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18069.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！