原生javascript制作贪吃蛇小游戏的方法分析
更新时间：2020年02月26日 10:06:12 作者：巴啦啦小能量
这篇文章主要介绍了原生javascript制作贪吃蛇小游戏的方法,结合具体实例形式分析了JavaScript实现贪吃蛇小游戏的具体步骤、功能实现、数值运算等相关操作技巧,需要的朋友可以参考下
本文实例讲述了原生javascript制作贪吃蛇小游戏的方法。分享给大家供大家参考，具体如下：
<!--1、 创建场景 -->
<!-- 2、定义初始数据 以及随机食物 -->
<!-- 3、控制贪吃蛇方向 -->
<!-- 4、判断位置以及和随机食物的位置 增加贪吃蛇长度 -->
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
li{
width: 20px;
height: 20px;
border-radius: 50%;
background: chocolate;
position: absolute;
left: 240px;
top: 60px;
z-index: 1;
list-style: none;
}
#box{
position: absolute;
left:240px;
top: 50px;
width:800px;
height:600px;
}
</style>
</head>
<body>
<span>
游戏玩法：上下左右控制小蛇的方向。
撞到边缘游戏结束。
长按方向键即可加速。
</span>
<ul id="box">
<li></li>
<li></li>
<li></li>
</ul>
</body>
js开始
function $(id){
return document.getElementById(id);
}
window.onload = function () {
// 创建背景
js_background();
// 随机食物
js_food();
// 创建贪吃蛇
create_snake();
document.onkeydown = function(event){
let evt = event || window.event;
switch (evt.keyCode) {
case 37:direction="left";break;
case 38:direction="up";break;
case 39:direction="right";break;
case 40:direction="down";break;
default:;
// console.log(evt.keyCode);
}
start_snake()
}
}
//贪吃蛇方向// 创建背景
// 贪吃蛇方向// 创建背景
var direction = "right";
// 创建背景
function js_background(){
let bg = document.createElement("div");
bg.id = "js_bg";
bg.style.cssText = "position:relative;margin :50px auto; background:skyblue; width:800px; height:600px;";
document.body.appendChild(bg);
}
//随机食物
var food_left = 0;
var food_top = 0;
function js_food(){
food_left = parseInt(Math.random()*800/20)*20;
food_top = parseInt(Math.random()*600/20)*20;
let foodDiv = document.createElement("div");
foodDiv.style.cssText = "position:absolute;width:20px; height: 20px; border-radius:50%; background:yellow;";
foodDiv.style.left = food_left+"px";
foodDiv.style.top = food_top+"px";
foodDiv.id = "foodDiv";
$("js_bg").appendChild(foodDiv);
}
//创建贪吃蛇
function create_snake(){
let lis = document.getElementsByTagName("li");
lis[0].style.backgroundColor = "black";
lis[0].style.zIndex = 1;
for(let i = 0; i < lis.length; i++){
lis[i].style.left = 280-(i*20)+"px";
lis[i].style.top = 60+"px";
}
}
//定时器
// 定时器
let timre = setInterval(start_snake,200);
let lis = document.getElementsByTagName("li");
function start_snake(){
let left=parseFloat(lis[0].style.left);
let top= parseFloat(lis[0].style.top);
// console.log(top)
switch (direction) {
case "left":left = (left-20);break;
case "up":top = (top-20);break;
case "right":left = (left+20);break;
case "down":top = (top+20);break;
default:;
}
if(left<0 || left>800-20 || top<0 || top>600-20){
window.clearInterval(timre);
alert("亲，您Game Over");
return;
}
// for(let i = 1; i <= lis.length-1; i++){
// lis[i].style.left = lis[i-1].style.left;
// lis[i].style.top = lis[i-1].style.top;
// }
for(var i=lis.length-1;i>0;i--){
lis[i].style.left = lis[i-1].style.left;
lis[i].style.top = lis[i-1].style.top;
}
// 改变第一节
lis[0].style.left = left+"px";
lis[0].style.top = top+"px";
// console.log(food_top+"----------");
// console.log(top);
if(left == food_left && top == food_top){
eat();
}
}
function eat() {
$("js_bg").removeChild($("foodDiv"));
js_food();
// alert("ll");
let li = document.createElement("li");
$("js_bg").appendChild(li);
// create_snake();
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript时间与日期操作技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
今天小编就为大家分享一篇layui table单元格事件修改值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
数组操作是JavaScript中非常重要也非常常用的技巧,这篇文章主要给大家介绍了关于前端JavaScript经典操作之数组常用方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了JavaScript实现向OL列表内动态添加LI元素的方法,实例分析了javascript操作html元素的技巧,需要的朋友可以参考下2015-03-03
最近领导安排做一个小程序之做头部做导航分类效果，下面小编给大家分享实现代码，需要的朋友参考下吧2017-10-10
这篇文章主要给大家总结介绍了关于JavaScript中八个常见的陷阱，这些陷阱虽然针对Javascript初学者，但是砖家们你们也可以看一看，避免入了这些坑，感兴趣的朋友们下面来一起看看吧。2017-06-06
这篇文章主要给大家介绍了ES6中Class和Module的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章介绍了JS获取农历日期具体实例，有需要的朋友可以参考一下2013-11-11
下面小编就为大家带来一篇浅谈JS运算符&&和|| 及其优先级。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了JS实现超炫网页烟花动画效果的方法,实例分析了javascript实现烟花动画效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
从JavaScript纯函数解析最深刻的函子 Monad实例
这篇文章主要为大家介绍了从JavaScript纯函数解析最深刻的函子 Monad实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论