一个原生JS实现的不太成熟的贪吃蛇游戏
一个初初初初级前端民工
主要是记录一下写过的东西，复习用
大佬们如果看到代码哪里不符合规范，或者有更好写法的，欢迎各位批评指正
十分感谢
实现一个贪吃蛇游戏需要几步？
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的值。
一个原生JS实现的不太成熟的贪吃蛇游戏的更多相关文章
- 100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- JS贪吃蛇游戏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 用OpenGL简单编写的一个最简单贪吃蛇游戏
刚学OpenGL的时候,写的一个最简单的贪吃蛇游戏代码 如下: //贪吃蛇游戏 #include<stdio.h> #include<stdlib.h> #include< ...
- JS高级---面向对象的编程思想（贪吃蛇梳理）
面向对象的编程思想(贪吃蛇梳理) 模拟贪吃蛇游戏,做的项目 地图: 宽,高,背景颜色,因为小蛇和食物都是相对于地图显示的, 这里小蛇和食物都是地图的子元素, 随机位置显示, 脱离文档流的, 地图也需要 ...
- 原生Js贪吃蛇游戏实战开发笔记
前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...
- 手把手教你做一个原生js拖动滑块【兼容PC和移动端】
废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...
- 自己封装的一个原生JS拖动方法。
代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point ...
- 一个原生js写的加减乘除运算
根据我的经验我说的再多也没人看,不过还是简单介绍下效果吧,可以选择+,-,*,/,去计算数据,喜欢的话就粘贴复制自己看去吧! <!DOCTYPE html PUBLIC "-//W3C ...
- js编写简单的贪吃蛇游戏
css代码 *{ margin:; padding:; } td{ width: 4px; height: 4px; background: #ccc; border: 2px solid #ccc; ...
随机推荐
- Windows 7 sometimes breaks FTP connections on Java 7 if firewall is enabled.
Solution: 用管理员身份,在cmd命令行输入: netsh advfirewall set global StatefulFTP disable 会关闭防火墙,从而解决问题.
- Atcoder D - A or...or B Problem（思维）
题目链接:http://agc015.contest.atcoder.jp/tasks/agc015_d 题意:给出两个数b,a(a>=b)问{a,a+1,....,b}的集合内取任意数求或运算 ...
- 2015北京区域赛 Mysterious Antiques in Sackler Museum 几何基础+思维
题意是,选出三个,看看是否可以凑成一个新的矩形. #include<bits/stdc++.h> using namespace std; struct node { ]; }a[]; b ...
- ☆1003 Dijstra
循环N次 算法分为两部分: 1)找到距离最小的城市,找不到距离更小的城市时退出方法 2)更新距离 实际操作时,先初始化: 更新dis为INF,更新dis[start] = 0: 变种: 找最短路径的条 ...
- 【Offer】[42] 【连续子数组的最大和】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一个整型数组,数组里有正数也有负数.数组中的一个或连续多个整数组成一个子数组.求所有子数组的和的最大值.要求时间复杂度为O(n). ...
- centos7 kubernetes单机安装
单机版的kubernetes 适合初学者,对kuber有个很好的入门. 因为centos系统内置了安装源.我们可以直接安装 1.yum install -y etco kubernetes 2.whe ...
- 当React开发者初次走进React-Native的世界
RN千机变 1.技术体系问题 RN和React共用一套抽象层,相对于前端,RN其实更接近Node的运行环境 ReactNative =React +IOS +Android 看RN文档时,我会发现入门 ...
- JAVA集成JPush
本篇集成为web项目手动集成JPush 一.获取AppKey.Master Secret https://docs.jiguang.cn 成为极光用户创建一个应用拿到(AppKey.Master Se ...
- [Vue 牛刀小试]：第十七章 - 优化 Vue CLI 3 构建的前端项目模板（1）- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- Android数据列表展示之 RecylerView
一.概述 1.RecyclerView是什么? RecyclerView是一种新的视图组,目标是为任何基于适配器的视图提供相似的渲染方式.该控件用于在有限的窗口中展示大量数据集,它被作为ListVie ...