最近一直刷题，偶尔换个方式，让脑子休息一下。把前几天写的贪吃蛇demo分享一下。主要用的是html,css基础知识，加上一些js的键盘交互时间，鼠标点击事件以及一些页面元素创建函数，最重要的是使用DOM。使用的全是原生javascript。只要学过一点js都可以看懂。

用到的方法：

键盘事件

鼠标事件

HTML页面

贪吃蛇大概思路：

模块分析

初始游戏

蛇，食物

蛇的移动

开始/暂停游戏

重新加载游戏

碰撞问题

Style

css style demo

结语

源码下载

用到的方法：

键盘事件

keydown：按键按下

keyup：按键抬起

keypress：按键按下抬起

鼠标事件

click：单击

dblclick：双击

mousedown：鼠标按下

mouseup：鼠标抬起

mouseover：鼠标悬浮

mouseout：鼠标离开

mousemove：鼠标移动

mouseenter：鼠标进入

mouseleave：鼠标离开

DOM事件：（这个就不多说了，js和html以及css交互时必须会用的，实在不会就去啃文档吧滑稽.jpg）

HTML页面

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>贪吃蛇</title><link rel="stylesheet" href="css/demo.css">
</head>
<body> <div class="startPage" id="startPage"><div class="startBtn" id="startBtn"></div></div><div class="wrapper"> <div class="left-side"><img src="./images/start.png" width = "100" height="90"id = "startPaush"></div> <div class="main"><div class="header"><div class="score">Score : <span id = "score"></span></div></div><!-- <div><img src="./images/smallMap.jpg" class="smallMap"></div> --><div class="content" id="content"></div></div></div> <div class="loser" id = 'loser'><div class="con"><div class="close" id="close"></div><span class = "txt">Final Score：</span><span class="loserScore" id="loserScore"></span></div></div><script src="js/demo.js"></script>
</body>
</html>

贪吃蛇大概思路：

//点击开始游戏--> stratpage消失-->游戏开始

//随机出现食物，出现三节蛇开始运动

//上下左右 --> 控制蛇的运动

//判断是否吃到食物--> 食物消失 --> 蛇加一

//判断游戏结束，弹出game over

模块分析

初始游戏

这个模块主要是初始化蛇的属性，DOM事件获取html元素。确定蛇的初始位置（数组）。

