游戏地址:http://www.yating.online/game/retroSnaker.html
喜欢就给我点个星吧~:https://github.com/Chenyating/easyGame
附上html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RETRO-SNAKER-YATING</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- <link rel="stylesheet" href="index.less" /> -->
<script src="vue.js"></script>
<script src="jquery.js"></script>
<style>
body,
html {
width: 100%;
height: 100%;
position: fixed;
overflow-y: hidden;
}
* {
padding: 0;
margin: 0;
}
#app {
position: fixed;
width: 100%;
height: 100%;
background: white;
}
.title {
font-size: 1.5rem;
text-align: center;
margin: 0.5rem;
font-weight: bold;
}
.stage {
display: flex;
flex-wrap: nowrap;
padding: 0.5rem;
}
#tanchi {
background: white;
border: solid 0.1rem #000000;
width: 65%;
height: 100%;
;
}
.operation {
width: 100%;
text-align: center;
margin-left: 0.5rem;
border: solid 0.1rem black;
}
.inf {
font-size: 1rem;
padding: 0.5rem 0;
background: black;
color: white;
font-weight: bold;
width: 100%;
}
.explain {
padding: 0.1rem 0.6rem;
text-align: center;
}
.chinese {
font-size: 0.5rem;
}
p{
padding: 1rem;
}
</style>
</head>
<body>
<div id="app">
<div class="title">RETRO-SNAKER</div>
<div class="stage">
<canvas id="tanchi" width=800 height=1500>
</canvas>
<div class="operation">
<p>分值</p>
<div class="inf">{{scope}}</div>
<p>GAME</p>
<div class="inf" id="title" @click="begin()">
游戏开始
</div>
<p>VELOCITY</p>
<div class="inf">{{v}}</div>
<p>AUTHOR</p>
<div class="inf">YATING</div>
</div>
</div>
<div class="explain">
Fingers slide up and down in the screen, click on the screen to pause.If you bump into yourself, the game is over.
<div class="chinese">手指在屏幕中上下左右滑动,点击屏幕暂停。如果撞到自己或墙,游戏结束</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
js代码:
var app = new Vue({
el: "#app",
data: {
scope: 0,
radomX: null,
radomY: null,
foodX: null,
foodY: null,
context: null,
gameState: 0,
snaker: [],
v:300,
},
methods: {
//随机生成x坐标
radomx() {
this.radomX = parseInt(Math.random() * 39);
return this.radomX;
},
//随机生成y坐标
radomy() {
this.radomY = parseInt(Math.random() * 75);
return this.radomY;
},
//随机生成蛇头的坐标
snakerHead() {
//清空蛇身
this.snaker.splice(0, this.snaker.length);
this.snaker.push([this.radomx() * 20, this.radomy() * 20]);
//蛇头也不能和食物重复;
if (this.foodX == this.snaker[0][0] && this.foodY == this.snaker[0][1]) {
return this.snakerHead();
}
},
//随机生成食物的坐标,且不能和蛇身,蛇头重合
food() {
this.foodX = this.radomx() * 20;
this.foodY = this.radomy() * 20;
//判断食物不能和蛇重复了。
for (var i = 0; i < this.snaker.length; i++) {
//只要出现重复,则重新调用food();
if (this.foodX == this.snaker[i][0] && this.foodY == this.snaker[i][1]) {
return this.food();
}
}
this.painFood();
},
//绘制红色食物
painFood() {
var c = document.getElementById("tanchi");
this.context = c.getContext("2d");
this.context.fillStyle = "#8A3324";
this.context.fillRect(this.foodX, this.foodY, 20, 20);
},
//是否出界
ifOut() {
if (
0 > this.snaker[0][0] ||
this.snaker[0][0] > 780 ||
1480 < this.snaker[0][1] ||
this.snaker[0][1] < 0
) {
alert("游戏结束,你撞到墙了");
this.gameOver();
}
for (var i = this.snaker.length - 1; i > 0; i--) {
if (this.snaker[0][0] == this.snaker[i][0] && this.snaker[0][1] == this.snaker[i][1]) {
alert("游戏结束,你撞到你自己啦!")
this.gameOver();
}
}
},
//游戏结束
gameOver() {
//清空蛇身;
this.snaker.splice(0, this.snaker.length);
//游戏分值清空,游戏状态改为0;
this.gameState = 0;
this.scope = 0;
//清空整个画布
this.context.clearRect(0, 0, 800, 1500);
$("#title").html("");
$("#title").html("游戏开始");
},
//游戏开始
begin() {
if (this.gameState != 0) {
//游戏结束状态
$("#title").html("");
$("#title").html("游戏开始");
this.gameState = 0;
this.scope = 0;
//清空整个画布
this.context.clearRect(0, 0, 800, 1500);
} else {
//游戏开始状态
this.food();
this.snakerHead();
this.painSnakerHead()
this.gameState = 1;
$("#title").html("");
$("#title").html("游戏结束");
}
},
//蛇在x轴的变化
changgeX(x) {
this.context.clearRect(this.snaker[this.snaker.length - 1][0], this.snaker[this.snaker.length - 1][1], 20, 20);
for (var i = this.snaker.length - 1; i >= 0; i--) {
if (i == 0) {
this.snaker[0][0] = this.snaker[0][0] + x;
this.painSnakerHead();
} else {
this.snaker[i][0] = this.snaker[i - 1][0];
this.snaker[i][1] = this.snaker[i - 1][1];
this.painSnakerBody();
this.context.fillRect(this.snaker[i][0], this.snaker[i][1], 20, 20);
}
}
//食物出现的位置和蛇头重合,则在末尾加上食物的位置,就是y轴最后+-20;
if (this.foodX == this.snaker[0][0] && this.foodY == this.snaker[0][1]) {
this.snaker.push([this.foodX - x, this.foodY]);
this.context.fillRect(
this.snaker[this.snaker.length - 1][0],
this.snaker[this.snaker.length - 1][1],
20,
20
);
this.painSnakerBody();
this.food();
this.scope = this.scope + 1;
}
this.ifOut();
},
//蛇在y轴的变化
changgeY(y) {
this.context.clearRect(this.snaker[this.snaker.length - 1][0], this.snaker[this.snaker.length - 1][1], 20, 20);
for (var i = this.snaker.length - 1; i >= 0; i--) {
if (i == 0) {
this.snaker[0][1] = this.snaker[0][1] - y;
this.painSnakerHead();
} else {
this.snaker[i][0] = this.snaker[i - 1][0];
this.snaker[i][1] = this.snaker[i - 1][1];
this.painSnakerBody();
this.context.fillRect(this.snaker[i][0], this.snaker[i][1], 20, 20);
}
}
//食物出现的位置和蛇头重合,则在末尾加上食物的位置,就是y轴最后+-20;
if (this.foodX == this.snaker[0][0] && this.foodY == this.snaker[0][1]) {
this.snaker.push([this.foodX, this.foodY + y]);
this.context.fillRect(
this.snaker[this.snaker.length - 1][0],
this.snaker[this.snaker.length - 1][1],
20,
20
);
this.painSnakerBody();
this.food();
this.scope = this.scope + 1;
}
this.ifOut();
},
//画蛇身
painSnakerBody() {
this.context.fillStyle = "#363636";
},
//画蛇头
painSnakerHead() {
this.context.fillStyle = "#00755E";
this.context.fillRect(this.snaker[0][0], this.snaker[0][1], 20, 20);
},
},
mounted() {
},
watch: {}
});
var startx, starty;
//获得角度
function getAngle(angx, angy) {
return (Math.atan2(angy, angx) * 180) / Math.PI;
}
//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
//如果滑动距离太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}
var angle = getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if (
(angle >= 135 && angle <= 180) ||
(angle >= -180 && angle < -135)
) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
} else {
result = 0;
}
return result;
}
//手指接触屏幕
document.addEventListener(
"touchstart",
function (e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
},
false
);
//手指离开屏幕
let timer = null;
//速度控制
app.v = 300;
if (app.scope >= 10) {
var j = parseInt(app.scope / 10);
app.v = 300 - 20 * j;
}
document.addEventListener(
"touchend",
function (e) {
if (app.gameState == 0) {
return;
}
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
clearInterval(timer);
if (direction == 1) {
timer = setInterval(() => {
app.changgeY(20);
}, app.v)
}
if (direction == 2) {
timer = setInterval(() => {
app.changgeY(-20);
}, app.v)
}
if (direction == 3) {
timer = setInterval(() => {
app.changgeX(-20);
}, app.v)
}
if (direction == 4) {
timer = setInterval(() => {
app.changgeX(20);
}, app.v)
}
if (direction == 0) {
clearInterval(timer);
}
},
false
);