//定义食物类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哪些后缀的文件可以被当做模块引用
}
}
