js吃豆人

最新推荐文章于 2023-10-29 09:51:07 发布
最新推荐文章于 2023-10-29 09:51:07 发布
阅读量548 收藏
点赞数 1
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38371250/article/details/106576129
版权 
window.cancelAnimationFrame =
    window.cancelAnimationFrame || window.mozCancelAnimationFrame;
window.requestAnimationFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.mzRequestAnimationFrame ||
    window.oRequestAnimationFrame;
// this.requestAnimationFrame = requestAnimationFrame(this.recursion_draw_circle)
// cancelAnimationFrame(this.requestAnimationFrame)
class cdr {
    constructor(option) {
        this.canvas = option.canvas;
        // 线的粗细
        this.lineHeight = 1.5;
        // 圆距离上下的间隙
        this.lineGap = 2;
        this.radius = 20;
        let bw = this.radius * 2 + this.lineHeight + this.lineGap * 2
        // x轴格数
        // this.XRowNumber = Math.floor(window.screen.width / bw);
        this.XRowNumber = 11;
        this.canvas.width = this.XRowNumber * bw - this.lineHeight;
        this.canvas.height = this.XRowNumber * bw - this.lineHeight;
        this.cxt = this.canvas.getContext('2d');
        this.moveSpeed = 1; // 移动速度
        this.mounthSpeed = 0.05;  // 嘴的速度
        this.ballColor = ["#c36f6f", "#d69347", "#81b91f", "#0fab11", "#0aa99e", "#0a4da9", "#de26d4"];
        // 球的位置
        this.ballDirection = ["top", "left", "right", "bottom"];
        // 球张嘴闭嘴 控制数据
        this.ballAngle = {
            top: {
                maxSAngle: 3 / 2 * Math.PI - 1 / 4 * Math.PI, // 起始角度
                maxEAngle: 1 / 4 * Math.PI + 3 / 2 * Math.PI, // 结束角度
                avgAngle: 3 / 2 * Math.PI,
                counterclockwise: true // 旋转方向
            },
            left: {
                maxSAngle: 3 / 4 * Math.PI,  // 起始角度
                maxEAngle: 3 / 2 * Math.PI - 1 / 4 * Math.PI, // 结束角度
                avgAngle: Math.PI,
                counterclockwise: true // 旋转方向
            },
            right: {
                maxSAngle: 1 / 4 * Math.PI, // 起始角度
                maxEAngle: 3 / 2 * Math.PI + 1 / 4 * Math.PI,  // 结束角度
                avgAngle: 0,
                counterclockwise: false // 旋转方向
            },
            bottom: {
                maxSAngle: 1 / 2 * Math.PI + 1 / 4 * Math.PI, // 起始角度
                maxEAngle: 1 / 2 * Math.PI - 1 / 4 * Math.PI, // 结束角度
                avgAngle: 1 / 2 * Math.PI,
                counterclockwise: false // 旋转方向
            }
        }
        this.PI2 = 2 * Math.PI
        this.ballArray = [];
        this.lineY = [];
        // 障碍物墙的坐标
        this.wallArray = [];
        // 绘制障碍物的数据 Obstacle
        this.obstacle = [];
        // 记录可以十字路口的坐标 数据
        this.crossingArray = []
        this.run();
    }
    run() { 
        this.drawColLine();
        this.initBallArray();
        this.initWallArray();
        this.initObstacleArray();
        this.drawBall()
    }
    setCounterclockwise(type) {
        // "top", "left", "right", "bottom"
        if (type == 'top' || type == 'left')
            return true
        else
            return false
    }
    initWallArray() {
        // direction 方向 top left  right bottom
        // 设置四周墙的坐标
        // 上
        this.wallArray.push({
            direction: "top",
            coordinate: {
                startX: 0,
                startY: 0,
                endX: this.canvas.width,
                endY: 0
            }
        })
        // 下
        this.wallArray.push({
            direction: "bottom",
            coordinate: {
                startX: 0,
                startY: this.canvas.height,
                endX: this.canvas.width,
                endY: this.canvas.height
            }
        })
        // 左
        this.wallArray.push({
            direction: "left",
            coordinate: {
                startX: 0,
                startY: 0,
                endX: 0,
                endY: this.canvas.height
            }
        })
        // 右
        this.wallArray.push({
            direction: "right",
            coordinate: {
                startX: this.canvas.width,
                startY: 0,
                endX: this.canvas.width,
                endY: this.canvas.height
            }
        })
    }
    initBallArray() {
        this.ballArray = new Array(this.random(22, 55))
        // this.ballArray = [4]
        for (let i = 0; i < this.ballArray.length; i++) {
            this.ballArray[i] = {
                // x: this.random(this.radius + 5, this.canvas.width - this.radius - 5),
                // y: this.setBallY(),
                x:this.radius + this.lineGap,
                y:this.radius + this.lineGap,
                direction: this.getDirection(),
                fillStyle: this.ballColor[this.random(0, 7)],
                directionType: 1, // 1 闭嘴 2 张嘴
                moveSpeed : this.random2(0.8,1.5)
            }
        }
    }
    initObstacleArray(){
           // 绘制障碍物
           let rctW = (this.canvas.width - (this.radius*2 + this.lineGap * 2) * 4) / 3
           let space = this.radius*2 + this.lineGap * 2
           let rctH = (this.canvas.width - (this.radius*2 + this.lineGap * 2) * 7) / 6
           for (let i = 0; i < 6; i++) {
               for(let j = 0 ; j < 3 ; j++){
                    this.obstacle.push({
                        x: space * (j+1) + rctW*j ,
                        y : space * (i + 1) + rctH * i,
                        width: rctW,
                        height:rctH,
                        radius:6,
                        color:"green",
                        type: "fill"
                    })
                    this.crossingArray.push({
                        x: Math.round( space * (j+1) + rctW*j  - this.radius - this.lineGap ),
                        y :Math.round( space * (i + 1) + rctH * i - this.radius - this.lineGap)
                    })
                    if( j == 2) {
                        this.crossingArray.push({
                            x: Math.round( space * (j+2) + rctW*(j + 1)  - this.radius  - this.lineGap),
                            y : Math.round( space * (i + 1) + rctH * i - this.radius - this.lineGap)
                        })
                    }
                    // this.wallArray.push({
                    //     direction: "top",
                    //     coordinate: {
                    //         startX: 0,
                    //         startY: 0,
                    //         endX: this.canvas.width,
                    //         endY: 0
                    //     }
                    // })
               }  
           } 
    
    }
    getDirection() {
        let direction = this.ballDirection[Math.floor(this.random(0, 4))]
        return {
            d: direction,
            sAngle: this.ballAngle[direction].maxSAngle,
            eAngle: this.ballAngle[direction].maxEAngle,
            counterclockwise: this.ballAngle[direction].counterclockwise,
        }
    }
    setBallY() {
        let y = this.random(this.radius, this.canvas.height);
        let min = 99999, newY = 0
        this.lineY.map(v => {
            if (Math.abs(y - v) < min) {
                min = Math.abs(y - v)
                newY = v
            }
        })
        return newY - this.radius - this.lineGap - this.lineHeight / 2
    }
    drawColLine() {
        this.lineY = []
        let OldHeight = 0
        for (let i = 1; i <= this.XRowNumber; i++) {
            if (i == 1) {
                OldHeight += this.radius * 2 + this.lineGap * 2
            } else {
                OldHeight += this.radius * 2 + this.lineGap * 2 + this.lineHeight
            }
            this.lineY.push(OldHeight)
        }
 
        this.lineY.push(this.radius * 2 + OldHeight + this.lineGap * 2 + this.lineHeight)
    }
    /**
         * @description {画直线}
         * @param {*开始位置对象} start 
         * @param {*结束位置对象} end 
         * @param {*线的宽度} width 
         * @param {*线的颜色} strokeStyle 
         */
    drawLine(start, end, width = 2, strokeStyle = "#000000") {
        this.cxt.beginPath();
        this.cxt.strokeStyle = strokeStyle;
        this.cxt.lineWidth = this.lineHeight; //线宽
        this.cxt.moveTo(start.x, start.y); // 线开始位置
        this.cxt.lineTo(end.x, end.y); // 线 结束位置
        this.cxt.stroke();
    }
    drawBall() {
        this.clearCanvas();
        this.drawColLine();
        this.ballArray.map(item => {
            this.cxt.fillStyle = item.fillStyle;
            this.cxt.beginPath();
            this.cxt.arc(item.x, item.y, this.radius, item.direction.sAngle, item.direction.eAngle, item.direction.counterclockwise);
            // 更改球的张嘴闭嘴数据
            this.updateBallDirection(item)
            // 更改球的坐标数据
            this.updateBall_X_OR_Y(item)
 
            this.cxt.lineTo(item.x, item.y);
            this.cxt.closePath();
            this.cxt.fill();
        })
        // 绘制障碍物
        this.obstacle.map(item =>{ 
            this.drawRectangle.apply(this,Object.values(item))
        })  
        requestAnimationFrame(this.drawBall.bind(this))
    }
    drawRectangle(x, y, width, height, radius, color, type) {
        let ctx = this.cxt
        ctx.beginPath();
        ctx.moveTo(x, y + radius);
        ctx.lineTo(x, y + height - radius);
        ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
        ctx.lineTo(x + width - radius, y + height);
        ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
        ctx.lineTo(x + width, y + radius);
        ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
        ctx.lineTo(x + radius, y);
        ctx.quadraticCurveTo(x, y, x, y + radius);
        ctx[type + 'Style'] = color || params.color;
        ctx.closePath();
        ctx[type]();
    }
    setBallDirection(item) {
        item.direction.d = this.ballDirection[Math.floor(this.random(0, 4))]
        item.direction.counterclockwise = this.setCounterclockwise(item.direction.d)  // 旋转方向 
        item.direction.sAngle = this.ballAngle[item.direction.d].maxSAngle
        item.direction.eAngle = this.ballAngle[item.direction.d].maxEAngle
    }
    /**
         * description {更改Ball数组中某个节点的张嘴闭嘴 数据}
         * @param {*} item 
         */
    updateBall_X_OR_Y(item) { 
        // 找到前方最近的障碍物 位置  
        this.wallArray.map(child => {
            if (child.direction == item.direction.d) {
                if (child.direction == "top") {
                    // 向上行走 
                    // 先确定前面没有障碍物
                    // 1 确定x轴某个范围
                    if ((item.x - this.radius) >= child.coordinate.startX && (item.x + this.radius) <= child.coordinate.endX) {
                        // 2. 过滤反方向的障碍物 
                        if ((item.y - this.radius - this.lineGap) > child.coordinate.startY) {
                            // 开始移动
                            item.y -= item.moveSpeed
                            if ((item.y - this.radius - this.lineGap) <= child.coordinate.startY) {
                                item.y = child.coordinate.startY + this.radius + this.lineGap
                            }
                        } else {
                            this.setBallDirection(item)
                        }
                    }
                }
 
                if (child.direction == "bottom") {
                    // 向下行走 
                    // 先确定前面没有障碍物
                    // 1 确定x轴某个范围
                    if ((item.x - this.radius) >= child.coordinate.startX && (item.x + this.radius) <= child.coordinate.endX) {
                        // 2. 过滤反方向的障碍物
                        if ((item.y + this.radius + this.lineGap) < child.coordinate.endY) {
                            // 开始移动
                            item.y += item.moveSpeed
                            if ((item.y - this.radius - this.lineGap) >= child.coordinate.endY) {
                                item.y = child.coordinate.startY - this.radius - this.lineGap
                            }
                        } else {
                            this.setBallDirection(item)
                        }
                    }
                }
 
                if (child.direction == "left") {
                    // 向左行走 
                    // 先确定前面没有障碍物
                    // 1 确定x轴某个范围
                    if ((item.y - this.radius) >= child.coordinate.startY && (item.y + this.radius) <= child.coordinate.endY) {
                        // 2. 过滤反方向的障碍物
                        if ((item.x - this.radius - this.lineGap) > child.coordinate.startX) {
                            // 开始移动
                            item.x -= item.moveSpeed
                            if ((item.x - this.radius - this.lineGap) <= child.coordinate.startX) {
                                item.x = child.coordinate.startX + this.radius + this.lineGap
                            }
                        } else {
                            this.setBallDirection(item)
                        }
                    }
                }
 
                if (child.direction == "right") {
                    // 向左行走 
                    // 先确定前面没有障碍物
                    // 1 确定x轴某个范围
                    if ((item.y - this.radius) >= child.coordinate.startY && (item.y + this.radius) <= child.coordinate.endY) {
                        // 2. 过滤反方向的障碍物
                        if ((item.x + this.radius + this.lineGap) < child.coordinate.endX) {
                            // 开始移动
                            item.x += item.moveSpeed
                            if ((item.x + this.radius + this.lineGap) >= child.coordinate.endX) {
                                item.x = child.coordinate.endX - this.radius - this.lineGap
                            }
                        } else {
                            this.setBallDirection(item)
                        }
                    }
                }
 
            }
        }) 
        // console.log(Math.floor(item.x),Math.floor(item.y))
        this.crossingArray.map(cd=>{
            if(Math.abs(item.x - cd.x) < 0.7 && Math.abs(item.y - cd.y) < 0.7 ){ 
                item.x = cd.x
                item.y =  cd.y
                this.setBallDirection(item)
            }
        })
    }
    /**
         * description {更改Ball数组中某个节点的张嘴闭嘴 数据}
         * @param {指定节点内容} item 
         */
    updateBallDirection(item) {
        let avgAngle = this.ballAngle[item.direction.d].avgAngle
        let maxSAngle = this.ballAngle[item.direction.d].maxSAngle
        let maxEAngle = this.ballAngle[item.direction.d].maxEAngle
 
        // 张嘴，闭嘴动画 , // 1 闭嘴 2 张嘴
        if (item.direction.d == 'bottom') {
            // this.PI2
            if (item.directionType == 1) {
                item.direction.sAngle -= this.mounthSpeed
                if (item.direction.sAngle < avgAngle + this.mounthSpeed) {
                    item.direction.sAngle = avgAngle + this.mounthSpeed
                    item.directionType = 2
                }
 
                item.direction.eAngle += this.mounthSpeed
                if (item.direction.eAngle > avgAngle - this.mounthSpeed) {
                    item.direction.eAngle = avgAngle - this.mounthSpeed
                    item.directionType = 2
                }
            }
            if (item.directionType == 2) {
                item.direction.sAngle += this.mounthSpeed
                if (item.direction.sAngle > maxSAngle) {
                    item.direction.sAngle = maxSAngle - this.mounthSpeed
                    item.directionType = 1
                }
 
 
                item.direction.eAngle -= this.mounthSpeed
                if (item.direction.eAngle < maxEAngle) {
                    item.direction.eAngle = maxEAngle + this.mounthSpeed
                    item.directionType = 1
                }
            }
        }
        if (item.direction.d == 'left' || item.direction.d == 'top') {
            // this.PI2
            if (item.directionType == 1) {
                item.direction.sAngle += this.mounthSpeed
                if (item.direction.sAngle > avgAngle - this.mounthSpeed) {
                    item.direction.sAngle = avgAngle - this.mounthSpeed
                    item.directionType = 2
                }
 
                item.direction.eAngle -= this.mounthSpeed
                if (item.direction.eAngle < avgAngle + this.mounthSpeed) {
                    item.direction.eAngle = avgAngle + this.mounthSpeed
                    item.directionType = 2
                }
            }
            if (item.directionType == 2) {
                item.direction.sAngle -= this.mounthSpeed
                if (item.direction.sAngle < maxSAngle) {
                    item.direction.sAngle = maxSAngle + this.mounthSpeed
                    item.directionType = 1
                }
 
 
                item.direction.eAngle += this.mounthSpeed
                if (item.direction.eAngle > maxEAngle) {
                    item.direction.eAngle = maxEAngle - this.mounthSpeed
                    item.directionType = 1
                }
            }
        }
        if (item.direction.d == 'right') {
            // maxSAngle =  this.PI2 
            if (item.directionType == 1) {
                // avgAngle = this.PI2
                avgAngle = 0
                item.direction.sAngle -= this.mounthSpeed
                if (item.direction.sAngle < avgAngle + 0.001) {
                    item.direction.sAngle = avgAngle + 0.001
                    item.directionType = 2
                }
 
                item.direction.eAngle += this.mounthSpeed
                avgAngle = this.PI2
                if (item.direction.eAngle > avgAngle - 0.001) {
                    item.direction.eAngle = avgAngle - 0.001
                    item.directionType = 2
                }
            }
            if (item.directionType == 2) {
                item.direction.sAngle += this.mounthSpeed
                if (item.direction.sAngle > maxSAngle) {
                    item.direction.sAngle = maxSAngle - + 0.001
                    item.directionType = 1
                }
 
                item.direction.eAngle -= this.mounthSpeed
                if (item.direction.eAngle < maxEAngle) {
                    item.direction.eAngle = maxEAngle + + 0.001
                    item.directionType = 1
                }
            }
        }
    }
    clearCanvas() {
        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
    /**
         * @description {生成随机整数}
         * @param {下限} lower 
         * @param {上限} upper 
         */
    random(lower, upper) {
        return Math.floor(Math.random() * (upper - lower)) + lower;
    }
    random2(lower, upper) {
        return Math.random() * (upper - lower) + lower;
    }
}
new cdr({
    canvas: document.getElementById("chidoudou")
})

html

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>吃豆人</title>
    <style>
html,body{
margin: 0;
padding: 0;
}
canvas{
display: block;
background: #ffd;
}
</style>
</head>
 
<body>
<div class="example-box">
<canvas id="chidoudou"></canvas>
</div>
</body>
<script src="../js/cdr.js"></script>
  
 
</html>

gulpfile.js

var gulp = require('gulp');
// 在命令行设置为生产环境或者开发环境
//开发环境不要使用压缩，会影响找错
// windows: set NODE_ENV = development 或 production  
//（可能会有问题， 建议使用 :var environment = process.env.NODE_ENV || 'development';）
// mac  linux : export NODE_ENV = development 或 production
var environment = process.env.NODE_ENV || 'development';
//根据自己开发的实际需求自行设置， src放开发文件， dist是打包压缩后的导出目录
const folder = {
src: "canvas/",
dist: 'dist/'
}
// 压缩html代码
const htmlClean = require('gulp-htmlclean');
// 图片类： 压缩PNG, JPEG, GIF and SVG
const imageMin = require('gulp-imagemin');
// uglify 不支持压缩 es6 ， 需要先使用babel降级才行 */
const uglifyJS = require('gulp-uglify')
//es6 降级到es5    请使用  "gulp-babel": "^7.0.1", 
//切记不要用 8版本， 会出现无法输出的情况
const babel = require('gulp-babel');
//去除掉 注释， console 和 debugger
const removeComments = require('gulp-strip-debug')
//less 转 css
const less = require('gulp-less');
//css3 兼容各类浏览器脚本
const postCss = require('gulp-postcss');
const autoPrefixer = require('autoprefixer');
//css代码压缩
const cleanCss = require('gulp-clean-css');
//创建服务器环境插件 支持热更新
const connect = require("gulp-connect");
gulp.task('html', function () {
const step = gulp.src(folder.src + "html/*")
.pipe(connect.reload())
if (environment == 'production') {
step.pipe(htmlClean())
}
step.pipe(gulp.dest(folder.dist + "html/"))
})
gulp.task('img', function () {
gulp.src(folder.src + "img/*")
.pipe(imageMin())
.pipe(gulp.dest(folder.dist + "img/"))
})
gulp.task('css', function () {
var step = gulp.src(folder.src + "css/*")
.pipe(connect.reload())
.pipe(less())
.pipe(postCss([autoPrefixer()]))
if (environment == 'production') {
step.pipe(cleanCss())
}
step.pipe(gulp.dest(folder.dist + "css/"))
})
gulp.task('js', function () {
var step = gulp.src(folder.src + "js/*")
.pipe(connect.reload())
.pipe(babel({
presets: ['es2015']
}))
if (environment == 'production') {
step.pipe(removeComments())
.pipe(uglifyJS())
}
step.pipe(gulp.dest(folder.dist + "js/"))
})
gulp.task('server', function () {
    //设置默认服务器接口， livereload: true 是否监视文件变化
connect.server({
port: 8888,
livereload: true
})
})
//自动刷新页面
gulp.task('watch', () => {
gulp.watch(folder.src + "html/*", ['html']);
gulp.watch(folder.src + "css/*", ['css']);
gulp.watch(folder.src + "js/*", ['js'])
})
gulp.task("default", ["html", "img", "css", "js", "server", "watch"]);
// default任务一定要写，不然会报警告： Task 'default' is not in your gulpfile
// 数组中写哪一个执行哪一个任务， 从左到右执行

package.json

{
"name": "gulp_es6",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"autoprefixer": "^9.5.1",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1",
"gulp-clean-css": "^4.2.0",
"gulp-connect": "^5.7.0",
"gulp-connect-reproxy": "^0.0.98",
"gulp-htmlclean": "^2.7.22",
"gulp-imagemin": "^5.0.3",
"gulp-less": "^4.0.1",
"gulp-postcss": "^8.0.0",
"gulp-strip-debug": "^3.0.0",
"gulp-uglify": "^3.0.2"
},
"author": "",
"license": "ISC"
}
qq_1467372784
关注
专栏目录
吃豆人游戏：这是仅使用HTML，CSS和Javascript制作的吃豆人游戏
02-12
:video_game: PacmanJs是一款基于Javascript，HTML和CSS的游戏，使您可以玩有史以来最具魅力的80年代角色。 如何开始 :triangular_flag: 安装/执行 :Japanese_symbol_for_beginner: 克隆存储库并在Web浏览器上运行index.html： git clone https://github.com/RishabhDevbanshi/Pacman-Game.git 怎么玩 :sparkles: 你是黄色的吃豆人。 使用箭头键移动吃豆人。 远离彩色的鬼魂。 如果您的吃豆人与有色鬼魂接触，则游戏结束 盖好绿球 贡献 :men_holding_hands: 欢迎提出请求。 对于重大更改，请先打开一个问题以讨论您要更改的内容。 如果需要，请确保更新测试。 执照 :ledger: PAC-MAN是BANDAI NAMCO ENTERTAINMENT INC。的商标。此游戏仅用于教育目的。 支持 :raising_hands: 别忘了给这个资料库一个 :star: ！
HTML5吃豆人游戏源码
08-01
HTML5有望成为网络游戏开发的热门新平台，其跨平台性已奠定了其未来发展的基础。本专题为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写，为大家讲解HTML5游戏开发基础教程及分享实战经验。 今时今日，我们将加入HTML5游戏开发的急先锋，明日将成为时代的弄潮儿。
吃豆人
02-10
吃豆人 :joystick_selector: 模拟使用JavaScript和Phaser 3构建的原始吃豆人Jamey Pittman撰写的《被用作参考指南。
小游戏之欢乐吃豆人canvas重制版
PlutoZML的博客
04-11 974
《Pac-Man》上一次已经写过了，但是用vue写的，整体下来能玩，但是自己感觉不算流畅，而且游戏计算方面也有点欠缺，感兴趣的可看我上一篇文章。这次我又卷土重来，在三四天内用空闲时间，用canvas重构了一个完整且自认为完美的Pac-Man
可爱的吃豆人
weixin_55788590的博客
05-17 413
吃豆人的难点可能就在于嘴巴的张开与闭合这里，很多人不明白这个效果是怎么实现的，其实只需要画一个3/4圆和一个矩形便可。 // 吃豆人形状-整体 // 1. 标识开始创建 beginPath() context.beginPath() // 2. 设置绘制的形状 - rect() context.arc(400,200,100,0,Math.PI*1.5) // 3. 标识创建路径 closePath() .
JS实现简单的吃豆人小游戏
weixin_43212739的博客
10-09 4163
吃豆人小游戏 今天练习了一下JS，写了一个吃豆人的小demo Html以及CSS部分 首先定义一个div，用来存放吃豆人的一些元素，我们给他加一个id="game"，然后我们在这div里面添加我们要写的标签。 <div id="game"> <div class="wall"></div> <div class="wall"></div&g...
js+canvas实现动态吃豆人效果
12-29
效果图： 代码如下： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title>吃豆人V01</title> </head> <body> <canvas id=canvas width=500px height=500px xss=removed></canvas> [removed] var canvas = document.getElementById(canvas); var context = canvas.getContext(2d
google吃豆人 js源码
03-16
google吃豆人 js源码google吃豆人 js源码google吃豆人 js源码google吃豆人 js源码google吃豆人 js源码google吃豆人 js源码
google insert coin 吃豆人游戏中用到的JS 第二个mCyp_xvgBog.js
05-22
google insert coin 吃豆人游戏中用到的JS 第二个mCyp_xvgBog.js 可做研究用
HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）
李南江
06-18 1265
HTML +CSS + JS 10 分钟实现一个吃豆豆小游戏
吃豆豆游戏源码
01-07
基于JavaScript的h5游戏吃豆豆经典吃豆子游戏是一款益智类游戏，目标就是避开小怪物的追赶吃完所有豆子，吃了咖啡会暂时无敌，拿着大锤子追得怪物满处跑。
吃豆人网页端HTML5源码
03-19
吃豆人网页端HTML5源码
Mrs-Pac-Man:仅使用Javascript，CSS和HTML重新制作经典的《吃豆人》经典游戏
05-17
吃豆人太太 我仅使用Javascript，CSS和HTML构建了经典的吃豆人游戏的娱乐内容。 玩家在迷宫中导航吃豆人，以收集点，同时避开五颜六色的幽灵（眨眼，小指，墨黑和克莱德）。 如果他们成功收集了所有圆点，则玩家将赢得一个等级。 有一些特殊的点称为“能量颗粒”，可让吃豆人暂时吃掉鬼魂。 内容 使用的技术 HTML5 CSS3 Javscript ES6 幽灵AI Pac-Man Ghost AI具有几种不同的策略： 所有鬼魂的初始移动均由设定的目标决定。 眨眼和漆黑会收到一个随机的方向，并会继续朝那个方向移动，直到撞到墙，然后他们会收到一个新的方向。 当不易受到攻击时，Pinky和Clyde将计算吃豆人及其潜在动作之间的距离，并选择最短的距离。 如果卡住，Pinky和Clyde也将收到随机方向。 Pinky和Clyde AI逻辑的代码片段： function ghos
精品源码 / 休闲游戏 / 欢乐吃豆人
01-11
《欢乐吃豆人》是一款经典的休闲游戏，源自我们的童年记忆，深受各年龄段玩家的喜爱。这款游戏的核心玩法是控制一个小角色在迷宫中吃掉散布的豆子，同时避免被敌人的追逐。在这里，我们主要探讨这款游戏中涉及的IT...
AnnaRun:VIT主题的吃豆人游戏，带有p5.js的Annas
05-24
安娜·朗（AnnaRun） 以VIT为主题的吃豆子游戏。 逃离安娜。 途中喝咖啡并获得能量来隐藏您的身份。 你有逃离校园的技能吗？ 屏幕截图 运行说明 Clone the repo Install npm packages (npm install) ...
JavaScript实现吃豆游戏(附完整源码)
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-29 75
JavaScript实现吃豆游戏(附完整源码)
吃豆人_代码
m0_72413130的博客
05-01 442
【代码】吃豆人_代码。
原生js 实现小人吃豆豆小游戏
xuebinsunwumei的博客
12-04 784
html代码： <div id="count" style="text-align: center;font-size: 30px;color: blue;">你已经消灭了0个敌人</div> <div style="text-align: center;margin: 20px 0;"> <button type="button" id="start_btn">开始游戏</button> <button type="butt
HTML5实现经典吃豆人游戏开发教程
为了让幽灵像在原始吃豆人游戏中一样追踪吃豆人，需要实现寻径算法，如A*算法或贪吃蛇算法，使幽灵在迷宫中自动找到到吃豆人的最短路径。 4. 吃豆积分系统：吃豆人每吃掉一个豆子，玩家就得到一定分数。这需要游戏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值