摘要:贪吃蛇制作部分首先我们需要一个的页面制作历史最高分数当前分数简单中级较难开始暂停部分紧接着我们需要一个的页面我是用来做的上面的代码是大盒子移动端的配置部分下面我们需要页面来做效果首先我们要获取
贪吃蛇制作
(https://wujian1994.github.io/...)
HTML部分 首先我们需要一个HTML的页面制作css部分 紧接着我们需要一个css的页面我是用sass来做的</>复制代码
历史最高分数:0
当前分数:5
</>复制代码
.container{
width: 3.2rem;
height: 3.2rem;
float: left;
ul{
width: 3.16rem;
height: 3.16rem;
border: 2px solid #FF9797;
li{
list-style: none;
width: 0.158rem;
height: 0.158rem;
float: left;
border-radius: 10px;
}
}
}
</>复制代码
.oper{
font-size: 0.1rem;
padding: 0.2rem 0;
width: 3.2rem;
float: left;
#level{
width: 0.5rem;
height: 0.2rem;
}
input{
margin-top: 0.1rem;
width: 0.5rem;
border-radius: 6px;
height: 0.2rem;
color: #fff;
background: green;
border: none;
outline: none;
font-weight:bold;
}
input:active{
background:#93FF93;
}
}
</>复制代码
@media screen and (min-width:320px){
html{
font-size: 100px;
}
}
@media screen and (min-width:360px){
html{
font-size: 112px;
}
}
@media screen and (min-width:375px){
html{
font-size: 117px;
}
}
@media screen and (min-width:412px){
html{
font-size: 128px;
}
}
@media screen and (min-width:414px){
html{
font-size: 129px;
}
}
@media screen and (min-width:440px){
html{
font-size: 138px;
}
}
@media screen and (min-width:480px){
html{
font-size: 150px;
}
}
@media screen and (min-width:640px){
html{
font-size: 200px;
}.container{margin: 0 auto;}
}
@media screen and (max-width:640px){
html{
font-size: 200px;
}
}
js部分
下面我们需要js页面来做效果
</>复制代码
var oul = document.getElementById("oul");
var btnStart = document.getElementById("btnStart");
var btnsuspend = document.getElementById("btnsuspend");
var bjyy = document.getElementById("bjyy");
var siwang = document.getElementById("siwang");
var siwu = document.getElementById("siwu");
var zuigao = document.getElementById("zuigao");
var fenshu = document.getElementById("fenshu");
var level = document.getElementById("level");
</>复制代码
//初始化格子
function init(){
var pianduan = document.createDocumentFragment();
for(var i = 0 ; i < 400 ; i++){
var oli = document.createElement("li");
pianduan.appendChild(oli);
}
oul.appendChild(pianduan);
lis = oul.children;
}
</>复制代码
var snake= [];
for(var i=0 ; i<5 ; i++){
snake.push({pos:i , color:randColor()})
}
//随机色
function randColor(){
return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";
}
//初始化前五个格子改背景色
function initSnake(){
for(var i=0,l=snake.length ; i
接着我们需要初始化一个食物
</>复制代码
//食物的索引
var food = {pos:0,color:"yellow"};
//生成食物
function initFood(){
var index = Math.floor(Math.random()*400);
while(isInSnake(index)){
index = Math.floor(Math.random()*400);
}
food = {pos:index,color:randColor()};
lis[food.pos].style.background=food.color;
}
判断食物不能出现在蛇的位置
</>复制代码
//判断食物不能出现蛇的位置
function isInSnake(index){
for(var i=0,l=snake.length ; i
当我们让蛇运动的时候,每前进一步,最后面的一个将变成白色
</>复制代码
var shewei = snake.slice(0,1)[0].pos;
lis[shewei].style.background = "#fff";
for(var i=0 , l=snake.length ; i
接着我们在吃掉食物之后,将吃掉的食物累加都蛇尾
</>复制代码
//蛇吃食物的碰撞检测
if(shetou == food.pos){
//将食物放到数组的前面
snake.unshift({pos:shewei,color:food.color});
//音乐特效
siwu.play();
//分数
fenshu.innerHTML = snake.length;
//生成新的食物
initFood();
}
下面我们做蛇与墙壁的碰撞
</>复制代码
var direction = 39;//方向 37左键 38上键 39右键 40下键
//个数
var geshu = 20;
//蛇跑
var shetou = snake.slice(-1)[0].pos;
//关于墙的碰撞检测
if((shetou+1)%geshu == 0 && direction == 39){
death()
}else if(shetou>=(400-geshu) && direction == 40){
death()
}else if((shetou < geshu) && direction == 38){
death()
}else if(shetou%geshu == 0 && direction == 37){
death()
}
接着我们检测是否碰撞到自身
</>复制代码
//检测是否吃到自己
for(var i=0 , l=snake.length ; i
下面我们控制方向
</>复制代码
if(direction == 40){//向下
snake[l-1].pos = snake[l-1].pos+geshu;
}else if(direction == 37){//向左
snake[l-1].pos = snake[l-1].pos-1;
}else if(direction == 39){//向右
snake[l-1].pos = snake[l-1].pos+1;
}else if(direction == 38){//向上
snake[l-1].pos = snake[l-1].pos-geshu;
}
//给文档加点击下键事件
document.addEventListener("keydown" , function(e){
e=e || window.event;
//获取按下的是什么键
switch(e.keyCode){
//左键
case 37:{
if(direction == 39)return false;
direction = e.keyCode;
break;
}
//上键
case 38:{
if(direction == 40)return false;
direction = e.keyCode;
break;
}
//右键
case 39:{
if(direction == 37)return false;
direction = e.keyCode;
break;
}
//下键
case 40:{
if(direction == 38)return false;
direction = e.keyCode;
break;
}
}
} , false)
如果碰撞到墙壁和自身以后调用死亡函数
</>复制代码
//死亡函数
function death(){
alert("你以头破血流,游戏结束!");
//location.href=location.href;
location.reload();
}
接着我们来做开始游戏和暂停游戏
</>复制代码
var timer = null;
//开始游戏
btnStart.onclick = function(){
clearInterval(timer);
timer = setInterval(yundong,shudu);
//背景音乐开始
bjyy.play();
}
//暂停游戏
btnsuspend.onclick = function(){
clearInterval(timer);
}
下面我们设置游戏难度
</>复制代码
//蛇的熟读
var shudu = 100;
//设置难度
shudu = level.value;
紧跟着我们需要做历史最高分数和当前分数
</>复制代码
//获取蛇的长度
//分数
fenshu.innerHTML = snake.length;
//历史最高分
var score = localStorage.getItem("score")||0;
//分数
fenshu.innerHTML = snake.length;
var changdu = snake.length;
//历史最高分
var score = localStorage.getItem("score")||0;
if(changdu > score){
localStorage.setItem("score" , changdu);
}
最后我们做手机效果,上下左右滑动
</>复制代码
function hua(e){
//获取按下的是什么键
switch(e){
//左键
case 37:{
if(direction == 39)return false;
direction = e;
break;
}
//上键
case 38:{
if(direction == 40)return false;
direction = e;
break;
}
//右键
case 39:{
if(direction == 37)return false;
direction = e;
break;
}
//下键
case 40:{
if(direction == 38)return false;
direction = e;
break;
}
}
}
//位置改变
//开启滑动
hammertime.get("swipe").set({ direction: Hammer.DIRECTION_ALL });
hammertime
.on("swipeleft", logEventType1)
.on("swiperight", logEventType3)
.on("swipeup",logEventType2)
.on("swipedown", logEventType4);
function logEventType1() {
hua(37);
}
function logEventType2() {
hua(38);
}
function logEventType3() {
hua(39);
}
function logEventType4() {
hua(40);
}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91427.html
摘要:利用制作简单的贪吃蛇游戏首先,我们先来分析一下整个页面的构成。代码如下因为我们需要兼容移动端设备和端设备,所以我们需要在前加上媒体查询样式,并且在使用单位时,需要用到而不是。 利用js制作简单的贪吃蛇游戏 showImg(https://segmentfault.com/img/remote/1460000010708169); 首先,我们先来分析一下整个页面的构成。一看可知,游戏框内...
摘要:基本介绍一款移动端贪吃蛇大作战游戏。主要的游戏逻辑有贪吃蛇移动碰撞检测贪吃蛇碰撞碰撞墙壁和吃食物。贪吃蛇的身体如何跟随头部移动需要分为两种情况,在单位时间内贪吃蛇移动一单位长度和贪吃蛇移动多单位长度。 基本介绍 一款移动端贪吃蛇大作战游戏。(只支持移动端) 这是一个临近 deadline 的课设项目,为了方便地使用TS,我直接使用angular-cli生成了TypeScript的项...
摘要:最近帮人做了个贪吃蛇的游戏交作业用,很简单,界面如下开始界面游戏中界面是不是很简单朴素。代码在这里赋值,而不是在事件的循环中赋值,避免按键太快 最近帮人做了个贪吃蛇的游戏(交作业用),很简单,界面如下:开始界面: showImg(https://segmentfault.com/img/bV49cP?w=638&h=478); 游戏中界面: showImg(https://segmen...
摘要:贪吃蛇类默识贪吃蛇速度,毫秒地图轴分为多少单位地图轴分为多少单位贪吃蛇运动速度贪吃蛇每节身体和食物的宽高地图轴分为多少单位初始化贪吃蛇属性蛇移动方向食物和食物的坐标游戏开始创建地图初始化食物初始化贪吃蛇绑定键盘方向更改贪吃蛇方向移动贪吃蛇创 /** 贪吃蛇类 @author 默识 @param {int} speed 贪吃蛇速度,毫秒 @param {int} x 地图x轴分...
阅读 2372·2021-10-11 10:59
阅读 2636·2021-10-11 10:58
阅读 3348·2021-09-08 09:35
阅读 3904·2021-09-02 15:21
阅读 1508·2019-08-30 15:53
阅读 2660·2019-08-29 14:16
阅读 2111·2019-08-26 14:00
阅读 2990·2019-08-26 13:52