前端那些事之原生 js实现贪吃蛇篇
2024-04-03 23:21:50
2019独角兽企业重金招聘Python工程师标准>>> 
原生js实现贪吃蛇
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>贪吃蛇游戏</title><style>body, div, img {margin: 0 auto;padding: 0;}body{background-color: #fff;color:#b35208;}.wrapper{width: 800px;height: 400px;background: url("./images/bg.png") no-repeat center center;padding: 80px;}.score{margin: 10px auto;text-align: center;font-size: 30px;font-weight: 900;}.col{width: 40px;height: 40px;float: left;display: inline-block;}.row{}.snake{background: url("./images/box.png") no-repeat center center;background-size: 100% 100%;}.egg{background: url("./images/circle.png") no-repeat center center;background-size: 100% 100%;}.gameover{position: fixed;top: 50%;left: 50%;width: 408px;height: 90px;margin-top: -90px;margin-left:-204px;background: url("./images/gameover.png") no-repeat center center;opacity:0;transform: scale(0);transition: all .5s;z-index: -1;}.show{opacity:1;transform: scale(1);z-index: 1;}</style>
</head>
<body>
<div class="gameover" id="gameover"></div>
<div class="score">得分:0</div>
<div class="wrapper"><!--<div class="row">--><!--<div class="col snake"></div>--><!--<div class="col"></div>--><!--<div class="col egg"></div>--><!--</div>-->
</div>
<script>/** 1.创建基础* 2.蛇的初始化，实物的初始化（随机）* 3.开始游戏* 1.键盘事件切换* 2.开始之后，判断是否碰到墙* 3.判断是否碰到自己* 4.判断是否吃了实物* 4.游戏结束* */var scoreDiv = document.querySelector(".score"); //取得分的div对象var score = 0;//得分var rows = 9; //行var cols = 20; //列var snakeArr = []; //存储所有对象var time = 400; //毫秒var snakebody = []; //定义一个数组存放蛇身var direction = "right"; //操作蛇移动的方向var changeDir = true; //添加键盘事件监听方向键来改变蛇的移动方向function createModel(){//创建基础var wrapperDiv = document.querySelector(".wrapper");for(var i = 0; i < rows; i++) {var rowDiv = document.createElement("div");var rowArry = [];for(var j = 0; j < cols; j++) {var colDiv = document.createElement("div");colDiv.className = "col";rowArry.push(colDiv);rowDiv.appendChild(colDiv);}snakeArr.push(rowArry);wrapperDiv.appendChild(rowDiv);}wrapperDiv.style.width = cols * 40 + "px";wrapperDiv.style.margin = "auto";}//创建蛇的初始模型function snake() {for(var i = 0; i < 3; i++) {snakeArr[0][i].className = "col snake";snakebody.push(snakeArr[0][i]);}}createModel();snake();document.onkeydown = function(event) {event = event || window.event; //判断是否需要改变方向，true表示需要 false不需要if(!changeDir) {return; //表示直接结束函数，后续代码不执行}//假设蛇在向右移动，按键左右都不起作用if(direction == "right" && event.keyCode == "37") {return;}if(direction == "left" && event.keyCode == "39") {return;}if(direction == "down" && event.keyCode == "38") {return;}if(direction == "up" && event.keyCode == "40") {return;}//更据按键操作，设置方向switch(event.keyCode) {case 37:direction = "left"; //方向向左break;case 38:direction = "up";break;case 39:direction = "right";break;case 40:direction = "down";break;}//按键后变为falsechangeDir = false;//延迟var delayTime = setTimeout(function() {changeDir = true;clearTimeout(delayTime);}, time);}//蛇的移动偏移量var x = 2;var y = 0;//蛇的移动函数function snakeMove() {var snameTimer = setInterval(function() {//更据设置的方向设置蛇头的方向switch(direction) {case "right":x++;break;case "left":x--;break;case "up":y--;break;case "down":y++;break;}//判断游戏结束－－碰壁if(x < 0 || x >= cols || y < 0 || y >= rows) {document.getElementById("gameover").style.display = "block";clearInterval(snameTimer);return;}//判断蛇吃到自己for(var i = 0; i < snakebody.length; i++) {if(snakebody[i] == snakeArr[y][x]) {document.getElementById("gameover").style.display = "block";clearInterval(snameTimer);return;}}//判断蛇头移动的位置是否有蛋if(eggX == x && eggY == y) {snakeArr[eggY][eggX].className = "col snake";snakebody.push(snakeArr[eggY][eggX]);//加入到蛇身score++;scoreDiv.innerHTML = "得分:" + score;food();} else {snakebody[0].className = "col";snakebody.shift();snakeArr[y][x].className = "col snake";snakebody.push(snakeArr[y][x]);}}, time);}snakeMove();//随机函数function randomNumber(max) {var ran = Math.floor(Math.random() * max);return ran;}//生成蛋的函数var eggX = 0;var eggY = 0;function food() {//随机出新的egg的下标的x和yeggX = randomNumber(cols);eggY = randomNumber(rows);//如果即将生蛋的位置和蛇身重合if(snakeArr[eggY][eggX].className == "col snake") {food(); //重新生成} else {//否则 新生生蛋的位置并改样式snakeArr[eggY][eggX].className = "col egg";}}food();
</script>
</body>
</html>
转载于:https://my.oschina.net/yongxinke/blog/852277
前端那些事之原生 js实现贪吃蛇篇相关推荐
- eclipse javascript_原生js实现贪吃蛇游戏_javascript技巧
更新时间:2020年10月26日 11:46:36 作者:leisure-ZL 这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴 ...
- 原生JS实现贪吃蛇游戏
原生JS实现贪吃蛇游戏 贪吃蛇游戏(原生JavaScript) 贪吃蛇游戏思路分析 游戏思想: 面向对象的思想 三个js文件分别代表三个对象 三个对象相互独立,在HTML中控制全局 使用面向对象思想的 ...
- 前端那些事之原生js实现jquery常用方法
2019独角兽企业重金招聘Python工程师标准>>> 原生js封装,实现jquery中常用 方法 //定义一个对象 - 名字是$ var $$ = function() {this ...
- 使用前端原生 js，贪吃蛇小游戏
好久好久,真的是好久好久没来写过了,因为最近有点小忙.不过即使是忙,也也还是写了两个小游戏,其中一个就是这个,贪吃蛇啦. 算是一个小练手了,这个是在有点太简单了,只是第一次写这种小游戏,还是零零星星花 ...
- 原生JS实现贪吃蛇——项目总结
项目准备 项目展示图 建立新文件夹,新建出images CSS JS 三个文件夹,并在根目录下创建出index.html 将下列素材图片转到images文件中 接下来可以开始着手操作了 HTML结构 ...
- 利用HTML5 canvas元素+原生JS编写贪吃蛇
我们先来看一个最简单的例子 利用canvas动画编写贪吃蛇:https://clacier.github.io/tcs/ 一.什么是canvas? canvas是HTML5中新增加的一个元素,专门用于 ...
- 原生JavaScript抒写——贪吃蛇小游戏
原生JavaScript抒写--贪吃蛇小游戏 文章目录 原生JavaScript抒写--贪吃蛇小游戏 前言 一.需求分析 二.效果展示 三.具体逻辑代码分析 1.首先创建一个html文件,然后我们利用 ...
- JavaScript原生实现《贪吃蛇》
概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细 代码下载:http://www.demodashi.com/demo/10728.h ...
- 用python自带的tkinter做游戏（一）—— 贪吃蛇 篇
用python自带的tkinter做游戏(一)-- 贪吃蛇 篇 本人新手,刚自学python满半年,现分享下心得,希望各位老手能指点一二,也希望和我一样的新手能共勉,谢谢~ 大家都知道用python做 ...
最新文章
- SQL 基础-- 子查询
- centos下修改mysql默认端口_CentOS下修改Apache默认端口80
- Python学习-基础篇7 网络编程
- 2014\Province_C_C++_B\7 六角填数
- 自然语言处理领域的两种创新观念
- Java基础 Day14 泛型
- alert回调_你知道javascript函数的回调怎么用吗？
- 20162303《程序设计与数据结构》第一周学习总结
- OSPF OVER FR HUB-SPPKE
- 爬取常用的网站，整理成API：中国联通，大众点评，IT桔子，拉勾网，猫眼电影，人人贷......
- Android 判断wifi是2.4GHz还是5GHz
- c语言程序设计教程二进制是什么,C语言程序设计教程
- usb调试助手_米卓同屏助手 | 刷短视频必备，一键打通“任督二脉”，双端
- Tool-windows用自带命令行，将webm的视频格式转为mp4
- 关于Excel表格快捷键
- podman配置加速器、harbor镜像仓库部署
- Linux SSH 远程登录错误解决办法 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
- 基于负熵(fastICA)的盲源分离
- 睡眠即醒 蓝牙_如果您的Mac从睡眠中随机醒来，请尝试防止蓝牙唤醒功能 | MOS86...
- 【Derivation】随机过程及应用（三） - 高斯分布/正态分布的期望和方差