var startBtn = document.getElementById('startBtn');
var startPage = document.getElementById('startPage');
var startPaush = document.getElementById('startPaush');
var loser = document.getElementById('loser');
var scoreBox = document.getElementById('score');
var content = document.getElementById('content');
var loserScore = document.getElementById('loserScore');
var close = document.getElementById('close');
var snakeMove;      //蛇的运动
var speed = 200;       //蛇的速度
var startGameBool = true;
var startPaushBool = true;initGame();function initGame() {//Mapthis.mapW = parseInt(getComputedStyle(content).width);this.mapH = parseInt(getComputedStyle(content).height);this.mapDiv = content;//Foodthis.foodW = 20;this.foodH = 20;this.foodX = 0;this.foodY = 0;//snakethis.snakeW = 20;this.snakeH = 20;this.snakeBody = [[3, 1, 'head'], [2, 1, 'body'], [1, 1, 'body']]//游戏属性this.direct = 'right';this.left = false;this.right = false;this.up = true;this.down = true;this.score = 0;scoreBox.innerHTML = this.score;bindEvent();}

蛇，食物

创建蛇的身体，随机出现食物（个人设置屏幕一次只有一个食物）

function food() {//生成食物var food = document.createElement('div');food.style.width = this.foodW + 'px';food.style.height = this.foodH + 'px';food.style.position = 'absolute';this.foodX = Math.floor(Math.random() * (this.mapW / 20));this.foodY = Math.floor(Math.random() * (this.mapH / 20));food.style.left = this.foodX * 20 + 'px';food.style.top = this.foodY * 20 + 'px';this.mapDiv.appendChild(food).setAttribute('class', 'food');
}function snake() {
//蛇身体的变化for (var i = 0; i < this.snakeBody.length; i++) {var snake = document.createElement('div');snake.style.width = this.snakeW + 'px';snake.style.height = this.snakeH + 'px';snake.style.position = 'absolute';snake.style.left = this.snakeBody[i][0] * 20 + 'px';snake.style.top = this.snakeBody[i][1] * 20 + 'px';snake.classList.add(this.snakeBody[i][2]);this.mapDiv.appendChild(snake).classList.add('snake');      //吃掉食物 appendChild增加蛇的体长//转向switch (this.direct) {case 'right':break;case 'up':snake.style.transform = 'rotate(270deg)';break;case 'left':snake.style.transform = 'rotate(180deg)';break;case 'down':snake.style.transform = 'rotate(90deg)';break;default:break;}}
}

蛇的移动

function move() {
//蛇正常运动for (var i = this.snakeBody.length - 1; i > 0; i--) {this.snakeBody[i][0] = this.snakeBody[i - 1][0];this.snakeBody[i][1] = this.snakeBody[i - 1][1];}switch (this.direct) {case 'right':this.snakeBody[0][0] += 1;break;case 'up':this.snakeBody[0][1] -= 1;break;case 'left':this.snakeBody[0][0] -= 1;break;case 'down':this.snakeBody[0][1] += 1;break;default:break;}//删除之前蛇的节点 再渲染removeClass('snake');snake();
}

开始/暂停游戏

//开始暂停游戏
function startAndPaush() {if (startPaushBool) {if (startGameBool) {startGame();startGameBool = false;}startPaush.setAttribute('src', './images/pause.png');snakeMove = setInterval(function () {move();}, speed);document.onkeydown = function (e) {var code = e.keyCode;setDirect(code);};       startPaushBool = false;} else {//pausestartPaush.setAttribute('src', './images/start.png');clearInterval(snakeMove);    //停止蛇的运动document.onkeydown = function (e) {e.returnValue = false;return false;};startPaushBool = true;}
}

重新加载游戏


function reloadGame() {removeClass('snake');removeClass('food');clearInterval(snakeMove);startPaush.setAttribute('src', './images/start.png');this.snakeBody = [[3, 1, 'head'], [2, 1, 'body'], [1, 1, 'body']];      //设置初始位置this.direct = 'right';this.left = false;this.right = false;this.up = true;this.down = true;loser.style.display = 'block';loserScore.innerHTML = this.score;this.score = 0;scoreBox.innerHTML = this.score;startGameBool = true;startPaushBool = true;}

碰撞问题

蛇碰到设置的边框，立即中止游戏

 // 如果蛇头和食物x y同时相等 代表吃到食物if ((this.snakeBody[0][0] == this.foodX ) && (this.snakeBody[0][1] == this.foodY)) {var snakeEndX = this.snakeBody[this.snakeBody.length - 1][0];var snakeEndY = this.snakeBody[this.snakeBody.length - 1][1];switch (this.direct) {case 'right':this.snakeBody.push([snakeEndX + 1, snakeEndY, 'body']);break;case 'up':this.snakeBody.push([snakeEndX, snakeEndY - 1, 'body']);break;case 'left':this.snakeBody.push([snakeEndX - 1, snakeEndY, 'body']);break;case 'down':this.snakeBody.push([snakeEndX, snakeEndY + 1, 'body']);break;default:break;}this.score += 1;scoreBox.innerHTML = this.score;removeClass('food');            //吃掉食物后，移除食物food();     //再次随机生成食物}//撞到设置的边框if (this.snakeBody[0][0] < 0 || this.snakeBody[0][0] >= this.mapW / this.snakeW) {// console.log(123);this.reloadGame();}if (this.snakeBody[0][1] < 0 || this.snakeBody[0][1] >= this.mapH / this.snakeH) {// console.log(124);this.reloadGame();}var snakeHX = this.snakeBody[0][0];var snakeHY = this.snakeBody[0][1];for (var i = 1; i < this.snakeBody.length; i++) {var snakeBodyX = this.snakeBody[i][0];var snakeBodyY = this.snakeBody[i][1];//蛇头和蛇尾相撞if (snakeHX == snakeBodyX && snakeHY == snakeBodyY) {// console.log(126);this.reloadGame();}}

Style

css style demo

*{margin: 0;padding: 0;
}.startPage{width: 100%;z-index: 999;height: 960px;position: absolute;top:0;left:0;
}.startBtn{background-image:url('../images/startGame.jpg'); height: 60px;width: 170px;background-size: 100% 100%;cursor: pointer;position: absolute;top: 0;right: 0;bottom:0;left:0;margin: auto;/* display: none; */
}
.wrapper{width: 100%;height: 960px;background-image:url('../images/Map.jpg');background-size: 100% 100%;position: relative;
}
.left-side{width: 24%;position: absolute;height: 960px;/* border-right: 1px solid aqua; */}
.left-side img{display: none;margin-left: 50px;margin-top: 50px;
}
.main{position: absolute;left: 25%;width: 50%;height: 90%;/* border: 1px solid white; */
}
.header{width: 100%;height: 80px;text-align: center;
}
.score{line-height: 80px;color: aqua;font-size: 20;font-weight: bolder;
}
/* .smallMap{position: inherit;width: 812px;height: 478px;background-size: 100% 100%;left: 7.6%;top:28%;
} */
.content{position: absolute;/* background-image: url('../images/smallMap.jpg'); */background-size: 100% 100%;width: 85%;height:55%;left: 7.6%;top:28%;border: 2px solid green;
}
.loser{display: none;position: 100%;height: 960px; top: 0;left: 0;
}
.con{background-image:url('../images/gameover.jpg'); background-size: 100% 100%;height: 170px;width: 280px;position: absolute;margin: auto;left: 0;top: 0;right: 0;bottom: 0;border-radius: 20px;
}
.loserScore{display: block;height: 20px;width: 150px;position: absolute;top: 71%;left: 60%;color:aqua;font-size: 18px;font-weight: bolder;
}
.close{position: absolute;top:0;right:0;height: 20px;width: 20px;border-radius: 60%;background-image: url('../images/close.jpg');background-size: 100% 100%;cursor: pointer;
}.food{background-image: url('../images/food.jpg');background-size: 100% 100%;width: 50px;height: 50px;border-radius: 75%;
}
.head{background-image: url('../images/SnakeHead.jpg');background-size: 100% 100%;width: 50px;height: 50px;border-radius: 85%;
}
.body{background-image: url('../images/SnakeBody.jpg');background-size: 100% 100%;width: 50px;height: 50px;border-radius: 65%;
}.txt{color: aqua;font-weight: bolder;font-size: 18px;top:70%;left: 17.5%;position: relative;
}

贪吃蛇，扫雷，2048一般都做为js原生的一个练手demo。

结语

使用一些DOM方法，js,html,css三者交互实现一个小demo，说难也不难。懂得页面布局，函数块写demo,个人美工不是很好，页面美化不是很好。过段时间用bootstrap渲染一下。

源码下载

链接：https://pan.baidu.com/s/1UlUG-ZN82Bo-JQa_Tqjmew
提取码：zkm5
（失效的话私我）

Mr.J--贪吃蛇demo相关推荐

java贪吃蛇撞壁转弯代码_java贪吃蛇demo
import javax.swing.*; import java.awt.*; import java.awt.event.KeyEvent; import java.awt.event.KeyLi ...
C实战——高配版贪吃蛇游戏设计
↘话不多说,先上图为敬(●´∀｀●)ﾉ与君の勉:贪吃蛇Demo作为一个C语言的经典开发项目,比较适合初学者练习.透过程序看本质,该项目有种许多可供我们学习.提高的知识点:数组.指针.循环链表.多文件 ...
HNUST OJ 2293 贪吃蛇吃苹果
问题 J: 贪吃蛇吃苹果时间限制: 1 Sec 内存限制: 128 MB 题目描述贪吃蛇(也叫做贪食蛇)游戏是一款休闲益智类游戏,有PC和手机等多平台版本.既简单又耐玩.该游戏通过控制蛇头方向吃 ...
java gui怎么做游戏_Java GUI编程之贪吃蛇游戏简单实现方法【附demo源码下载】
本文实例讲述了Java GUI编程之贪吃蛇游戏简单实现方法.分享给大家供大家参考,具体如下: 例子简单,界面简陋请见谅项目结构如下 Constant.jvava 代码如下: package sna ...
d3.js 制作简单的贪吃蛇
d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇.话不多说先上图片. 1. js snaker类 class Sna ...
linux环境下Ncurses实现贪吃蛇游戏
游戏说明: linux环境下基于Ncurses图形库的C语言小游戏. Ncurses介绍: Ncurses(new curses)是一套编程库,它提供了一系列的函数以便使用者调用它们去生成基于文本的用 ...
游戏人生Silverlight(6) - 贪吃蛇[Silverlight 3.0(c#)]
[源码下载] 游戏人生Silverlight(6) - 贪吃蛇[Silverlight 3.0(c#)] 作者:webabcd 介绍使用 Silverlight 3.0(c#) 开发一个贪吃蛇游戏 ...
用C++语言实现贪吃蛇游戏
最近更了个新的关于用C/C++写贪吃蛇的blog,感觉那个帮助会更大些,这篇中用DirectX技术不适合刚开始试着写游戏的同学,传送:https://blog.csdn.net/weixin_3781 ...
JAVA游戏开发-超炫酷贪吃蛇游戏源码及教程
一．前言某日,看见隔壁家的小朋友在玩一款网络爆款贪吃蛇游戏,感觉很好玩.自己刚好正在学习JAVA编程,也想实现一个类似功能的游戏Demo练手,在网上查看了不少源码案例,全都是很古老的方块式贪吃蛇游戏 ...

Mr.J--贪吃蛇demo

用到的方法：

键盘事件

鼠标事件

HTML页面

贪吃蛇大概思路：

模块分析

初始游戏

蛇，食物

蛇的移动

开始/暂停游戏

重新加载游戏

碰撞问题

Style

css style demo

结语

源码下载

Mr.J--贪吃蛇demo相关推荐

最新文章

热门文章