一个原生JS实现的不太成熟的贪吃蛇游戏
2024-09-01 10:27:10
一个初初初初级前端民工
主要是记录一下写过的东西，复习用
大佬们如果看到代码哪里不符合规范，或者有更好写法的，欢迎各位批评指正
十分感谢
实现一个贪吃蛇游戏需要几步？
1.有地图
2.有蛇
3.有食物
4.有游戏规则
----->面向对象的思想：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#map{
width: 800px;
height: 600px;
background-color: #e6e6e6;
position: relative;
}
#talk{
color: red;
position: absolute;
right: -20px;
top: 20px;
}
#scoreList{
border: 1px solid cadetblue;
border-left: none;
box-shadow: 1px 1px 1px #A9A9A9;
width: 200px;
height: 400px;
overflow-y: auto;
position: absolute;
right: -200px;
}
#scoreList h3{
text-align: center;
}
.name,.score{
display: inline-block;
width: 45%;
text-align: center;
}
#start{
position: absolute;
right: -200px;
bottom: 20px;
background-color: cornflowerblue;
color: white;
box-shadow: 2px 2px 3px #d6d6d6;
padding: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="map">
<div id="scoreList">
<h3>排行榜</h3>
<hr />
<div id="container"></div>
</div>
<div id="start" onclick="start()">开始游戏</div>
</div>
<script>
var name = '';
var scoreList = [];
var result = {};
function my$(id){
return document.getElementById(id);
}
if(document.cookie){
// listShow();
}
function listShow(){
var scoreStr='';
console.log(document.cookie);
var cookies = document.cookie.split(',');
for(var i = 0;i<cookies.length;i++){
var item = JSON.parse(cookies[i]);
scoreStr += '<span class="name">'+item.userName+'</span><span class="score">'+item.userScore+'</span>';
}
my$('container').innerHTML = scoreStr;
}
//食物
(function(){
var elements = [];
//用来存储食物【实例对象】的数组，在被蛇'吃掉'之后，可以通过数组来找到这个对象，进而实现在html中删除相应结点。 //食物的构造函数
function Food(x,y,width,height,color){
this.x = x||0; //没有传入值时横坐标默认为0
this.y = y||0;
this.width = width||20;
this.height = height||20;
this.color = color||'#a0c9fb';
}
//初始化，将设置好的属性值转化为样式
Food.prototype.init = function(map){
remove(); //将之前的所有食物删除
var div = document.createElement('div'); //创建一个div元素
div.style.position = 'absolute';
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.backgroundColor = this.color;
this.x = parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
this.y = parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
div.style.left = this.x + 'px';
div.style.top = this.y + 'px';
map.appendChild(div); //将div添加到地图中
elements.push(div); //将div对象追加到数组当中
}
//删除食物
function remove(){
for(var i=0;i<elements.length;i++){
var ele = elements[i];
ele.parentNode.removeChild(ele);
elements.splice(i,1);
}
}
window.Food = Food; //Food构造函数是在自调用函数中写的（目的是避免变量重名的问题),这里用Food构造函数来创建window对象的Food方法,使其可以在自调用函数之外被调用
}());
//蛇
(function(){
var elements = [];
function Snake(width,height,direction){
this.width = width||20;
this.height = height||20;
this.direction = direction||'right';
this.currentDir = this.direction;
this.score = 0;
this.body = [
{x:3,y:2,color:'red'},
{x:2,y:2,color:'orange'},
{x:1,y:2,color:'orange'}
] //蛇的每一块身体是一个div，通过它们坐标的改变来实现蛇的移动.
}
//初始化，
Snake.prototype.init = function(map){
remove();
for(var i=0;i<this.body.length;i++){ //body的每一块都有相应的坐标,颜色,宽高等,要通过循坏为每一块进行初始化
var obj = this.body[i];
var div = document.createElement('div');
map.appendChild(div);
div.style.position = 'absolute';
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.backgroundColor = obj.color;
div.style.left = obj.x*this.width + 'px';
div.style.top = obj.y*this.height + 'px';
elements.push(div);
}
}
//让蛇动起来(改变body每一块的坐标 每次调用整体动一下)
Snake.prototype.move = function(food,map){ //food参数在用来判断蛇是否吃掉食物时使用,map参数在对food进行初始化时使用
var i = this.body.length-1; //判断蛇的body中 最后一块的下标
for(;i>0;i--){ //Step1： 从最后一块开始到第二块的坐标值改变
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
switch(this.direction){ //Step2: 根据之前设定的方向来判断蛇头(第一块)的坐标变化
case 'right':this.body[0].x+=1;break;
case 'left':this.body[0].x-=1;break;
case 'top':this.body[0].y-=1;break;
case 'bottom':this.body[0].y+=1;break;
} //判断是否吃到 蛇头的坐标 == 食物的坐标 即为吃到
var headX = this.body[0].x*this.width;
var headY = this.body[0].y*this.height;
if(headX == food.x && headY == food.y){
var last = this.body[this.body.length-1];
this.body.push({
x:last.x,
y:last.y,
color:last.color
}); //在body最后增加一个对象,坐标等于最后一块的坐标即可
this.score = this.score+1;
food.init(map); //重新初始化一个食物出来
}
}
function remove(){
var i = elements.length-1;
for(;i>=0;i--){
elements[i].parentNode.removeChild(elements[i]);
elements.splice(i,1);
}
}
window.Snake = Snake;
}());
//游戏
(function(){
var that; //setInterval中的this是window,所以先定义一个that,将我们要使用的this对象存在that中,这样就可以在setInterval中使用了
function Game(map){
that = this; //this是新的实例对象
this.food = new Food(); //创建food实例对象
this.snake = new Snake(); //创建snake实例对象
this.map = map; //将这些都作为game实例对象的属性
}
Game.prototype.init = function(){
this.food.init(this.map);
this.snake.init(this.map);
this.run();
this.bindKey();
} // 之前的snake.move是让蛇动一下,在这里放在setInterval中让它一直移动.
Game.prototype.run = function(){
var timeId = setInterval(function(){ //timeId用于clearInterval
this.snake.move(this.food,this.map); //1.蛇的坐标改变
this.snake.init(this.map); //2.画出蛇
var xMax = this.map.offsetWidth/this.snake.width; //横坐标最大值
var yMax = this.map.offsetHeight/this.snake.height;//纵坐标最大值
var headX = this.snake.body[0].x;
var headY = this.snake.body[0].y;
if(headX>=xMax||headX<0||headY>=yMax||headY<0){ //判断是否撞墙
this.scoreFunction(timeId);
//尝试变色
// var i=0;
// setInterval(function(){
// this.snake.body[i].color = 'red';
// this.snake.init();
// i++;
// }.bind(that),500)
//本来想写一个 蛇撞墙之后身体都变成红色的效果 emmm失败了
}
for(var i=1;i<this.snake.body.length;i++){ //判断是否撞自己
if(headX==this.snake.body[i].x&&headY==this.snake.body[i].y){
this.scoreFunction(timeId);
}
}
}.bind(that),150); //bind的作用是将bind后面括号中的值作为函数中this的值
}
//分数结算函数
Game.prototype.scoreFunction = function(timeId){
alert('啊啊啊wsl!!!!');
name = prompt('请问高手尊姓大名？');
result.userName = name;
result.userScore = this.snake.score;
scoreList.push(JSON.stringify(result));
scoreList.sort(function(a,b){
var a = JSON.parse(a);
var b = JSON.parse(b);
return b.userScore - a.userScore;
}) //排行榜排序功能
var cookieStr = JSON.stringify(scoreList);
cookieStr = cookieStr.replace(',',';');
document.cookie = 'list = '+cookieStr; //尝试写在cookie中并没有成功 嘤
//将分数写入scoreList盒子
var scoreStr='';
for(var i in scoreList){
var item = JSON.parse(scoreList[i]);
scoreStr += '<span class="name">'+item.userName+'</span><span class="score">'+item.userScore+'</span>';
}
my$('container').innerHTML = scoreStr;
clearInterval(timeId); //清除定时器 蛇停止移动
} //按下键盘相应键,给蛇的direction赋值,需要注意的是蛇不可以掉头
Game.prototype.bindKey = function(){
document.addEventListener('keydown',function(e){
switch(e.keyCode){
case 37:
if(this.snake.currentDir!='right'){
this.snake.direction='left';
this.snake.currentDir='left';
}
break;
case 38:
if(this.snake.currentDir!='bottom'){
this.snake.direction='top';
this.snake.currentDir='top';
}
break;
case 39:
if(this.snake.currentDir!='left'){
this.snake.direction='right';
this.snake.currentDir='right';
}
break;
case 40:
if(this.snake.currentDir!='top'){
this.snake.direction='bottom';
this.snake.currentDir='bottom';
}
break;
}
}.bind(that),false)
}
//把Game暴露给window
window.Game = Game;
}())
//创建游戏对象并初始化
function start(){
var game = new Game(my$('map'));
game.init(my$('map'));
} </script>
</body>
</html>
1.自调用函数除了避免变量重名外还有其他的作用吗？
2.原型的作用是共享数据，节约内存空间。
3.setInterval 中的this是window。
4.bind的作用是将bind后面括号中的值作为函数中this的值。
最新文章
- jQuery构造函数init参数分析（三）
- 日期运算 jsf日期组建
- WeakHashMap和HashMap的区别
- NeHe OpenGL教程 第十八课：二次几何体
- 关于sqlserver身份登录失败的解决方法
- Qt 日志宏
- canvas 下载
- OpenStack导入镜像后Launch不起来的几个问题
- C# 打开指定文件或网址
- winform音频播放器(有声小说[凡人修仙传])
- mysql目录迁移 更改mysql的存储目录
- Springboot中使用Xstream进行XML与Bean 相互转换
- Bootstrap-table 使用总结
- ubuntu 发送邮件
- js设置滚动条定位到所属容器的最底部
- mybatis配置进阶
- 深入理解Linux网络技术内幕——网络设备初始化
- C#编程（十）----------C#预处理器
- angular学习笔记(九)-css类和样式3
- c++的内存分配