用JavaScript原生实现了一个简单的贪吃蛇小游戏
小功能:
开始选择难度
可以开始暂停游戏
食物随机
不能撞自己和墙
死亡重新加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>贪吃蛇</title>
<style>
* {
margin: 0;
}
#map {
width: 180px;
height: 180px;
position: absolute;
right: 20px;
top: 0;
bottom: 0;
margin: auto;
}
#map p {
font: 700 32px/2 "";
}
#map input:nth-of-type(1) {
margin: 10px 0;
}
#map input:nth-of-type(2) {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="map">
<p>得分:<span></span></p>
<input type="button" value="开始游戏" /><br />
当前难度 : <span></span><br />
<input type="button" value="简单" /><br />
<input type="button" value="普通" /><br />
<input type="button" value="放弃" /><br />
</div>
</body>
<script>
//map地图的创建
function Map() {
this.w = 1000;
this.h = 600;
this.display();
}
Map.prototype.display = function () {
this.ele = document.createElement('div');
this.ele.style.cssText =
`width:${this.w}px;height:${this.h}px;background:#ccc;position:relative;left:0;right:0;margin:50px auto;`;
document.body.appendChild(this.ele);
game.spanObj[0].innerHTML = game.score;
}
//食物的创建
function Food() {
this.w = 20;
this.h = 20;
this.c = 'red';
this.display();
}
Food.prototype = {
constructor: Food,
display: function () {
this.ele = document.createElement('div');
this.ele.style.cssText =
`width:${this.w}px;height:${this.h}px;position:absolute;background:${this.c};`;
map.ele.appendChild(this.ele);
this.randomPos();
},
randomPos: function () {
this.x = this.random(0, (map.w - this.w) / this.w - 1);
this.y = this.random(0, (map.h - this.h) / this.h - 1);
this.ele.style.left = this.w * this.x + 'px';
this.ele.style.top = this.h * this.y + 'px';
},
random: function (min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
}
}
class Snake {
constructor() {
this.w = 20;
this.h = 20;
//默认是向右
this.direction = 'right';
this.body = [{
x: 3,
y: 2,
c: 'blue'
}, {
x: 2,
y: 2,
c: 'yellow'
}, {
x: 1,
y: 2,
c: 'green'
}];
this.display();
}
display() {
for (var i = 0; i < this.body.length; i++) {
if (!this.body[i].ele) {
this.body[i].ele = document.createElement('div');
this.body[i].ele.style.cssText =
`background:${this.body[i].c};width:${this.w}px;height:${this.h}px;position:absolute;`;
map.ele.appendChild(this.body[i].ele);
}
this.body[i].ele.style.left = this.w * this.body[i].x + 'px';
this.body[i].ele.style.top = this.h * this.body[i].y + 'px';
}
this.body[0].ele.style.textAlign = 'center';
this.body[0].ele.style.font = '12px/20px ""';
this.direct();
}
//蛇移动
move() {
for (var i = this.body.length - 1; i > 0; i--) {
this.body[i].x = this.body[i - 1].x;
this.body[i].y = this.body[i - 1].y;
}
switch (this.direction) {
case 'left':
this.body[0].x -= 1;
break;
case 'right':
this.body[0].x += 1;
break;
case 'top':
this.body[0].y -= 1;
break;
case 'bottom':
this.body[0].y += 1;
break;
}
//蛇吃东西
if (this.body[0].x == food.x && this.body[0].y == food.y) {
game.score += 10;
game.spanObj[0].innerHTML = game.score;
food.randomPos();
this.body.push({
x: this.body[this.body.length - 1].x,
y: this.body[this.body.length - 1].y,
c: 'blue'
});
}
//自己撞自己
for (var i = 1; i < this.body.length; i++) {
if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
alert('游戏结束,你吃了自己!');
clearInterval(game.timer);
game.inputObj[0].value = '重新开始';
return;
}
}
//撞墙
if (this.body[0].x < 0 || this.body[0].x > 49 || this.body[0].y < 0 || this.body[0].y > 29) {
alert('游戏结束,你能撞动墙吗?');
clearInterval(game.timer);
game.inputObj[0].value = '重新开始';
return;
}
this.display();
}
//判断按的方向键是哪个
direct() {
document.onkeydown = (eve) => {
var e = eve || window.event;
var code = e.keyCode.code || e.which;
switch (code) {
case 37:
if (this.direction != 'right') {
this.direction = 'left';
}
break;
case 38:
if (this.direction != 'bottom') {
this.direction = 'top';
}
break;
case 39:
if (this.direction != 'left') {
this.direction = 'right';
}
break;
case 40:
if (this.direction != 'top') {
this.direction = 'bottom';
}
break;
}
}
}
}
function Game() {
this.spanObj = document.getElementsByTagName('span');
this.inputObj = document.getElementsByTagName('input');
this.score = 0;
this.onOff = true;
this.timer = null;
this.diffVal;
this.getDiff();
}
Game.prototype.getDiff = function () {
that = this;
this.inputObj[0].onclick = () => {
if (this.spanObj[1].innerHTML == '') {
alert("请选择难度");
}
}
for (let i = 1; i < this.inputObj.length; i++) {
this.inputObj[i].index = i;
this.inputObj[i].onclick = function () {
that.setDiff(this.index);
}
}
}
Game.prototype.setDiff = function (index) {
switch (index) {
case 1:
this.spanObj[1].innerHTML = '简单';
this.diffVal = 300;
break;
case 2:
this.spanObj[1].innerHTML = '普通';
this.diffVal = 100;
break;
case 3:
this.spanObj[1].innerHTML = '放弃';
this.diffVal = 30;
break;
}
this.playGame();
}
Game.prototype.playGame = function () {
this.inputObj[0].onclick = () => {
// console.log(this.diffVal);
// if(!this.diffVal){
// alert('请选择难度!!');
// }
if (this.inputObj[0].value == '重新开始') {
location.reload();
}
if (this.onOff) {
clearInterval(this.timer);
this.timer = setInterval("snake.move()", this.diffVal);
this.inputObj[0].value = '暂停游戏';
this.onOff = false;
} else {
clearInterval(this.timer);
this.inputObj[0].value = "继续开始";
this.onOff = true;
}
}
}
var game = new Game();
var map = oldmap = new Map();
var food = oldfood = new Food();
var snake = oldsnake = new Snake();
</script>
</html>
总结:学好js原生,以后想玩什么游戏自己做一个(手动滑稽)