//定义食物类food class Food { //定义一个属性表示食物对应的元素 element: HTMLElement; constructor() { //获取页面中的food元素并赋值给element this.element = document.getElementById('food'); } //定义一个获取食物X轴坐标的方法 get X() { return this.element.offsetLeft; } //定义一个获取食物Y轴坐标的方法 get Y() { return this.element.offsetTop; } //修改食物位置的方法 change() { // left:0-290,top:0-290 需要被10整除,蛇移动一次就是一格(10)。 // let left = Math.round(Math.random() * 29) * 10; let top = Math.round(Math.random() * 29) * 10; this.element.style.left = `${left}px` this.element.style.top = `${top}px` } } export default Food
//游戏控制器,控制其他所有类 import Snake from "./Snake"; import Food from "./Food"; import ScorePanel from "./ScorePanel"; class GameControl { //定义三个属性 //蛇 snake: Snake; food: Food; scorePanel: ScorePanel; //创建一个属性存储蛇的移动放心 direction: string = ''; //创建一个属性记录游戏是否结束 isLive: boolean = true; constructor() { this.snake = new Snake(); this.food = new Food(); this.scorePanel = new ScorePanel(10,2); this.init() } //游戏初始化方法调用后游戏就开始 init() { //绑定键盘按下的事件 document.addEventListener('keydown', this.keydowHandler.bind(this)) this.run() } //创建一个键盘按下的响应函数 keydowHandler(e) { console.log(e.key); //需要检验key的值是否合法(用户是否按了正确的案件) this.direction = e.key; } //创建一个控制蛇移动的方法 run() { /* 根据方向(this.direction)来改变蛇的偏移量 向上TOP减少 向下TOP增加 向左left减少 向右left增加 */ //获取蛇现在的坐标 let x = this.snake.X; let y = this.snake.Y; //计算坐标的变化 switch (this.direction) { case 'ArrowUp': case 'Up': //向上移动TOP减小 y -= 10; break; case 'ArrowDown': case 'Down': //向下移动TOP增加 y += 10; break; case 'ArrowLeft': case 'Left': //向左移动x减小 x -= 10; break; case 'ArrowRight': case 'Right': //向右移动x增加 x += 10; break; } //检查蛇是否吃到了食物 this.checkEat(x,y) //修改蛇的位置 try { this.snake.X = x; this.snake.Y = y; } catch (e) { //进入catch,说明除了异常,游戏结束,弹出一个信息提示 alert(e.message + 'GAME OVER !');//弹出提示 this.isLive = false;//结束游戏 } //开启一个定时器,让蛇能够自己董 this.isLive && setTimeout(this.run.bind(this), 300 - (this.scorePanel.level - 1) * 30); } //定义一个方法,来检查蛇是否吃到食物 checkEat(X: Number, Y: Number) { //检查蛇是否吃到了食物 if (X === this.food.X && Y === this.food.Y) { console.log('吃到食物了'); this.food.change();//改变食物的位置 this.scorePanel.addScore();//增加分数 this.snake.addBody();//增加蛇的长度 } } } export default GameControl
//定义记分牌类 class ScorePanel { maxLevel:number//限制最大等级 upScore:number//多少分升级 //score和level用来记录分数和等级 private _score: number = 0; private _level: number = 1; //分数和等级所在元素 scoreEle: HTMLElement; levelEle: HTMLElement; constructor(maxlevel:number = 10,upScore:number=10) { this.maxLevel = maxlevel; this.upScore = upScore this.scoreEle = document.getElementsByClassName('score')[0] as HTMLAreaElement; this.levelEle = document.getElementsByClassName('level')[0] as HTMLAreaElement; } get score() { return this._score } get level() { return this._level } //设置一个加分的方法 addScore(){ let score = ++this._score; this.scoreEle.innerHTML = `${score}` //判断分数是多少,来判断是否升级 if(this._score %this.upScore ===0){ this.levelUp() } } //提升等级的方法 levelUp(){ if(this._level <this.maxLevel){ this.levelEle.innerHTML = `${++this._level}` } } } export default ScorePanel
class Snake { //表示蛇头的元素 head: HTMLElement; //表示身体的元素 bodies: HTMLCollection; //获取蛇的容器 element: HTMLElement constructor() { this.head = document.querySelector('#snake > div') this.bodies = document.getElementById('snake').getElementsByTagName('div') this.element = document.getElementById('snake'); } //获取蛇的坐标(蛇头坐标) get X() { return this.head.offsetLeft; } get Y() { return this.head.offsetTop; } set X(value: number) { if (this.X == value) { return; } //X的值的合法区间0-290 if (value < 0 || value > 290) { //蛇撞墙的处理 throw new Error('蛇撞墙了') } //修改X时,是在修改水平坐标,蛇在左右移动,蛇向左移动时,不能向右移动,反之亦然 if (this.bodies[1]) { //判断是否有第二截身体 if (value === (this.bodies[1] as HTMLElement).offsetLeft) { //判断即将改变的蛇头的坐标是否和第二截身体的坐标相同,相同就发生了掉头 //console.log('发生了掉头'); //如果发生了掉头,让蛇向反方向继续移动 if(value>this.X){ //如果value大于X,则说明蛇在向右走 value = this.X-10 }else{ value = this.X+10 } } } //移动身体 this.moveBody() this.head.style.left = `${value}px`; try { this.checkHeadBody() } catch (error) { alert(error.message+'GAME OVER !') } } set Y(value: number) { if (this.Y == value) { return; } if (value < 0 || value > 290) { //蛇撞墙的处理 throw new Error('蛇撞墙了') } //修改Y时,是在修改蛇的垂直坐标,蛇在上下移动,蛇向上移动时,不能向下移动,反之亦然 if (this.bodies[1]) { //判断是否有第二截身体 if (value === (this.bodies[1] as HTMLElement).offsetTop) { //判断即将改变的蛇头的坐标是否和第二截身体的坐标相同,相同就发生了掉头 //console.log('发生了掉头'); //如果发生了掉头,让蛇向反方向继续移动 if(value>this.Y){ //如果value大于Y,则说明蛇在向上走 value = this.Y-10 }else{ value = this.Y+10 } } } //移动身体 this.moveBody() this.head.style.top = `${value}px`; try { this.checkHeadBody() } catch (error) { alert(error.message+'GAME OVER !') } } //蛇增加身体的方法 addBody() { this.element.insertAdjacentHTML('beforeend', '<div></div>') } //添加一个蛇身体移动的方法 moveBody() { //让后一个身体的位置等于前一个身体的位置即可,从后往前改,不然就对应不上了 for (let i = this.bodies.length - 1; i > 0; i--) { //获取前边身体的位置 let x = (this.bodies[i - 1] as HTMLElement).offsetLeft; let y = (this.bodies[i - 1] as HTMLElement).offsetTop; //将值设置到当前的身体上 (this.bodies[i] as HTMLElement).style.left = `${x}px`; (this.bodies[i] as HTMLElement).style.top = `${y}px`; } } //检查头和身体是否相撞的方法 checkHeadBody(){ //获取所有的身体检查是否和蛇头的坐标发生重叠 for(let i=1;i<this.bodies.length;i++){ if(this.X === (this.bodies[i] as HTMLElement).offsetLeft&&this.Y===(this.bodies[i] as HTMLElement).offsetTop){ throw new Error('撞到身体了') } } } } export default Snake
<!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>贪吃蛇</title> </head> <body> <!-- 主容器 --> <div class="main"> <!-- 舞台 --> <div class="stage"> <!-- 蛇容器 --> <div id="snake"> <!-- 蛇的各个部分 --> <div></div> </div> <div id="food"> <!-- 添加4个div设置蛇的样式 --> <div></div> <div></div> <div></div> <div></div> </div> </div> <!-- 计分板 --> <div class="score-panel"> <div> SCORE:<span class="score">0</span> </div> <div> LEVEL:<span class="level">1</span> </div> </div> </div> </body> </html>
import './style/index.less' import GameControl from './moduls/GameControl' new GameControl();
@bgcl: #b7d4a8; * { margin: 0; padding: 0; //改变盒子模型的计算方式 box-sizing: border-box; } .main { width: 360px; height: 420px; background-color: @bgcl; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: solid 10px #000000; border-radius: 5%; } .stage { width: 304px; height: 304px; border: 2px solid black; margin: 20px 18px; //开启相对定位 position: relative; #snake>div { width: 10px; height: 10px; background-color: #000000; border: 1px solid @bgcl; //开启绝对定位 position: absolute; } } #food{ width: 10px; height: 10px; border: 1px solid @bgcl; position: absolute; left: 200px; top: 100px; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: space-between; &>div{ width: 3px; height: 3px; background-color: #000000; transform: rotate(45deg); } } .score-panel { display: flex; width: 85%; margin: 10px auto; justify-content: space-between; }
{ "name": "part3", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production", "dev": "webpack --mode development", "start": "webpack serve --open " }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.20.7", "@babel/preset-env": "^7.20.2", "babel-loader": "^9.1.0", "clean-webpack-plugin": "^4.0.0", "core-js": "^3.26.1", "css-loader": "^6.7.3", "html-webpack-plugin": "^5.5.0", "less": "^4.1.3", "less-loader": "^11.1.0", "style-loader": "^3.3.1", "ts-loader": "^9.4.2", "typescript": "^4.9.4", "webpack": "^5.75.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" }, "dependencies": { "-": "^0.0.1", "D": "^1.0.0", "postcss": "^8.4.21", "postcss-loader": "^7.0.2", "postcss-preset-env": "^7.8.3" } }
{ "compilerOptions": { "module": "ES2015", "target": "ES6", // "sourceMap": false, // "strict": true }, "exclude": [ "node_modules" ] }
//引入path模块,管理路径 // import { Configuration } from 'webpack';//运行webpack时注释掉 /** * @type {Configuration} */ const path = require('path'); //引入html-webpack-plugin const HTMLWEBPACKPLUGIN = require('html-webpack-plugin') const { CleanWebpackPlugin } = require("clean-webpack-plugin") //webpack中的所有配置信息都应写在module.exports中 module.exports = { //指定入口文件 entry: './src/index.ts', //指定打包文件所在目录 output: { //指定打包文件的目录 // path:'./dist' path: path.resolve(__dirname, 'dist'), //打包后文件的文件名 filename: "bundle.js", environment: { //配置打包的环境 arrowFunction: false,//告诉webpack不使用箭头函数 const:false,//告诉webpack不使用const } }, //指定webpack打包时要使用的模块 module: { //指定加载的规则 rules: [ { //指定规则生效的文件 test: /\.ts$/, //要使用的loader,执行顺序从后往前 use: [ {//配置babel //指定加载器 loader: "babel-loader", //设置babel options: { //设置预定义环境 presets: [ [ //指定环境插件 "@babel/preset-env", //配置信息 { //要兼容的目标浏览器 targets: { "chrome": "88", "ie": "11" }, "corejs": "3",//指定core.js的版本 // //使用core.js的方式 "useBuiltIns": "usage",//"usage"表示按需加载 }, ] ] } }, "ts-loader" ], //指定要排除的文件 exclude: /node_modules/, }, //设置less文件的处理 { test: /\.less$/, use: [ "style-loader", "css-loader", { loader:"postcss-loader", options:{ postcssOptions:{ plugins:[ [ "postcss-preset-env", { browsers:'last 2 versions' } ] ] } } }, "less-loader" ] } ] }, //配置webpack的插件 plugins: [ new CleanWebpackPlugin(), new HTMLWEBPACKPLUGIN({ // title:'这是一个自定义的title'//用来配置自动生成的html文件的title template: "./src/index.html"//用来配置自动生成的html文件的模板 }) ], mode: 'development', resolve: { //设置引用模块 extensions: ['.ts', '.js']//告诉webpack哪些后缀的文件可以被当做模块引用 } }
标签:10,游戏,value,loader,webpack,源码,snake,贪吃蛇,bodies From: https://www.cnblogs.com/SadicZhou/p/17074178.html